Bookmarklety to małe skrypty JavaScript przechowywane jako adresy URL, których kliknięcie (wywołanie) powoduje wykonanie owego kodu i tym samym pozwalają rozszerzyć wbudowane możliwości przeglądarki w kontekście aktualnie oglądanej strony.
W niniejszym wpisie zaprezentuję kilka używanych przeze mnie bookmarkletów przydatnych każdemu web developerowi (czy innemu opiekunowi stron internetowych).
Mobile Perf
Jeden z bardziej użytecznych bookmarkletów, bowiem łączy kilka innych bookmarkletów dla web developerów w jedno narzędzie.
Bookmarklety składające się na Mobile Perf:
- Firebug Lite – każdy używający Firefoxa dobrze wie czym jest owy Firebug; tym razem mamy go w postaci bookmarkletu dostępnego pod wszystkie nowoczesne przeglądarki,
- Page Resources – pokazuje wszystkie zasoby wczytane na stronie (pliki CSS, JavaScript, obrazki). Dane te mogą pomóc przy optymalizacji – wskazać pliki, które możemy połączyć (celem minimalizacji żądań HTTP),
- DOM Monster – pokazuje sporo informacji o drzewie DOM dokumentu wraz z optymalizacyjnymi poradami; wskazuje m.in.: niepotrzebne klasy CSS, duplikaty identyfikatorów (atrybut id), puste gałęzie (DOM Node), globalne właściwości JavaScript i wiele więcej. Bookmarklet ten jest nieoceniony przy optymalizacji drzewa DOM!
- SpriteMe – wyszukuje grafiki możliwe do połączenia metodą css sprite, a następnie przygotowuje odpowiedni obrazek (wszystko się dzieje automatycznie!). O zaletach tej metody pisałem przy okazji wpisu o minimalizacji zapytań HTTP,
- CSSess – służy do wyszukiwania nieużywanych selektorów CSS,
- YSlow – narzędzie doskonale znane z wtyczek Firefoksa – pomaga wykonywać testy optymalizacyjne witryny (analizuje treść strony i daje wiele porad optymalizacyjnych),
- Zoompf, Storager, Docsource, Web Timing.
SEO Bookmarklet
by Troy Meier
Pokazuje podstawowe informacje o zoptymalizowaniu strony pod wyszukiwarki internetowe: liczy nagłówki Hx, sprawdza istnienie atrybutów ALT dla obrazków, TITLE dla odsyłaczy, sprawdza obecność mapy strony (sitemap.xml), robots.txt i wiele więcej.
Ponadto zawiera bezpośrednie odnośniki do innych narzędzi przydatnych podczas optymalizacji i pozycjonowania strony internetowej.
Quick Accessibility Page Tester
Bookmarklet ten wykonuje test dostępności (accessibility) strony dla osób niepełnosprawnych czy starszych. Po analizie strony dostajemy szereg porad jak podnieść dostępność (zgodnie ze specyfikacjami WCAG czy ARIA).
⇒ uruchom Quick Accessibility Page Tester
Wave – Web Accesibilty
Kolejny warty poznania bookmarklet sprawdzający dostępność strony internetowej (w ładniejszej formie).
⇒ uruchom Wave – Web Accesibilty
Inne bookmarklety
Jeśli znasz inne bookmarklety przydatne przy prowadzeniu własnej strony internetowej, bądź też przy pracy web developera – podziel się w komentarzu, chętnie przetestuję :-)
Witam,
bardzo wartościowy i konkretny wpis. Wielki plus za promowanie otwartych rozwiązań.
Jako rozszerzenie artykułu polecam narzędzie Juicy Accessibility Toobar dla Firefoxa do testów WCAG 2.0 AAA oraz ARIA roles.
Nie jest to bookmarklet, ale działa jako zewnętrzny narzędzie (przekierowanie na URL) analizujące kod strony. Jest darmowe i jedno z lepszych na rynku do sprawdzenia implementacji standardu WAI-ARIA.
Zastępuje starsze narzedzia takie jak:
– Accessibility Extension from Firefox
– TAW Web Accessibility Test
– Web Accessibility Toolbar for IE
– Web Accessibility Checker
pozdrawiam,
Mirek
Tak patrzę, że polecasz SpriteMe, a sam masz 11 propozycji połączenia obrazów i oszczędzenia na wywołaniach, jak to jest :P
@TuTurysta: Jasne, że polecam i sam wykorzystuję w swoich projektach. Jeśli więc jeszcze bardziej się przyjrzysz temu blogowi to dostrzeżesz, że nie ja jestem autorem szablonu :) od siebie wprowadziłem tylko drobne poprawki. Ten blog jest realizowany po godzinach pracy, więc dysponuję ograniczonym czasem.