Narzędzia przydatne webmasterom

Słowo wstępu. W dzisiejszym wpisie przedstawię wam kilka narzędzi, które mogą ułatwić pracę nad stronami i aplikacjami internetowymi. Zaletą (pewnie i wadą jednocześnie) tych narzędzi jest to, że dostępne są online i działają w przeglądarce. Zachęcam każdego zainteresowanego do wypróbowania narzędzi. Część oszczędzi nam sporo czasu, część pozwoli nam tworzyć lepsze aplikacje.

Dobór kolorów

http://www.colorschemer.com/online.html Jeśli ktoś ma problem z doborem pasujących do siebie kolorów może skorzystać z automatów, które podpowiedzą jakie kolory pasują do wybranego koloru bazowego.

Kolor bazowy możemy wybrać z lity lub wpisać ręcznie RGB lub lepiej znane webmasterom wartość HEX. Strona wygeneruje nam 16 kolorów, które wspólnie z wybranym powinny się dobrze komponować. Wynik co prawda nie zawsze jest idealny, ale często uda nam się wybrać 3‑4 kolory na stronę. Ze strony można pobrać też bardziej rozbudowaną wersje programu działające na komputerze.

Generator PESEL

http://pesel.cstudios.pl/Ogeneratorze/GeneratorOnLine.aspx Ta strona zainteresuje osoby, które w swoich aplikacjach używają wszelkiego rodzaju formularzy rejestracyjnych i podobnych, w których jedną z zbieranych danych jest PESEL. Problem powstaje gdy chcemy przetestować walidacje PESEL'i i jednocześnie ich niepowtarzalność w bazie danych. Szybko okazuje się, że znamy za mało numerów, żeby dobrze przetestować aplikację. Dzięki tej stronie nie zabraknie nam numerów PESEL do testów.

Możemy losować całkiem losowe numery, lub określić płeć oraz konkretny dzień urodzenia lub zakres dat.

Generator CSS3

http://css3generator.com/ Każdy kto próbował tworzyć kod CSS, który nadaje jakiemuś elementowi cień wie, że ręczne dobieranie parametrów może przysporzyć bólu głowy. Ciągłe poprawki kodu i odświerzanie strony... Dzięki temu generatorowi unikniemy tej żmudnej pracy. Wypełniamy prosty formularz, każda zmiana generuje nam podgląd elementu oraz kod CSS do skopiowania.

Generator potrafi wygenerować podgląd i kod dla 12 właściwości, miedzy innymi: cienie, zaokrąglenia, cienie dla tekstu, gradienty, transformacje... Niestety generator czasem się jakby "zacina" - trzeba wtedy odświeżyć stronę.

Generator favicon

http://www.favikon.com/ Prosta stronka. Przesyłamy do niej plik graficzny, zaznaczamy obszar, który ma być wycięty i pobieramy plik favicon.ico. Możemy też pobrać plik z rozszerzeniem .png

Grafiki wskazujące ładowanie

http://www.ajaxload.info/ Jeśli tworzymy aplikacje oparte o AJAX z pewnością przydadzą nam się grafiki informujące użytkownika o ładowaniu się jakiś danych. Strona z tego akapitu umożliwia nam wygenerowanie i pobranie odpowiadającego nam pliku takiej animacji.

Do wyboru mamy prawie 40 różnych kółeczek, kręcących się strzałek, paseczków itp. Dla każdego możemy ustalić kolor tła (lub przezroczyste) oraz kolor samego elementu.

Kompresja JS

http://jscompress.com/ Ten prosty kompresor skryptów JS pozwoli nam zaoszczędzić na transferze jaki będzie generować nasza strona i co najważniejsze wpłynie pozytywnie na szybkość jej ładowania. Wszystko odbywa się banalnie prosto. Na stronie wklejamy kod, który chcemy zoptymalizować, a strona generuje nam kod bez zbędnych odstępów, komentarzy itp. Możemy również przesłać do narzędzia cały plik, lub kilka, które zostaną połączone w jeden.

Strona wykonuje jedynie najprostsze operacje, które pozwalają zaoszczędzić na wielkości kodu. Sprawdza się tam gdzie bardziej zaawansowane metody powodują, że pliki przestają działać (może się tak dziać np kiedy spróbujemy skompresować pliki które wykorzystują jQuery UI). Jeśli zależy Wam na większej oszczędności wypróbujcie to narzędzie: http://compressorrater.thruhere.net/

Piksele, milimetry, punkty...

http://www.translatorscafe.com/cafe/units-converter/typography/calcula... Na tej stronie możemy przeliczać między sobą jednostki używane do określania rozmiarów na ekranie, np piksele na milimetry. Może to nam się przydać kiedy tworzymy elementy na ekran i do wydruku.

Na stronie dostępnych jest, poza opisanym, kilkadziesiąt innych kalkulatorów

Lista miast, kodów pocztowych, krajów

http://meta-info.appspot.com/mlist http://piotr.eldora.pl/bazy-danych-kody-pocztowe-imiona-panstwa Dwie strony cenne ze względu na zgromadzone dane. Jeśli potrzebujecie w projekcie listę wszystkich krajów na świecie, albo polskich kodów pocztowych to zajrzyjcie na te strony. W sumie ponad 20 różnych list w postaci łatwo przetwarzanych list (JSON, XML), a niektóre w postaci gotowych skryptów SQL do wstawienia do bazy.

Testuj wygląd tekstu

http://www.typetester.org/ Ostatnie narzędzie, o których chcę napisać to strona pozwalająca nam przetestować jak będzie wyglądać nasz tekst przy różnych ustawieniach CSS. Możemy jednocześnie oglądać nasz tekst w trzech rożnych układach stylów w trzech kolumnach wyświetlanych obok siebie.

Dla każdej z trzech kolumn możemy ustalić wile parametrów, miedzy innymi rozmiar czcionki, krój czcionki, odstępy między literami, wyrazami, color, tło ... Na koniec dla kolumny która nas zadowala możemy pobrać gotowy styl css.

Podsumowanie

Mam nadzieję, że przedstawione przeze mnie narzędzia ułatwią wam trochę pracę. Wiem, że większość z tych rzeczy można zrobić ręcznie, ale zawsze byłem wyznawcą zasady, że pracę sobie trzeba ułatwiać, a nie utrudniać. Jeśli znacie inne ciekawe narzędzia podawajcie w komentarzach, chętnie je wypróbuje.