Narzędzia webdevelopera (2/2) – cięcie grafiki i pisanie kodu

Podobnie jak w przypadku przeglądarki internetowej tak i w przypadku pisania kodu można użyć różnych narzędzi. Ja jednak chciałbym się skupić na narzędziach które zostały specjalnie zaprojektowane aby przyspieszyć proces tworzenia strony. Wiadomo, do klepania kodu można użyć nawet zwykłego notatnika (teoretycznie, bo pisząc stronę, która wykorzystuje sesje lub ciasteczka, notatnika nie da się użyć gdyż dodaje na początku pliku znak BOM – który elegancko rozwala każdą ciasteczkowo-sesyjną stronę). Zatem – jakich narzędzi powinno się używać? Tylko najlepszych (i do tego darmowych!), a zatem:

  • Eclipse – tego używam do klepania kodu. Na pierwszy rzut oka jest to ogromny kombajn, z mnóstwem niepotrzebnych opcji. Ale to za co najbardziej cenię Eclipse to kolorowanie składni dla wszystkich języków (css, js, html, php), podpowiadanie nazw funkcji i metod, walidacja kodu (tak, tak walidacja kodu od razu podczas pisania), zarządzanie projektami, integracja z SVN, wykorzystanie ANT’a. Ponadto oczywiście Eclipse posiada mnóstwo innych przydatnych funkcji, których osobiście nie używam – ale wiem, że jeżeli w przyszłości pojawi się narzędzie ułatwiające pracę, Eclipse będzie oferować możliwość podpięcia tego narzędzia do siebie. To tak samo jak Firefox – jeżeli coś jest Ci potrzebne, na pewno już istnieje taka wtyczka. Aby jednak Eclipse mógł mieć te wszystkie fajne funkcje, potrzebna jest instalacja wtyczek:
    • Eclipse PDT – wtyczka specjalnie dla webdeveloperów, umożliwiająca kolorowanie składni dla css, js, html, php, walidację kodu itd. Wszystko w jednej paczce. Jeżeli tworzysz strony – ta wtyczka w eclipse jest obowiązkowa.
    • Subclipse – do obsługi SVN. Jeżeli pracujesz przy dużych projektach bez tej wtyczki ani rusz. Umożliwia cofnięcie stanu projektu (oraz każdego pliku z osobna) do dowolnego punktu z przeszłości. Czyli np. chcesz wrócić do wersji pliku sprzed pół roku – nie ma problemu. Chcesz porównać obecną wersję pliku z innym plikiem z przeszłości – SVN właśnie to umożliwia. A może zmieniałeś kod i okazało się że jednak poprzednia wersja była lepsza? Dobrze że jest SVN.
    • ANT – ten dodatek nie jest jakoś bardzo niezbędny. Ale umożliwia automatyzację powtarzających się czynności. Ja używam go do setupu nowych projektów – na początku raz uruchamiam skrypt ANT’a, podaję nazwę projektu i cała niezbędna konfiguracja wykonuje się automatycznie (utworzenie bazy danych, konfiguracja hostów dla projektu, skopiowanie niezbędnych plików, konfiguracja xammp itd). Tak samo zrzut bazy, upload bazy – wszystko dzieje się za pomocą jednego kliknięcia. Nie muszę się martwić, jaki aktualnie projekt mam otwarty, gdzie zapisać plik, bo raz skonfigurowany ANT zrobi to wszystko za mnie.
  • XAMPP – to serwer www z obsługą PHP i MySQL. Bo gdzieś te strony przecież trzeba przecież testować. Chyba nic więcej nie trzeba mówić. Ponadto, że ma bardzo dobry support i nowe wersje XAMPP’a zawierające aktualne wersje PHP i MySQL pojawiają się w miarę szybko.
  • FileZilla – używam jej do wrzucenia plików na serwer. Szybka i wygodna aplikacja.
  • Thunderbird – klient pocztowy. Bez niego nie wyobrażam sobie pracy. Do niego obowiązkowo wtyczka Lightning – do zarządzania czasem. Wiadomo, mając wiele spraw nagłowie łatwo o czymś zapomnieć. I tutaj wkracza Lightning – aby nie zapomnieć.
  • Photoshop – to jedyne narzędzie, które nie posiada swojego darmowego odpowiednika. Oczywiście istnieje wiele darmowych zamienników jak Gimp, Pain.NET ale nie stawiajmy ich na równi z Photoshop’em – bo te programy to tylko namiastka tego co potrafi Photoshop. To tak jakby porównywać pizzę ze śmietnika z kolacją w restauracji.
    Jeżeli Photoshop ma służyć tylko do cięcia grafiki, którą dostarcza Twój klient, to nie ma sensu wydawać prawie 4000 zł na Photoshopa. Do samego cięcia doskonale nadają się inne wymienione przeze mnie „zaminniki” (chociaż nawet tutaj Photoshop wygrywa na całej linni). Jednak – jeżeli tak jak ja – projektujesz też grafikę, niestety trzeba zainwestować w Photoshopa bo inaczej pracować się nie da.

