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!