„Narzędzia frontendowca” to mój nowy pomysł na wpisy na blogu – będą to opisy programów, które są przydatne w pracy front-end developera (inni programiści również mogą znaleźć coś dla siebie). Na pierwszy ogień idzie program, bez którego nie wyobrażam sobie kontaktu z klientami i współpracownikami.

LittleSnapper to program dla systemu Mac OS X pozwalający na przechwytywanie zrzutów ekranu ze stron internetowych oraz komentowanie ich za pomocą wbudowanego edytora. Pełną listę funkcjonalności można przejrzeć na stronie domowej programu. Ja natomiast skupię się na elementach, które po prostu są przydatne dla mnie.

Przechwytywanie zrzutów ekranu stron WWW

Program ma wbudowaną przeglądarkę stron WWW pozwalającą na wykonywanie zrzutów ekranu. Przedstawia się to następująco:

Oprócz standardowych elementów każdej przeglądarki internetowej mamy do dyspozycji dwa dodatkowe przyciski – do wykonywania zrzutu całej strony internetowej oraz do wykonania zrzutu konkretnego kawałka strony.

Komentowanie przechwyconych zrzutów

Tutaj właśnie tkwi potęga LittleSnapper. Komentowanie jest proste, łatwe i świetnie się prezentuje (w przeciwieństwie do efektów dodatku FireShot dla Firefoxa). Oto jak wygląda interfejs części programu odpowiedzialnej za wstawianie komentarzy:

Od lewej mamy do dyspozycji:

  • wysyłanie pliku na serwer FTP – genialna opcja. Pozwala jednym kliknięciem myszy wysłać edytowany plik na serwer FTP. Program automatycznie podaje adres URL do pliku lub kod HTML do wstawienia na dowolną stronę. Proste, szybkie i przydatne;
  • zaznaczanie elementów;
  • przesuwanie zrzutu ekranu;
  • oddalanie/przybliżanie obrazu;
  • wycinanie;
  • wyróżnianie części obrazka (zaznaczony element zostaje w normalnej kolorystyce, natomiast wszystkie inne elementy zostają przyciemnione);
  • blur, czyli zamazywanie części zrzutu;
  • zaznaczenie prostokątne;
  • zaznaczenie eliptyczne;
  • rysowanie linii;
  • rysowanie strzałki;
  • pisanie tekstu;
  • wybór koloru rysowanych elementów;
  • regulacja wielkości/siły dodawanego elementu. Na przykład, gdy używamy bluru, to możemy regulować siłę filtru, gdy rysujemy natomiast strzałkę, to regulujemy jej wielkość.

Organizowanie zrzutów ekranu

Oprócz przybliżonych we wpisie opcji program ma także zaawansowane możliwości organizacji zrzutów w postaci kolekcji. Szczerze powiedziawszy nie używam tych opcji i nie widzę w tym sensu, ale może ktoś ma chęć kolekcjonowania zrzutów ekranu w LittleSnapper niczym filatelista chęć zbierania znaczków w klaserze.

Jak są zady, to i muszą być walety

To słynne powiedzenie przenosi nas do części wpisu o wadach programu. Gdy program robi screen jakiejś strony, to nadaje mu zawsze taką samą nazwę dla tej konkretnej strony. Co to oznacza w praktyce? Robisz zrzut ekranu, nadajesz komentarze, wysyłasz na FTP. Sytuacje powtarzasz kilka dni później, a screenshot zostaje nadpisany przez nową wersję. Równie dobrze Twój klient, który dostał screen na maila wcześniej może go właśnie otwierać i mamy problem.

Podsumowanie

Poza jedną wadą program jest naprawdę świetnym narzędziem wspomagający pracę (zwłaszcza zdalną). Program szczerze polecam i dostaje ode mnie ocenę 4+.

LittleSnapper można zakupić w Mac App Store lub w sklepie Realmac w cenie około 70zł.

4 odpowiedzi do “Narzędzia frontendowca – LittleSnapper

  1. Ciekawy bajer, szczególnie jeśli chodzi o komentowanie i upload na FTP. Mnie jednak wystarczy do szczęścia Screengrab (dodatek do Firefoxa), mail/komunikator i imageshack.us ;]
    No, i przede wszystkim add-ony są darmowe. Jak dla mnie to robi różnicę.

    1. Właśnie chodzi o tę prostotę i szybkość. Dzięki takim małym narzędziom za każdym razem oszczędzającym kilka/kilkanaście sekund zwiększa się wydajność. Większa wydajność natomiast przekłada się na większy zarobek. Na tym się nie oszczędza ;)

      1. Tak, ale jest też kwestia przyzwyczajenia – dla mnie szybciej jest zrobić screena pluginem, wrzucić na imageshack i napisać o co mi chodzi, niż odpalać nową przeglądarkę, grzebać się w ustawieniach i szukać co gdzie jest. Zdaję sobie jednak sprawę, że wszystkiego można się nauczyć ;]

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *