Ogromna kompilacja narzędzi projektowych
Projektanci stron internetowych mają do dyspozycji wiele narzędzi, od robienia wszystkiego, od organizacji myśli na temat konkretnego projektu, po debugowanie ostatecznego projektu.
Ale z tak wieloma narzędziami, jak możesz określić, które z nich są naprawdę przydatne i które tracą twój czas?
Przygotowaliśmy ogromną listę najlepszych i najbardziej przydatnych narzędzi dla projektantów stron internetowych .
Celowo pomijane na liście są wspólne narzędzia, które większość projektantów prawdopodobnie już używa (jak Dreamweaver lub Panic's Coda, Photoshop lub GIMP i podobne popularne programy, które prawie każdy projektant ma już w swoim zestawie narzędzi).
Są to narzędzia, które zaoszczędzą Twój czas, sprawią, że będziesz bardziej efektywnym projektantem, uprości lub przyspieszy proces projektowania lub w inny sposób ułatwi Ci życie.
Kompilacja narzędzi offline
W większości przypadków użyteczne narzędzia do projektowania stron internetowych koncentrują się wyłącznie na narzędziach online.
Ale istnieje kilka bardzo przydatnych narzędzi, które możesz wykorzystać, aby otworzyć opcje, jeśli chodzi o projektowanie. Te rzeczy mogą ułatwić niektóre zadania, w tym pracę z niezdecydowanymi klientami.
Tablety graficzne
Tablety graficzne (czasami nazywane tabletami rysunkowymi, tabletami graficznymi lub tabletami do digitalizacji) to niezwykle przydatne narzędzie w arsenale projektanta stron internetowych. Podczas gdy większość projektantów potrafi zręcznie rysować za pomocą myszy, tablet czyni to znacznie łatwiejszym i szybszym.
Większość tabletek składa się z dwóch podstawowych części: samego tabletu i długopisu (lub rysika). Wiele z nich ma również krążek (działający podobnie do myszy, ale sam tablet zamiast podkładki pod mysz lub biurko). Najważniejszą zaletą tabletu jest jego wielkość, natomiast głównym punktem uwagi jest wrażliwość na nacisk.
Same tabletki są dostępne w rozmiarach od około 4 "x 5" do 19 "x 13". Oczywiście im większa tabletka, tym droższa. W większości przypadków projektanci stron internetowych mogą uciec z tabletami na mniejszym końcu spektrum, chyba że planują wykonać wiele prac ilustracyjnych (a nawet wtedy jest to całkowicie możliwe, aby uzyskać wyniki jakości z tabletu średniej wielkości).
A mniejsze tablety są bardziej przenośne, dzięki czemu są wygodne dla projektantów, którzy nie zawsze chcą być przywiązani do biurka.
Pióra są wrażliwe na nacisk, aby zapewnić bardziej realistyczne wrażenia . Wspólne wrażliwości wahają się od 256 poziomów ciśnienia do 2048 poziomów. Im wyższy poziom czułości, tym bardziej będzie się czuł, jakbyś używał pióra i papieru.
Popularne tablety graficzne
Wacom jest prawdopodobnie najbardziej popularnym producentem tabletów. Mają cztery różne linie produktów: Bambus (który obejmuje produkty Bamboo Craft i Bamboo Fun), skierowany do konsumentów i hobbystów; Graphire, ich tablet Bluetooth; Intuos, ich linia średniego zasięgu dla kreatywnych profesjonalistów; i Cintiq, ich linia high-end, która łączy monitor z tabletem w celu uzyskania efektu "pióra na ekranie" (jeden z nich ma nawet ekran 21 ").
Aiptek tworzy linię tanich tabletów, których ceny zaczynają się od 50 USD. Oferują tablet USB o przekątnej 12,1 cala za mniej niż 130 USD (w porównaniu do 469 USD za tablet Wacom o porównywalnej wielkości). Najciekawszą ofertą Aiptek jest jednak ich "My Note Premium" (170 USD), która pozwala na rysowanie na kartce papieru z prawdziwym długopisem i rejestruje wszystko, co robisz. Jest wystarczająco dużo pamięci na maksymalnie 100 stron pisanych i jest wyposażony w gniazdo kart SD, aby zwiększyć jego pojemność. A jeśli chcesz go wykorzystać do robienia notatek na spotkaniu, możesz go zabrać z 4 baterii AAA, co oznacza, że nie będziesz musiał zabierać ze sobą laptopa.
UC-Logic jest drugim głównym producentem tabletów graficznych. Ich produkty mieszczą się w środkowej części cen tabletów, a tablet 9 "x 12" (PF1209-Pro) kosztuje około 250 USD. Mają dostępne tabletki, które zaczynają się od 40 USD.
Tablice nastrojów
Deski Mood (zwane również deskami inspiracji) są doskonałym narzędziem dla projektantów, którzy pracują z klientami, którzy mogą nie mieć jasnego pomysłu na to, czego chcą.
Deski z motywem nastroju często przyjmują postać kolażu zawierającego elementy projektu. Przykładami uwzględnionych elementów mogą być próbki typograficzne, schematy kolorów, konkretne przykłady graficzne lub ogólne elementy "nastrojowe", które odzwierciedlają wizję projektanta dla wrażenia, jakie strona powinna dać odwiedzającym.
Tablice do stylizacji są często używane w dziedzinie projektowania wnętrz, aby pokazać klientom pomysły na remont pokoju lub całego domu. Są również używane w branży mody, aby służyć jako inspiracja i kierunek dla linii lub sezonu. Ale są równie cenne dla grafików i projektantów stron internetowych.
W zależności od typu klienta, z którym pracujesz, możesz utworzyć luźny kolaż z próbkami nakładającymi się w sposób organiczny . Jeśli twój klient jest w polu twórczym lub zna proces twórczy, ten rodzaj tablicy nastrój może działać całkiem nieźle.
Jeśli twój klient jest przyzwyczajony do bardziej korporacyjnego lub formalnego środowiska, bardziej odpowiednie może być stworzenie bardziej zorganizowanej tablicy nastrojów.
Użyj nagłówków, aby wyróżnić schemat kolorów, konkretne elementy projektu, typografię i inne elementy tablicy nastrój, aby nadać całemu obiektowi pewną strukturę.
Jeśli masz wiele pomysłów na wskazówki, w które może przejść projekt, utworzenie kilku różnych tablic nastrojów może być świetnym sposobem na uzyskanie opinii klientów i dalsze doskonalenie własnych pomysłów.
Stworzenie dwóch lub trzech różnych przykładów, aby pokazać klienta, może być cenne w uzyskaniu dalszego kierunku od klienta bez spędzania godzin lub dni w rzeczywistej makiecie strony tylko po to, aby powiedzieć, że nie jest to coś, czego szukają.
I to jest naprawdę główna korzyść z używania tablic nastrojów w procesie projektowania. Deska nastrój generuje zwykle o wiele mniej czasu na stworzenie niż makieta witryny .
Korzystanie z tablic nastrojów w celu uzyskania dalszych informacji od niezdecydowanego lub niezabezpieczonego klienta, zanim poświęci godziny na projekt, który zostanie odrzucony, sprawia, że wszyscy są bardziej zadowoleni.
Zasoby do tworzenia własnych Moodboards
Opublikowaliśmy artykuł na temat Dlaczego Mood Boards Matter pod koniec ubiegłego roku. Artykuł opisuje podstawy tworzenia plansz nastrojów i dlaczego warto z nich korzystać. To świetny punkt wyjścia.
From the Couch ma film instruktażowy o nazwie Tworzenie skutecznej deski do gry . Ma około siedmiu minut i obejmuje podstawy tworzenia cyfrowej tablicy nastrojów dla projektów.
Flickr ma Tablice Inspiracji basen, który gromadzi obrazy nastrój i inspiracje z wielu dziedzin projektowania. To dobre miejsce, aby znaleźć inspirację lub po prostu sprawdzić, jak inni zbliżają się do swoich tablic nastrojów.
Kompilacja narzędzi online
Internetowe narzędzia do projektowania stron internetowych to dziesiątki. Ich sortowanie w celu znalezienia tych, które naprawdę się wyróżniają, może zająć więcej czasu, niż można by się spodziewać, wykorzystując je.
Poniżej przedstawiamy najlepsze narzędzia do typografii, CSS, AJAX i JavaScript, doboru kolorów oraz narzędzia ułatwiające tworzenie poszczególnych elementów strony.
Ponownie, są to jedne z najlepszych dostępnych narzędzi do tego, co robią, więc nie musisz tracić czasu na testowanie dziesiątek różnych narzędzi.
Narzędzia typograficzne
Istnieje wiele narzędzi online do eksperymentowania z typografią projektów stron internetowych. Niektóre umożliwiają porównywanie różnych krojów obok siebie. Niektóre pozwalają tylko na próbkowanie jednego stylu na raz. A jeszcze inni pokazują różne zalecane stosy czcionek.
Inne przydatne narzędzia do typografii internetowej to aplikacje do konwersji wielkości pikseli do jednostek em i różnych Lorem Ipsum i innych fikcyjnych generatorów tekstu. Ogólnie rzecz biorąc, istnieją narzędzia do typografii dla niemal każdej możliwej potrzeby projektanta stron internetowych.
Typetester
Typetester umożliwia porównywanie do trzech czcionek obok siebie .
Możesz wybrać dowolną czcionkę ze swojego komputera lub użyć czcionek z menu popularnych czcionek systemowych i czcionek internetowych. Pozwala także zmienić kolor, prowadzenie, śledzenie, rozmiar i inne opcje stylu.
To wspaniałe narzędzie, gdy próbujesz zdecydować, które czcionki użyć dla różnych elementów, a nawet do kompilowania własnych stosów czcionek (ponieważ pozwala porównywać wiele czcionek obok siebie).
Zestaw typów CSS
Zestaw typów CSS pozwala wkleić dowolny tekst do modyfikacji w jednym oknie, dostosować suwaki i wybrać inne opcje formatowania, a następnie skopiować wygenerowany CSS.
Jest to szybki i łatwy sposób sformatowania dowolnego tekstu , od akapitów do nagłówka.
Opcje obejmują kolor tekstu, przewodzenie, śledzenie, przesunięcie linii bazowej, dekoracje tekstu, wyrównanie i inne.
Lepsze stosy czcionek CSS
Chociaż nie jest to narzędzie tradycyjne, per se, ten artykuł oferuje wiele alternatyw dla standardowych stosów czcionek zwykle używanych w CSS.
Oprócz oferowania wytycznych dotyczących tworzenia własnych stosów czcionek, niniejszy artykuł oferuje również szeroką gamę stosów próbek, z których można korzystać . Doskonały zasób, gdy czujesz się trochę zakłopotany opcjami typografii.
HTML-Ipsum
Większość standardowych generatorów Lorem Ipsum online daje blok tekstu i nic więcej. To wspaniale, jeśli tylko chcesz wypełnić trochę przestrzeni.
Ale HTML-Ipsum daje ci tekst, który został już oznaczony podstawowymi znacznikami HTML (akapity, nagłówki, nieuporządkowane listy itp.), Dzięki czemu możesz zobaczyć, jak wszystkie elementy współdziałają ze sobą. To ogromny czas.
PXtoEm.com
PXtoEM.com robi dokładnie to, co mówi: konwertuje czcionki wielkości pikseli na czcionki wielkości em .
Oferowane przez ciebie opcje sprawiają, że jest to naprawdę imponujące i elastyczne narzędzie.
Możesz wybrać rozmiar czcionki bazowej i uzyskać konwersje na podstawie domyślnego rozmiaru czcionki w przeglądarce (więc jeśli na przykład ustawisz procentowy rozmiar czcionki podstawowej na 62,5%, aby rozmiar 10 pikseli był równy 1em, możesz wybrać to jako twój domyślny rozmiar).
Typechart
Typechart umożliwia przeglądanie różnych czcionek internetowych i przeglądanie ich wyglądu w systemach Windows i Mac .
Czcionki można znaleźć na podstawie ich rozmiaru, bez względu na to, czy są to czcionki szeryfowe czy bezszeryfowe, czy nacisk. Zawiera tylko bezpieczne czcionki internetowe, więc oferowane opcje są ograniczone. Ale dla podstawowej typografii to wspaniałe narzędzie, które może dostarczyć wielu inspiracji.
Możesz także kopiować i wklejać CSS dla każdego stylu bez opuszczania strony.
Rzut typowy
Funkcja Flipping Typical umożliwia przeglądanie popularnych czcionek na komputerze w formacie siatki, aby ułatwić wybór właściwej czcionki dla bieżącego projektu.
Jest to doskonałe narzędzie, gdy nie chcesz używać tylko standardowych czcionek internetowych i chcesz zobaczyć więcej opcji.
Jest to szczególnie przydatne, jeśli nie chcesz przebrnąć przez kilkaset czcionek zainstalowanych na komputerze i po prostu chcesz zobaczyć te bardziej popularne.
Narzędzia CSS
CSS jest prawie tak samo ważny w projektowaniu stron internetowych jak HTML. Istnieją setki narzędzi, które czynią Twój CSS bardziej czystym, oszczędniejszym, bardziej efektywnym i generalnie lepszym, oszczędzającym czas i wysiłek potrzebny do ręcznego doskonalenia twoich arkuszy stylów.
Kompresowanie arkuszy stylów, które może przyspieszyć ładowanie witryn, zostało uproszczone za pomocą automatycznego narzędzia online. Dostępne są również narzędzia do eliminowania zduplikowanych deklaracji.
Arkusze oszustw utrzymują podstawowe elementy CSS na wyciągnięcie ręki, gdy kawa nie jest do końca rano wciągnięta i trudno jest sobie przypomnieć, w jakiej kolejności powinien się znaleźć skrócona adnotacja.
Podczas gdy większość tych narzędzi wykonuje świetną robotę przy czyszczeniu swojego CSS, upewnij się, że zawsze przechowujesz kopię zapasową oryginału i testujesz wygenerowany produkt końcowy. Czasami czyściciel lub kompresor usunie coś, co było mimo wszystko konieczne, łamiąc twoją witrynę.
CSS SuperScrub
CSS SuperScrub ma na celu znaczne zmniejszenie złożoności i rozmiaru arkuszy stylów .
Usuwa zbędne połączenia, usuwa niepotrzebną zawartość i grupuje pozostałe elementy, aby później ułatwić edycję.
Istnieje kilka opcji, w tym jedna, aby usunąć wszystkie białe spacje w arkuszu stylów lub wstawić nową linię przed otwarciem nawiasów klamrowych.
Kod Beautifier
Code Beautifier optymalizuje i czyści twoje pliki CSS .
Oferuje wiele opcji formatowania tekstu, w tym kompresowanie kolorów, sortowanie właściwości, przekształcanie wszystkich selektorów na małe litery, przekształcanie właściwości na wielkie lub małe litery i wybór poziomu kompresji, którego chcesz użyć.
Możesz skopiować i wkleić swój CSS do aplikacji lub podać adres URL do pliku CSS.
Dysk CSS
CSS Drive to podstawowy kompresor CSS .
Możesz ustawić, jak skompresowany ma być twój CSS (jasny, normalny lub bardzo kompaktowy) i jak chcesz obsłużyć komentarze (czy je usunąć).
Dostępny jest również tryb zaawansowany, który oferuje znacznie więcej opcji, w tym usuwanie spacji wokół niektórych znaków, usuwanie kart, usuwanie nowych linii i wiele innych.
Kontrola nadmiarowości CSS
Czasami podczas projektowania witryny możesz skonfigurować selektory CSS, które nie będą w końcu tworzyć ostatecznego znacznika.
Te selektory nie robią nic więcej, niż tylko sprawiają, że twoje arkusze stylów stają się bardziej masywne i trudniejsze do edycji później.
CSS Redundancy Checker przechodzi przez twój arkusz stylów i każdą ze stron HTML, aby zobaczyć, które selektory nie są używane, a następnie je usuwa .
To doskonałe narzędzie do użycia, jeśli uważasz, że możesz mieć niepotrzebne selektory w swoich arkuszach stylów.
Indeks właściwości CSS
Indeks właściwości CSS wyświetla alfabetycznie każdą właściwość CSS .
Kliknięcie dowolnej z uwzględnionych właściwości powoduje wyświetlenie definicji i informacji o wartości domyślnej, dozwolonych wartościach oraz o tym, czy dziedziczy z właściwości nadrzędnej.
Przewodnik skrótów CSS
Korzystanie ze skróconych właściwości CSS powoduje, że Twoje pliki CSS są mniejsze niż w przypadku właściwości typu "longhand" .
Ale pamiętanie o tym, w jakim porządku są wszystkie różne elementy dla wszystkich różnych właściwości, może być bólem głowy, szczególnie dla tych, których nie możesz użyć w każdym projekcie, który robisz.
Zawiera również informacje o domyślnych wartościach właściwości, więc jeśli zdecydujesz się pominąć właściwość, będziesz wiedział, jaką wartość przyjmie.
Narzędzia kolorów
Wybór odpowiednich kolorów dla projektów witryn internetowych może być jedną z najważniejszych decyzji podejmowanych w całym procesie projektowania.
Czasami przychodzimy do projektu z wcześniej zdefiniowanym schematem kolorów (np. Gdy klient już ustalił kolory marki) lub od razu wie, jakie kolory chcemy zastosować. Innym razem możemy swobodnie tworzyć własną paletę do projektu.
Jeśli tworzysz schemat kolorów od zera, generatory palet kolorów i galerie mogą być bardzo pomocne.
Jeśli masz już schemat kolorów, musisz wziąć pod uwagę inne kwestie, takie jak dostępność i kolory, z których możesz korzystać na poszczególnych częściach witryny.
Ale są też narzędzia, które pomagają w podejmowaniu tych decyzji. Poniżej znajdują się niektóre z najlepszych narzędzi do zarządzania schematami kolorów.
Filtr strony w sieci kolorowej
Biorąc pod uwagę, że gdzieś pomiędzy 7 a 10% męskiej populacji ma pewien stopień ślepoty barw (według Wikipedia ), upewniając się, że twoje witryny są nadal dostępne dla tej populacji, nie jest to zły pomysł.
To narzędzie pokazuje, jak Twoje projekty będą wyglądać dla osób z różnymi zaburzeniami kolorystycznymi. Możesz wyświetlić wyniki dla całej witryny lub wykluczyć obrazy z wyniku.
Zapewniają także łącze do bezpiecznego narzędzia wyboru kolorów odpornego na kolor.
Znajdź pasujące kolory do swojej witryny
To narzędzie do palety kolorów wyszukuje kolory, które współdziałają z dowolnym wybranym kolorem .
Możesz wybrać kolor z ich predefiniowanych opcji lub wpisać dowolną wartość koloru szesnastkowego lub RGB, aby uzyskać koordynację palet w oparciu o komplementarne, podzielone komplementarne, triadowe, tetrade, analogiczne lub monotonne schematy kolorów.
Wszystkie kolory są jednakowo podobne, co oznacza, że jest to tylko punkt wyjścia do tworzenia palet kolorów dla twoich projektów.
Generator palet kolorów
Zdjęcia to świetne miejsca do szukania inspiracji. To narzędzie może utworzyć paletę kolorów z dowolnego wybranego obrazu (wystarczy wprowadzić adres URL obrazu).
Zapewnia zarówno nudne i żywe schematy kolorów na podstawie dostarczonego obrazu.
Możliwość użycia dowolnego obrazu online sprawia, że to narzędzie jest cenne, ponieważ oszczędza czas potrzebny na pobranie obrazu, a następnie ponowne przesłanie do takiej witryny, aby wygenerować schemat kolorów (lub pobrać, a następnie otworzyć w programie graficznym, aby ręcznie utworzyć paleta kolorów).
Kuler
Galeria palet kolorów firmy Kuler firmy Adobe to jedna z lepszych galerii palet kolorów .
Możesz przeglądać lub przeszukiwać ponad 10 000 palet kolorów przesłanych przez użytkowników Kuler, a następnie pobrać lub zapisać ulubione w celu późniejszego wykorzystania.
Kuler zawiera również naprawdę potężne narzędzie do tworzenia palet, które pozwala wybierać kolory za pomocą suwaków lub w oparciu o wartości kolorów HSV, RGB, CMYK, LAB lub hex.
Ustawienie dowolnego koloru jako koloru bazowego spowoduje wówczas zmianę otaczających kolorów.
COLOURlovers
COLOURlovers to kolejna wspaniała galeria kolorów .
Możesz przeszukać ponad 800 000 schematów kolorów (w oparciu o 20 schematów na stronę i 43 200 stron schematów). Oprócz palet można również wyszukiwać poszczególne kolory i wzory na podstawie palet.
Jedną z najbardziej użytecznych funkcji COLOURlovers jest jednak narzędzie do tworzenia wzorców, które umożliwia tworzenie własnych wzorów w oparciu o wstępnie zdefiniowany schemat kolorów lub taki, który tworzy się w locie.
Wystarczy, że skontaktujesz się z właścicielem praw autorskich wzoru, jeśli chcesz go użyć do pracy komercyjnej.
100 losowych kolorów 2.0
Jeśli naprawdę nie masz pojęcia, od czego zacząć na schemacie kolorów jednego z twoich projektów, 100 losowych kolorów 2.0 może być właściwym narzędziem.
Robi dokładnie to, co mówi nazwa: przedstawia 100 losowych kolorów, w tym ich wartości szesnastkowe .
A jeśli niczego nie znajdziesz w pierwszych 100, możesz po prostu odświeżyć i otrzymać zupełnie nowy zestaw!
Indywidualne Narzędzia Elementów
Istnieje wiele generatorów, dzięki którym można szybko i łatwo tworzyć przyciski, tła, formularze i inne elementy projektu dla swoich witryn.
Niektóre z nich są po prostu efekciarskie, ale inne są bardzo pomocne, jeśli chcesz szybko utworzyć coś takiego jak przycisk Web 2.0 lub podstawowe tło w paski.
Narzędzia do tworzenia formularzy mogą być bardzo pomocne, szczególnie jeśli chcesz, aby twoi klienci mogli wykonywać niektóre z ich prac administracyjnych na swoich formularzach.
Znam przynajmniej kilku projektantów, którzy korzystają z tych narzędzi, aby nie musieli tworzyć niestandardowego, uproszczonego interfejsu dostępu do bazy danych formularzy lub edycji formularzy dla swoich klientów. Są świetnym narzędziem do oszczędzania czasu, zwłaszcza do tworzenia bardziej skomplikowanych form.
Wufoo
Wufoo to program do tworzenia formularzy HTML, który oferuje ponad 80 szablonów formularzy i schematów kolorów, a jednocześnie umożliwia pełną kontrolę nad tworzeniem niestandardowych formularzy dla klientów.
Szablony umożliwiają szybsze i łatwiejsze tworzenie standardowych formularzy internetowych (takich jak strony rejestracyjne lub formularze kontaktowe).
Przesłane formularze są automatycznie gromadzone w bazie danych, co ułatwia klientom drukowanie, wysyłanie pojedynczych wpisów, filtrowanie, wyszukiwanie i wykonywanie innych zaawansowanych funkcji bez konieczności tworzenia niestandardowego interfejsu.
Możesz nawet używać Wufoo do tworzenia formularzy zamówień online i integrować się z Authorize.net, PayPal lub Google Checkout.
BgPatterns
BgPatterns pozwala tworzyć wzory kafli przy użyciu szerokiej gamy różnych powtarzalnych elementów.
Możesz wybrać kolor tła, teksturę płótna i kąt wzoru. Możesz zastosować utworzone tła do strony BgPatterns, aby wyświetlić podgląd, a następnie pobrać obraz po sfinalizowaniu.
Możesz także przeglądać wzory utworzone przez innych. Jest to najszybszy i najłatwiejszy sposób tworzenia prostych, kafelkowych tłach.
Generator pasków 2.0
Tworzenie powtarzających się pasków na stronie internetowej jest czasochłonne.
Oczywiście, możesz tworzyć szablony dla zwykłych pasków, których możesz użyć, ale co zrobić, jeśli chcesz mieć pasek z przypięciem dla jednego projektu, szeroki pasek dla drugiego i jeden pod dziwnym kątem dla drugiego? Wkrótce te szablony po prostu nie wydają się już tego robić.
Generator pasków 2.0 oferuje paski pod różnymi kątami , w dowolnej dowolnej szerokości, z cieniami i gradientami lub bez nich , oraz przy użyciu dowolnych kolorów heksadecymalnych.
Obejmują one również galerię pasków, w której można zobaczyć, co inni zbudowali.
Tartan Maker
Jeśli tworzenie tła w paski jest czasochłonne, tworzenie tła w kratkę jest ogromnym bólem głowy.
W tym miejscu pojawia się Tartan Maker. Wybierz rozmiar przędzy, kolory dla wzoru i kąta, i automatycznie ją tworzy.
Możesz wyświetlić podgląd swoich projektów na pełnym ekranie, a następnie pobrać plik.
Pixelknete's Background Dotter
Ten generator tła tworzy nowoczesne tło z kropkami z coraz mniejszymi kropkami, które przesuwają się w dół strony.
Możesz wybrać do dwóch kolorów dotacji i dwóch kolorów dla tła gradientowego (lub tylko jednego koloru dla jednolitego tła).
Możesz również określić wysokość wzorca (domyślnie jest to 700 pikseli). Utworzone tło powtarza się na osi poziomej.
Jako generator guzików
Jeśli zignorujesz źle przetłumaczony tekst na tej stronie, zobaczysz, że jest to jeden z najgładszych dostępnych generatorów przycisków . Dodaj do przycisków tekst, różne gradienty, paski, obrazy i inne elementy.
Możesz wybrać kolory przycisków i obramowań, ogólny rozmiar (za pomocą suwaków lub pól tekstowych) i grubość krawędzi oraz sposób zaokrąglenia przycisku.
Jeśli dodasz paski, dostaniesz wiele opcji, w tym kolor, przezroczystość, grubość, przestrzeń między paskami i kątem.
Jest to zdecydowanie najbardziej w pełni funkcjonalny generator przycisków.
Button Maker
Ten generator przycisków umożliwia łatwe tworzenie dwukolorowych przycisków o wymiarach 80 × 15 pikseli .
Wybierz kolory przycisków, kolory obramowania, gdzie powinien być podział między polami i wpisz tekst dla każdej strony, i to wszystko!
Jest to jedno z tych narzędzi, które nie są załadowane funkcjami, ale robią to, co zaprojektowano, aby działały perfekcyjnie i bezproblemowo.
Narzędzia AJAX i JavaScript
Wszyscy wiemy, że Ajax może dodać mnóstwo funkcji do Twojej witryny. Niezależnie od tego, czy chcesz dodać prostą galerię obrazów, interaktywny formularz kontaktowy, czy utworzyć całą aplikację internetową , Ajax jest do pomocy.
Ale zaczynanie od zera może być zniechęcające, szczególnie jeśli jesteś stosunkowo nowy w Ajaksie. I nawet jeśli uważasz się za profesjonalistę, może to być czasochłonne, aby zacząć od pustej planszy dla każdego z twoich projektów.
Istnieje wiele narzędzi do przyspieszenia rozwoju Ajax. Od kolekcji skryptów po frameworki do konkretnych generatorów elementów, najprawdopodobniej coś dostępnego w poniższych narzędziach sprawi, że będziesz bardziej wydajnym programistą.
Ajaxload
Ajaxload jest generatorem do tworzenia ikon modułu ładującego ajax. Istnieje mnóstwo różnych ikon do wyboru.
Wszystko, co musisz zrobić, to ustawić kolory pierwszego planu i tła (lub wybrać przezroczyste tło), a następnie po prostu pobrać wygenerowany skrypt.
Szybko i łatwo, ale oszczędza ci to kilka minut (lub dłużej) kodowania!
Mini AJAX
Mini Ajax to galeria pobieranych skryptów Ajax i DHTML .
Obejmuje wszystko od okien modalnych po pokazy slajdów do bardziej zaawansowanych skryptów (takich jak kalendarze i całe narzędzia do zarządzania projektami).
To świetny punkt wyjścia do odnajdywania poszczególnych elementów Ajax, a nawet po prostu do inspiracji.
Dla wielu skryptów są dostępne dema i wszystkie z nich można pobrać z ich oryginalnych źródeł.
MooTools
MooTools to obiektowa struktura JavaScript . Z pewnością nie jest przeznaczony dla początkujących, ale umożliwia pisanie elastycznych, wydajnych aplikacji Ajax zgodnych z przeglądarkami.
Jest również zgodny ze standardami i niewiarygodnie dobrze udokumentowany.
Oprócz core buildera dostępnych jest również mnóstwo wtyczek. MooTools może być używany do tworzenia wszystkiego, od prostych galerii obrazów po kompletne interfejsy użytkownika.
jQuery
jQuery to biblioteka JavaScript, która upraszcza wiele funkcji JavaScript .
Jedną z najlepszych części tego konkretnego narzędzia jest liczba wtyczek już dostępnych dla jQuery.
Dostępne są gotowe wtyczki do wszystkiego, od prostych animacji, formularzy i widżetów po zaawansowane elementy interfejsu użytkownika.
Prawdopodobnie istnieje już wtyczka stworzona z myślą o prawie wszystkim, co możesz chcieć zrobić z JavaScriptem lub Ajaxem, lub co najmniej jednym z nich, który posłuży jako podstawa do stworzenia własnego.
Script.aculo.us
Script.aculo.us to biblioteka interfejsu użytkownika JavaScript, która zawiera strukturę animacji, kontrolki Ajax, narzędzia DOM i wiele innych .
Jest używany przez Apple, CNN, Basecamp i Ruby on Rails. Jest zbudowany na Prototype Framework.
W wiki Script.aculo.us znajduje się obszerna dokumentacja, dzięki której łatwo jest zacząć.
Internetowe narzędzie do kompresji JavaScript
Kompresowanie plików JavaScript powoduje, że ładują się szybciej, zużywają mniej przepustowości i zajmują mniej miejsca na serwerze. To narzędzie ułatwia kompresję.
Po prostu skopiuj i wklej pliki JS (lub prześlij je) do tego narzędzia, a następnie wybierz, czy chcesz kompresować za pomocą Minify lub Packer.
Automatycznie wypuszcza czystszy, bardziej wydajny kod. Upewnij się, że dokładnie przetestowałeś wyniki i zawsze zachowaj kopię zapasową oryginalnego pliku.
JavaScript Beautifier
Jeśli twój JavaScript jest trochę bardziej zawtydzany niż chcesz (lub prawie niemożliwy do odczytania, ponieważ jest źle sformatowany), uruchom go przez ten upiększacz, aby uzyskać schludne, czyste i konsekwentnie sformatowane skrypty, które później będą łatwiejsze do odczytania i edycji .
Zastosowane ustawienia są minimalne, ale możesz wybrać, ile spacji użyć dla wcięć, czy wykryć pakery i czy zachować podziały linii.
Ponownie, upewnij się, że przetestowałeś ostatni kod i trzymasz kopię zapasową na wypadek ewentualnych problemów w nowo-upiększonym kodzie.
BrowserShots
Niestety różne przeglądarki renderują witryny na nieco inny sposób. Może to być ogromny ból głowy, zwłaszcza jeśli Twoi klienci używają jednej przeglądarki i używasz zupełnie innej.
Jeśli widzą rzeczy, które nie pojawiają się na końcu (lub odwrotnie), może to powodować problemy po obu stronach.
Zawsze możesz zainstalować wiele przeglądarek na komputerze, ale a) to marnowanie miejsca na dysku i b) co z przeglądarkami, które nie są dostępne dla twojego systemu operacyjnego? To tam gdzie BrowserShots wchodzi.
Możesz wybierać spośród praktycznie każdej dużej przeglądarki, w tym ukrytych przeglądarek takich jak Minefield i Epiphany.
BrowserShots wyświetla zrzuty ekranu tylko przeglądarek, które wybrałeś do przeglądania , więc możesz wybrać dowolną liczbę lub dowolną liczbę.
Pamiętaj tylko, że im więcej przeglądarek wybierzesz do testowania, tym więcej czasu zajmie. Sposób, w jaki jest skonfigurowany BrowserShots, można jednak dodać do zakładek strony i wrócić później, aby zobaczyć wyniki.
Firebug
Żadna lista narzędzi projektanta stron internetowych nie byłaby kompletna bez wspominania o wtyczce Firebug Firefox .
Często uważany za najbardziej wartościowe narzędzie w arsenale projektanta , Firebug sprawia, że debugowanie i edytowanie kodu (JavaScript, CSS lub HTML) jest nieskończenie łatwiejsze.
Możesz dostosować swój CSS bezpośrednio w swojej przeglądarce. Wizualizuj sposób wyrównania skrzynek CSS. Edytuj dowolny element na swojej stronie bezpośrednio w przeglądarce.
Debuguj JavaScript i znajduj błędy szybciej. A to tylko drapie powierzchnię tego, co potrafi Firebug.
To naprawdę musi być narzędzie dla każdego projektanta tam. Kiedy już go użyjesz, będziesz się zastanawiać, jak go zaprojektowałeś bez niego.
Opracowany wyłącznie dla WDD przez Cameron Chapman.
Z których narzędzi korzystasz najczęściej? Z jakich innych narzędzi korzystasz, których mogliśmy przegapić?