Narzędzia online, które usprawnią tworzenie stron www

Budowa profesjonalnej strony internetowej to dość złożony i czasochłonny proces. Każdy taki projekt składa się z kilku etapów, podczas których przygotowywany jest między innymi schemat kolorystyczny, dobierane są zdjęcia i tworzony tekst. O to wszystko należy odpowiednio zadbać, a czas jest niezwykle cenny. Dlatego przedstawiam kilka narzędzi online, które moim zdaniem są niezwykle pomocne przy pracy nad stronami internetowymi i nie tylko.

Treść

Lorem Ipsum jest generatorem wypełniaczy tekstowych. To podstawa każdego projektu gdy nie mamy jeszcze dostępnego tekstu docelowego. Dzięki Lorem Ipsum możemy zaplanować ile tekstu potrzeba i gdzie go wstawić, pomaga również dobrać odpowiednie formatowanie. Tak przygotowany projekt można wysłać klientowi do wstępnej akceptacji, nie tracąc czasu, oczekując gotowych tekstów.

Google Fonts jest zbiorem ponad 970 darmowych fontów działających na zasadach Open Source z licencją Open Font License. Do dyspozycji mamy możliwość wpisania własnego tekstu, nadania koloru i wielkości, dzięki czemu możemy sprawdzić font, zanim go pobierzemy.
FontPair pomoże dobrać do fontu głównego, dodatkowy, pasujący zestaw czcionek. Tworząc strony internetowe, bardzo często sięgamy po dodatkowe zestawy, które urozmaicają treść.

LanguageTool jest bardzo skutecznym narzędziem do korekty tekstu. Wyłapuje literówki i doskonale radzi sobie z interpunkcją oraz ortografią. Oczywiście podobną funkcjonalność ma niemal każdy edytor tekstu, jak na przykład Microsoft Word czy Google Docs, ale LanguageTool potrafi trochę więcej, no i jest niezwykle prosty w użyciu. Posiada również wtyczkę do wielu programów, w tym przeglądarek.

Convertio to świetne narzędzie wyciągające tekst z aż czternastu formatów. Jeśli Twój klient dostarczył Ci grafikę bądź zdjęcie z tekstem, nie musisz go przepisywać. Wystarczy wrzucić plik do Convertio i gotowe. Konwerter jest naprawdę bardzo skuteczny, kilkukrotnie oszczędził mi czasu i nerwów.

Kolory

Coolors mój ulubiony generator schematów kolorystycznych, w którym możemy tworzyć, przechowywać i eksportować do kilku plików własne zestawy kolorystyczne. Jest też zbiór gotowych schematów stworzonych przez innych użytkowników. Coolors można zainstalować jako wtyczkę w programie Photoshop oraz Illustrator.

Adobe Color to drugie po Coolors narzędzie, z którego korzystam przy budowaniu schematów kolorystycznych do swoich projektów. Przydatną funkcjonalnością jest wyciąganie kolorów z plików graficznych. Podobnie jak Coolors, również i tu znajdziemy obszerną bazę gotowych schematów.

Grafika

Wiewiórka na gałęzi, z zielonym tłem Wiewiórka na gałęzi, bez tła
Wiewiórka na gałęzi, z zielonym tłem Wiewiórka na gałęzi, w tle morze
Zdjęcie kobiety z aparatem fotograficznym Zdjęcie kobiety z aparatem fotograficznym, bez tła
Zdjęcie kobiety z aparatem fotograficznym Zdjęcie kobiety z aparatem fotograficznym, na tle ściany

Remove doskonale sprawdzi się  gdy musisz szybko pozbyć się tła z jakiegoś zdjęcia. Pozwala tego dokonać bez odpalania programu graficznego i manualnego separowania tła od pożądanego elementu. Należy jednak mieć na uwadze, że jest to narzędzie do wykorzystania tylko przy prostych zdjęciach, na których pierwszy plan jest wyraźny i niczym niezakłócony. Z bardziej skomplikowanymi grafikami będzie znacznie ciężej i efekty mogą być niezadowalające. Trzeba również odnotować, że zdjęcia po automatycznym szparowaniu niestety trochę tracą na jakości, co można zobaczyć na powyższych przykładach.

Easy-Resize pomoże, gdy musimy szybko zmniejszyć wielkość czy rozmiar zdjęć. Kompresja o dziwo jest bardzo dobra a straty zwykle prawie niewidoczne. Oczywiście bardzo kolorowe i skomplikowane zdjęcia czy grafiki mogą po kompresji zawierać sporo brzydkich artefaktów.

Optimizilla podobnie jak Easy-Resize jest maksymalnie prostym narzędziem, z tą różnicą, że kompresja odbywa się “na żywo”, czyli z podglądem. Narzędzie działa jak należy dając dobre wyniki kompresji.

Gdy potrzebujesz bardziej zaawansowanych rozwiązań, z pomocą przychodzą PomniejszaczZmniejszacz, które oferują trochę więcej funkcji od Easy-Resize i Optimizilla. Są to między innymi takie funkcjonalności jak obracanie zdjęcia, efekty (czarno-białe, sepia, rozmycie, negatyw) oraz tekstowy znak wodny. Dodatkowym atutem jest darmowe hostowanie zdjęć.

HTML/CSS/JS

CSS Compressor jest bardzo prostym narzędziem, które pomoże zadbać o wydajność Twojej strony, kompresując kod CSS. Kompresja polega na usunięciu z kodu wszelkich odstępów i pojedynczych spacji, dzięki czemu oszczędzamy zasoby i zyskujemy na wydajności.

CSS Minifier podobnie jak wspomniany wcześniej CSS Compressor, ma za zadanie kompresję kodu CSS. Posiada jednak kilka dodatkowych możliwości jak np. pobranie skompresowanego kodu w formie pliku. Ponadto umożliwia również kompresję kodu JavaScript.

Codepen doskonale dopełnia powyższe narzędzia. Jest to edytor HTML, CSS i JS z podglądem efektów na żywo. Ponadto znajduje się tam duży zbiór gotowych elementów ułatwiających pracę z kodem. Po rejestracji otrzymujemy możliwość tworzenia zbiorów prac innych użytkowników oraz tworzenia i zapisywania własnych.

Mam nadzieję, że wymienione narzędzia pomogą także i Tobie w codziennej pracy, oszczędzając cenny czas. Chętnie poznam również Twoje ulubione narzędzia online, którymi możesz podzielić się w komentarzu.

Krzysztof Klamka

Krzysztof Klamka

Grafik i projektant stron internetowych z ponad dziesięcioletnim doświadczeniem. Prywatnie miłośnik informatyki, psychologii jak wspomniałem wyżej, astronomii, nowych technologii, a także zapalony kinoman i meloman.