10 najbardziej użytecznych internetowych narzędzi dla webdesignera


Front-end (html, css, js)

Prawdopodobnie każdy webmaster/webdesigner ma swoje ulubione narzędzia dzięki którym tworzenie stron staje się łatwiejsze i przyjemniejsze. Czasy gołego notatnika i painta mam nadzieję odeszły w niepamięć. Chociaż dla przykładu notatnik++ mógłby się wydawać jedynie lekko ulepszoną wersją zwykłego notatnika, są to tak pomocne ulepszenia, że można je nazwać kamieniem milowym i dziękować autorom za chociażby tak proste udogodnienia jak kolorowanie składni poszczególnych elementów w kodzie naszej strony. Dlatego jeśli od dawna stoisz w miejscu jeśli chodzi o Twój warsztat webdesignerski radzę otworzyć umysł i chłonąć nowe rozwiązania, bo są to potężne oszczędności czasu i ułatwienia za które na pewno będziesz wdzięczny autorom. Tym razem jednak darujmy sobie wszelkie narzędzia systemowe, a zajmijmy się jedynie tymi, które dostępne są bezpośrednio z poziomu Twojej przeglądarki internetowej.

InstantBluePrint

tworzy bazę pod kodowanie strony

screen ze strony instantblueprint.comRozpoczynając każdy projekt strony siadamy zazwyczaj przed pustą kartką. Czy to jeśli chodzi o projekt graficzny czy już o samo kodowanie pięknego lśniącego designu. Zawsze pojawia się ten sam schemat, zazwyczaj korzystając z poprzednich projektów kopiujemy plik index.html czy index.php zmieniamy nieco składniki meta, usuwamy w zasadzie całą treść między znacznikami <body></body> i przystępujemy do wdrażania naszych pomysłów i grafiki. Niektóre edytory jak np. komercyjny phpdesigner mają wbudowane szablony, które ładują wybrany szkielet strony html, czy to np. z doctypem xhtml 1.0 strict czy transitional. Ale na tym udogodnienia chyba wszystkich edytorów htmla sie kończą.

InstantBluePrint oferuje nam coś o wiele bardziej wartościowego. Oprócz bardzo ładnego szkieletu html dostajemy całą masę dodatkowych rzeczy jak np:

  • gotowy folder projektu z podfolderami css, images, includes, js
  • plik reset.css, jeśli o nim nie słyszałeś sprawdź stronę projektu (bardzo użyteczne „wyzerowanie” domyślnych styli nagłówków, tabel, list wypunktowanych etc.)
  • pliki style.css i print.css do dalszej edycji ale już automatycznie umieszczone w folderze css i podlinkowane w pliku index
  • jedną z wielu wybranych bibliotek javascript jak jQuery, MooTools, Prototype i wielu innych… wszystko automatycznie wrzucone do folderu js i podlinkowane w indexie
  • do wyboru wyśrodkowany lub nie div wrapper

Po wybraniu dostępnych opcji otrzymujemy ładnie spakowany i przygotowany folder projektu naszej przyszłej strony. Narzędzie bardzo ciekawe i ułatwiające pracę, które szczerze polecam.

 

CSSDesk

kodowanie html i css z podglądem na żywo

zrzut ekranu ze strony cssdesk.com

Zapewne nie raz stosowałeś technikę prób i błędów przy kodowaniu strony. Zazwyczaj polega ona na zmienianiu pewnych parametrów po stronie kodu strony w edytorze tekstowym, zapisanie zmian, przełączenie się do przeglądarki, wciśnięcie magicznego przycisku F5 i sprawdzenie czy po odświeżeniu strony zmiany wyglądają tak jak tego oczekiwałeś. A teraz pomyśl, że możesz ominąć ten ciągle powtarzający się schemat, lub po prostu przetestować jakąś funkcję css bez potrzeby pisania całego kodu strony.

Wystarczy, że wejdziesz na stronę projektu CSSDesk, a otrzymasz bardzo fajne narzędzie do testowania „w locie” wszelkich zmian po stronie kaskadowego arkusza stylów. Oczywiście możesz skorzystać z innych podobnych a nawet lepszych edytorów WYSIWYG (what you see is what you get), ale tym razem jest to zestawienie aplikacji dostępnych z poziomu przeglądarki więc np. Dreamweavera sobie darowałem.

 

TypeTester

porównywarka czcionek

screen ze strony typetester.org

Kolejne bardzo użyteczne narzędzie do testowania różnych wariantów czcionek. Do wyboru jest wiele czcionek posegregowanych według kategorii:

  • czcionki bezpieczne
  • domyślne czcionki windowsowe
  • domyślne czcionki Mac
  • czcionki windows vista
  • czcionki Google
  • lista czcionek zainstalowanych w Twoim systemie

jest więc w czym wybierać i co testować. Mamy do dyspozycji 3 kolumny w każdej do wyboru te same opcje jak wielkość czcionki, odstępy między wyrazami, kolor, tło, wyrównanie itp. Do tego każda czcionka prezentowana jest automatycznie w bardzo wielu wariantach tj. normalnym, pogrubionym i pochylonym, pogrubionym i pochylonym, z tylko wielkimi literami etc. Można więc w bardzo prosty sposób porównać kilka wariantów czcionek, których zamierzamy użyć na stronie internetowej. Na koniec pozostaje kliknąć „Get CSS for:” i wybrać z której kolumny czcionek chcemy uzyskać gotowy do skopiowania kod. Wybór odpowiedniej czcionki dzięki tej aplikacji staje się wręcz dziecinnie prostym zadaniem.

 