Tak wygląda lista aplikacji, bez których nie wyobrażam sobie codziennej pracy. Zdaję sobie sprawę, że być może ten zestaw nie jest idealny i czegoś w nim brakuje. Jeżeli tak jest, to chętnie się o tym dowiem – zapraszam do dyskusji.

13 Responses

  1. Kamil pisze:

    Witam. Artykuł dość przydatny zachęciłeś mnie do przetestowania ECLIPSE, mimo tego że „głosy” mówią że jest bardzo wolny. Jedną rzecz mogłeś nadmienić iż odpowiednik XAMPP’a na Mac’a jest MAMP. Co do samego cięcia polecam PHOTOSHOP ELEMENTS 8 (koszt 400 zł Windows/Mac OS X) jest to wersja okrojona, która w zupełności wystarcza dla cięcia stron (sam używam).

    Pozdrawiam.

  2. Darek Grund pisze:

    Nie mam dostępu do Mac’a, ale wydaje mi się że XAMPP i MAMP to dwa osobne projekty. XAMPP dla Mac’a nazywa się XAMPP i jest dostępny do pobrania równolegle z wersją Windows.

    Co do Eclipse – również słyszałem że działa wolno, ale podczas pracy się tego nie zauważa, więc nie wiem na czym ta „wolność” miałaby polegać. Oczywiście, Eclipse to ogromny kombajn i do tego korzystający ze środowiska Java – przez co chociażby z definicji musi być wolny. Ale tak jak mówię – ja tego nie uświadczyłem i z Eclipse pracuje się szybko i wygodnie.

  3. Kamil pisze:

    Masz racje co do XAMPPa ;) Sprawdziłem mój błąd :)

  4. Jeśli grafik dobrze przygotuje szablon w Photoshopie, to nie będzie kłopotów z obróbką jego pod GIMP-em.

  5. Darek Grund pisze:

    Co masz na myśli pisząc że grafik „dobrze przygotuje szablon”? Czy chodzi o opisanie wszystkich elementów szablonu (rozmiary czcionek, kolory)? Kiedyś pracowałem z takim szablonem, ale znacznie łatwiej było mi te wartości sprawdzić w PS niż przepisywać je z grafiki.

    Być może do Gimp’a istnieje wtyczka, dzięki której można odczytać pliki PSD w taki sposób jak zrobiłby to Photoshop. Mam tutaj na myśli takie kwestie jak zaznaczanie tekstu (w PS po zaznaczeniu od razu wiadomo jakiej wielkości jest czcionka, czy jest pogrubiona, można pobrać jej kolor itp), ukrywanie elementów szablonu itp.

    Jeżeli takowa wtyczka nie istnieje, to pewnie (nie testowałem, więc są to domysły) Gimp widzi plik PSD jako zwykłą grafikę, lub w najlepszym przypadku potrafi rozróżnić warstwy. Często jednak tak powierzchowne rozpatrywanie pliku PSD będzie niewystarczające, a w związku z tym wymagać będzie dodatkowych nakładów pracy ze strony grafika, lub osoby która musi pociąć grafikę.

    Jeszcze w kwestii dobrego przygotowania szablonu przez grafika – niesamowicie trudno jest znaleźć takiego, który znałby chociaż podstawy kodowania stron. A bez takiej wiedzy nie da się przygotować szablonu, który nie sprawiłby problemów ze wdrożeniem.

  6. Fakt jest faktem, że niektórych plików PSD GIMP dobrze nie interpretuje. Dlatego czasem grafik musi „złagodzić” go, aby GIMP mógł go odtworzyć. W zasadzie to tylko warstwy poszczególne są dostępne i nic więcej. Grunt jednak, żeby były dobrze scalone, tj. aby nie było efektów, których nie rozumie GIMP.

  7. Darek Grund pisze:

    W takim razie przygotowanie grafiki, która jest możliwa do otworzenia w programie GIMP, mocno ogranicza pracę grafika. Nie wydaje mi się, aby komuś chciało się „ciągnąć w dół”, aby przygotowywać swoje projekty pod GIMP’a. Kosztuje to więcej zasobów, a podyktowane jest wyłącznie tym, że druga strona nie posiada Photoshop’a? Raczej marny argument. Tym bardziej, że płacąc za Photoshopa wcale niemałe pieniądze chciałoby się wykorzystać jego moc. Gdybym chciał zrobić grafikę pod GIMP’a użyłbym po prostu GIMP’a i zostawił sobie w kieszeni sporo pieniędzy.

  8. Prawda. Mam raczej na myśli tutaj sytuację, w której współpraca jest na zasadzie dwóch odrębnych podmiotów. Jeden korzysta z Photoshop-a, drugi nie.

  9. kissdesign pisze:

    Do Eclipsa polecam wtyczkę Aptana, szczególnie pomocna jeżeli chodzi o pisanie kodu JS/CSS dzięki inteligentnym podpowiedziom. W dodatku wyświetla informację o poprawnej implementacji poszczególnych metod JS / reguł CSS.

  10. Darek Grund pisze:

    Też kiedyś używałem tej wtyczki – tylko z tego co pamiętam jest ona komercyjna i trzeba za nią zapłacić. Kiedyś było by to dla mnie bez różnicy, ale teraz już nie mogę sobie pozwolić aby mieć w pracy nielegalne oprogramowanie.

    Do Eclipse jest wtyczka PDT i w niej znajduje się wszystko to co w Aptana, a dodatkowo jest ona darmowa. Ah, nie – jest jedna rzecz której brakuje w PDT – wsparcie dla FTP. Aptana fajnie obsługuje FTP i to była jedyna rzecz której mi brakowało w PDT.

  11. gdaq pisze:

    Ja kod html/css pisze w notepad++ ma kolorowanie skladni wielu jezykow w standardzie.
    Do polaczenia ftp wykorzystuje wtyczke ff fireftp dziala o wiele sprawniej niz totalcmd itp.
    Do grafiki fireworks i photoshop. Moim zdaniem do stron www fireworks jest wystarczajacy chyba ze uzywacie jakis wyjazonych efektow niedostepnych w fireworksie. Po poltoraroku korzystania z fireworksa zeklbym ze czasem jest wygodniejszy w pracy.

  12. Darek Grund pisze:

    Do ftp używam FileZilla – praktycznie jedyny powód jest taki, że widzę które pliki nie zostały prawidłowo zapisane na serwerze. I można wtedy łatwo, te błędne pliki jeszcze raz wysłać. Dla mnie jest to ważne, bo pracując z CMS’ami które mają dużo plików, czasem zdarzało się, że jakiś plik został źle wysłany (takie miałem łącze), a dojść do tego jednego pliku, przez którego całość nie działa, to jest chyba niemożliwe.

    Z Fireworksa nigdy nie korzystałem (raz tylko do pocięcia grafiki, kiedy jeszcze pracowałem w firmie, gdzie nie mieli PS). Przyzwyczajony byłem do PS, więc korzystanie z Fireworksa było dla mnie nienaturalne. I jakoś nie miałem okazji się do niego przekonać.

  13. Janusz pisze:

    Thunderbird do poczty? Tyle nerwów zjadłem, że dziękuję bardzo.

    Tylko i wyłącznie gmail, gdzie można sobie zaimportować wszystkie swoje konta pocztowe i jest git.

    Pozdrawiam

Leave a Reply

Using Gravatars in the comments - get your own and be recognized!

XHTML: These are some of the tags you can use: <a href=""> <b> <blockquote> <code> <em> <i> <strike> <strong>