Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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.htmlJeś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.aspxTa 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/mlisthttp://piotr.eldora.pl/bazy-danych-kody-pocztowe-imiona-panstwaDwie 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. 

internet porady programowanie

Komentarze

0 nowych
underface   14 #1 30.03.2012 17:42

ja sie pytam gdzie google analytics

MaXDemage   17 #2 30.03.2012 18:15

Zamiast colorscheme proponuje kulera (kuler.adobe.com) - naprawde nie ma nic lepszego ;)
No i generator gradientów css3 z colorzilly.
Reszta narzędzi z wpisu jest znana i porzadna ;>

slepciu   10 #3 30.03.2012 19:16

@underface - google analytics nie opisywałem, ale korzystam i również polecam

@RaveStar - Emacs - to już inny kaliber niż te opisywane :)

@MaXDemage - kuler jest rzeczywiście ciekawy. Jesli chodzi o generator gradientów, to narzędzie, które opisałem w przypadku gradientów również korzysta z colorzilly

gowain   18 #4 30.03.2012 19:22

Ja polecam jeszcze http://www.browsershots.org - Fajna sprawa, żeby sprawdzić jak strona będzie wyglądała na innych przeglądarkach/systemach itp. A z offline'owych to IETester :)

A jeśli Google Analytics to też Google Webmaster Tools :)

wojtekadams   18 #5 30.03.2012 19:36

@gowain własnie miałem pisac o browsershots.org ;)

ziggurad   11 #6 30.03.2012 20:14

Dzięki!
Na pewno się przyda ;)

luqass   12 #7 30.03.2012 20:35

browsershots ma strasznie zapchana kolejke, czasem trzeba czekac kilka godzin na screena, ja najczęściej korzystam z http://test.watchscript.pl/ ;)

  #8 30.03.2012 21:13

Świetny i bardzo pożyteczny wpis, pozdrawiam :)

tomimaki   6 #9 30.03.2012 21:48

Jesli Google Analytics to i Piwik. ;)

slepciu   10 #10 30.03.2012 22:24

@tomimaki - nie znałem tego skryptu - dzięki za info, muszę się nim zainteresować

soanvig   9 #11 30.03.2012 23:16

google fonts

  #12 30.03.2012 23:54
  #13 31.03.2012 03:18

Poleciłbym także kilka innych narzędzi:
- http://www.google.com/webfonts (niestandardowe czcionki)
- http://www.fontsquirrel.com/fontface/generator (dla użytkowników, którzy nie znaleźli swojej czcionki w zbiorach google web fonts)
- http://browsersize.googlelabs.com/ narzędzie pomocne przy doborze szerokości/wysokości strony WWW
- http://jsperf.com/browse narzędzie do testowania wydajności kodu javascript. Baza wielu gotowych przykładów
- http://lesscss.org/ lub http://leafo.net/lessphp/ - bardzo ułatwia tworzenie stylów CSS
- http://spritegen.website-performance.org/ sprite generator, przydatny podczas optymalizacji gotowych stron
- http://jsbeautifier.org/ - pomocny, gdy musimy edytować skompresowany kod Javascript

Pozdrawiam,
Cezary Nowak
http://www.polishWebDesign.pl

djfoxer   17 #14 31.03.2012 15:45

Generator PESEL <3 THX! Właśnie się przydał :D

slepciu   10 #15 31.03.2012 16:54

@djfoxer - no cieszę się bardzo :)

slepciu   10 #16 01.04.2012 14:04

@Polish WebDesign - większość znam, ale dwa ostatnie trafiły na moją listę zakładek w przeglądarce

  #17 03.04.2012 22:30

Co do doboru kolorów, to poleciłbym jednak:
http://colorschemedesigner.com/ lub
http://kuler.adobe.com/

kubut   17 #18 05.04.2012 19:32

Dla zapełnienia strony treściami można użyć generatora lorem ipsum http://www.lipsum.com/

  #19 10.01.2013 18:39

Jak się ma duży ruch, albo problemy z serwerem to warto użyć jakiegoś testera/monitoringu dostępności. http://pingdom.com z zagranicznych (dobry ale drogi), albo http://pingy.eu z polskich odpowiedników