Font Squirrel

konwerter czcionek internetowych

zrzut ze strony fontsquirrel.com

Skoro już jesteśmy przy czcionkach chciałbym pokazać Ci narzędzie, które z pewnością bardzo ułatwi stosowanie dowolnej czcionki na Twojej stronie internetowej.

Bardzo prosty w obsłudze konwerter zamieni dowolną czcionkę np. ściągniętą ze strony dafont.com na zgodną z wszystkimi przeglądarkami internetowymi. Wystarczy, że wciśniesz Add Fonts, wybierzesz czcionkę ze swojego dysku, zaznaczysz opcje basic, optimal lub expert (expert umożliwia samodzielny wybór poszczególnych opcji konwersji, ale optimal zazwyczaj działa wystarczająco dobrze), a otrzymasz gotowy spakowany pakiet czcionki gotowej do użycia w Twoim internetowym projekcie!

Oprócz wygenerowanego webowego pakietu czcionki znajdziesz również plik .css definiujący font-family, który możesz używać w dowolnych selektorach na stronie.

 

CSS 3.0 Maker

generator efektów CSS 3

screen ze strony css3maker.com

CSS 3 powoli staje się standardem. Gdyby jeszcze tylko ten standard był usystematyzowany we wszystkich przeglądarkach… ale i tak nie jest z tym tak źle. Są efekty, które niektóre z przeglądarek obsługują lepiej lub gorzej, ale można już powoli myśleć o nowej erze projektowania stron internetowych.

Żeby zrobić ładnie zaokrąglony prostokąt nie trzeba już bawić się w rysowanie go w programie graficznym, dopasowywanie szerokości np. przy pomocy sliding door. Wystarczy, że w css3 nadamy funkcję border-radius. Oprócz zaokrąglania krawędzi jest oczywiście masa innych dostępnych funkcji jak np. rzucanie cienia, animowanie, obracanie etc. Żeby jednak ułatwić sobie pracę i co najważniejsze wiedzieć który efekt dostępny będzie we wszystkich przeglądarkach wystarczy skorzystać z css 3.0 maker.

Podgląd wprowadzonych zmian na żywo i gotowy do skopiowania kod CSS uzyskanego efektu to udogodnienia zasługujące na bardzo duży plus dla tej aplikacji.

 

CSS Menu Maker

kreator gotowych menu

screen ze strony cssmenumaker.com

Jeśli potrzebujesz elastycznego i elegancko wyglądającego menu ta strona jest dla Ciebie. Gotowe warianty menu rozwijanych, poziomych i pionowych, które można konfigurować według potrzeb.

Proste aczkolwiek bardzo przydatne narzędzie szczególnie dla osób, którym stworzenie menu kojarzy się z mało przyjemnym zajęciem. Czas to zmienić!

 

Background Dotter

generator kropkowanego tła

zrzut ze strony www.pixelknete.de/dotter/

Bardzo proste, ale jednocześnie efektowne narzędzie do tworzenia kropkowanego tła. Opcja Random pozwala szybko stworzyć ciekawy kolorowy wzór, choć oczywiście można samodzielnie dopasować kolor i wielkość kropek. Aplikacja generuje powtarzalny w poziomie obrazek, który wystarczy umieścić jako tło np. dowolnego diva lub strony.

 

BG Patterns

generator powtarzalnego wzoru

screen strony bgpatterns.com

Podobny do poprzednika generator tła, tym razem jednak zamiast kropek mamy bogatszy wybór wzorów. Dostępnych jest również więcej opcji jak przeźroczystość oraz wielkość wzoru, kolory, rozmieszczenie, rotacja, faktura tła etc.

Do tego podgląd zmian widoczny na żywo i automatycznie generowany powtarzalny obrazek gotowy do ściągnięcia i umieszczenia jako tło na stronie.

 

Kuler

gotowe schematy kolorystyczne

zrzut z kuler.adobe.com

Adobe jest marką, która ewidentnie kojarzy się z narzędziami dla grafików komputerowych. Tym razem również oferują narzędzie ułatwiające prace grafikom, a jest nim strona z gotowymi schematami kolorów. Jest to efekt pracy wielu niezależnych ludzi, którzy dzielą się z innymi opracowanym zestawem kolorów. Do tego system ratingowy, czy segregowanie po najbardziej popularnych motywach daje Ci możliwość wyboru modnego i cieszącej oczy wielu innych ludzi zestawu kolorów dla Twojej strony internetowej.

Paletę można zapisać i otworzyć np. w photoshopie, lub bardziej łopatologicznie zrobić screen i pipetą pobrać wybrany kolor.

 

Adobe BrowserLab

testowanie wyświetlania witryny w różnych przeglądarkach

screen ze strony browserlab.adobe.com

Ostatnie, ale jakże baaaardzo pomocne narzędzie do testowania witryn. Jedynym warunkiem jest założenie konta adobe (bezpłatnie), dzięki któremu otrzymujemy dostęp do aplikacji przypominającej przeglądarkę internetową.

Umożliwia to przetestowanie, jak wyświetlana jest Twoja witryna na różnych przeglądarkach tj. firefox, chrome, safari i ie.