Drawter – FAQ&Help

Czym jest Drawter?

Drawter to narzędzie napisane w JavaScript, oparte o bilbiotekę jQuery. Umożliwia ono rysowanie kodu stron internetowych. Jest uruchamiane w przeglądarce internetowej, co czyni go nieprawdopodobnie użytecznym. W programie każdy tag strony przedstawiony jest w postaci warstwy, którą naszkicowaliśmy.

Obecnie Drawter występuje w wersji Pro beta1. Pro oznacza, że jest przeznaczony dla typowego webmastera, który zna HTML i CSS, i któremu Drawter ma znacznie ułatwić pracę. Nie jest to, na razie, narzędzie dla typowych laików. Warto jednak podkreślić, że takowe powstaje i nosić będzie nazwę Amateur. Jego premiera wkrótce.

Jak działa Drawter?

Drawter obsługuje dwa tryby – tryb rysowania (Draw mode) i tryb edycji (Edit mode). W trybie Draw mode możemy tylko rysować nowe warstwy w specjalnie przeznaczonym do tego polu (którego wielkość możemy zmienić tylko przed rozpoczęciem pracy!), natomiast w Edit mode dowolnie je edytować – przesuwać, zmnieniać wielkość, identyfikator, klasę. Ponadto możemy w nim dodawać inne atrybuty tagów (Node attributes) i właściwości stylów (Node styles). Co więcej, w Node details, możemy ustawić treść (Content) warstwy czy też zmienić typ tagu, jaki warstwa reprezentuje (Edit tagname). I tak, rysując element div, i dodając mu treść Jakaś treść otrzymamy w kodzie

<div>Jakaś treść</div>

Rysowanie jest banalnie proste – w polu rysowania przytrzymujemy lewy klawisz myszy i zmieniając jej położenie otrzymujemy wybrane kształty. Tag, jaki ma reprezentować dana warstwa, wskazujemy w menu bocznym, a konkretnie w rozwijanym polu w Drawing options. Drzewo rysowanej strony jest na bieżąco generowane w menu bocznym pod belką Markup tree.

Warto też pamiętać, że kiedy narysujemy jakąś warstwę wewnątrz innej, skrypt ropoznaje, że narysowana warstwa jest dzieckiem tej, w której się mieści. Znajduje to reprezentacje w wygenerowanym kodzie.

Dodajmy, że jeśli skopiujemy jakąś warstwę w Markup tree, nowa nie może być dzieckiem ani rodzicem tej, z której ją skopiowaliśmy.

Czy strona Drawter.com zmieni swoją postać?

Tak, trwają intensywne prace nad lekką i użyteczną stroną oficjalną projektu. Znajdą się tam newsy, faq&help, przykładowe screencasty oraz oczywiście odnośnik do narzędzia. Wszystko w kilku wersjach językowych.

Kiedy wersja Pro wyjdzie z fazy beta?

Jak najszybciej – na pewno do końca roku, choć prawie pewne jest, że będzie to znacznie wcześniej.

Pasek menu – Code

Menu to dzieli się na dwie opcje – Generate code i Show code. Generate code, jak można wywnioskować, generuje kod HTML i CSS na podstawie narysowanych warstw w polu rysowania. Po wybraniu tej opcji pojawia się specjalne okienko, skąd możemy skopiować interesujący nas kod (HTML bądź CSS).

Pasek menu – View

Tzw. „widok” – możemy tutaj schować bądź wyświetlić konkretne belki menu bocznego.

Pasek menu – Preferences

Dzieli się on na dwie opcje – Auto float i Auto sizes. Domyślnie włączona jest ta pierwsza.

Auto float, na podstawie naszego rysunku kodu, rozpoznaje, które warstwy sąsiadują ze sobą, po czym w wygenerowanym kodzie nadaje im pływanie (float: left; width: Xpx).

Auto sizes natomiast kopiuje wartości stylów position: absolute, width, height, left, top z narysowanych warstw i dodaje je do wygenerowanego kodu CSS. Dzięki temu, spoglądając na stronę w przeglądarce, zachowany jest identyczny układ, jak na naszym rysunku w Drawterze. Jest to użyteczna opcja, dzięki której zamiast stron, mogą powstawać także wireframe’y!

Wymagania

Najnowsza przeglądarka Firefox, Opera, IE lub Safari. 256MB pamięci RAM i 800Mhz taktowania procesora.

Drawter – to nie edytor WYSIWYG, to nowa kategoria edytorów kodu HTML!

Drawter to nowy typ edytora HTML – nie wpisujemy w nim ręcznie tagów, a zastępujemy tę czynność rysowaniem. Istotny jest też fakt, że robimy to za pomocą przeglądarki, a więc niezależnie od systemu operacyjnego!

Poza tym nie należy go kojarzyć z typowym edytorem WYSIWYG – rysowane warstwy są tylko reprezentacją tagów, a nie ich prawdziwym obrazem. Idąc tym tropem, rysując tabelkę, nie wyświetla się nam typowa tabelka, tylko prezentująca ją (<table>) warstwa. Fakt ten sprawia, że mamy pełną kontrolę nad tym, co rysujemy i jak to będzie wyświetlane w przeglądarce (możemy przecież dodać dowolne style CSS!). Kod przedstawiony w postaci warstw jest dzięki temu niezwykle czytelny!

Ważne jest również to, że narzędzie nie generuje, jak tradycyjne programy WYSIWYG, żadnych niepoprawnych konstrukcji i uciążliwych potworków. Otrzymujemy kod, który jest 100% odbiciem tego, co narysowaliśmy!