To jednak tylko początek – twórcy zapowiadają ambitne plany, a to czy się powiodą zależy tylko od Was. Otóż udostępniono specjalny formularz, w którym możecie nadsyłać swoje propozycje ciekawych narzędzi. Zostaną one rozpatrzone i – w razie akceptacji – umieszczone obok takich „sław” jak Dojo czy Selenium.

A co u Drawtera? Nie ukrywam, że zarzuciłem na jakiś czas development z powodu braku czasu, jednak tego typu wydarzenia dają mi motywację, by skończyć nową wersję, bo jest tego warta.

Aktualnie zajmujemy się ergonomią samego narzędzia. Powiem szczerze, że w zespole trwa prawdziwa burza mózgów. Wiele pomysłowych koncepcji musieliśmy niestety odrzucić, jak np. tę:

„młodzieżowa” koncepcja jednego z fanów ;-)

Tymczasem, jak to mam w zwyczaju, będę co jakiś czas przedstawiał nowości i inne smaczki na temat nowego Drawtera. Na pierwszy rzut idzie nowe logo:

Trwają wzmożone prace nad wersją Ameteur. Myślę, że będzie to ważne wydarzenie w dziedzinie social networkingu, a także blogowania i wyrażania siebie w Internecie. Więcej informacji będę zdradzał co jakiś czas. Warto natomiast dodać, że Drawter w tej wersji przechodzi prawdopodobnie na Moo Tools – szybsze, lepsze i wydajniejsze, a także posiadające kilka pluginów, których jQuery nie ma (lub nie zdołałem ich odszukać), a które niewątpliwie się przydadzą. Ponadto, do ekipy doszedł Adam Babik – Dreamer – który wspomoże Drawtera od strony graficznej. Obecnie trwają bardzo, ale to bardzo intensywne prace. Efekt części z nich ujrzycie już wkrótce w postaci bloga i prostej strony głównej.

Warto też wspomnieć o reakcji mediów na Drawtera – projekt niedawno znalazł się w Best of January w Smashing Magazine, a polska prasa, w postaci Internet Makera dostrzegła Drawtera zdaje się, że po raz pierwszy:

Magazyn Internet Maker

Lista zmian:

- dodane skróty klawiszowe:

• ctrl+1 – Draw Mode
• ctrl+2 – Edit Mode

- dodana możliwość ustawienia tła dla pola rysowniczego (obrazek z adresu http, kolor w hexach)
- dodana możliwość ustawienia właściwości background-repeat dla pola rysowniczego
- dodana możliwość ustawienia tła dla dowolnej warstwy (obrazek z adresu http, kolor w hexach)
- dodana możliwość ustawienia właściwości background-repeat dla dowolnej warstwy
- dodana możliwość ustawienia właściwości color dla dowolnej warstwy
- dodana możliwość ustawienia właściwości font-size dla dowolnej warstwy
- dodana legenda dla linijki pomocniczej (odległości mierzone w pikselach)
- dodana możliwość przesuwania pomocniczych prowadnic
- dodane automatyczne dokowanie przesuwanych warstw do istniejących prowadnic
- dodana możliwość przesuwania dowolnej belki toolbara pomocniczego
- dodane nowe języki dla strony (Page language)
- zamiana nowych linii na widoczne przerwy podczas wpisywania treści warstwy (Content)
- kosmetyczne zmiany w interfejsie (m.in. inna prezentacja linijki pomocniczej vide Photoshop)
- przyspieszenie działania narzędzia o ponad 500%

Więcej o Drawter Beta 2 w czwartek (w tym nowy screencast). Zapraszam do testowania i zgłaszania błedów oraz uwag.

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!

Aby wprowadzić Was do świata Drawtera, przygotowałem mały, nieoficjalny screencast. Nie pokazuje on wszystkiego, choć zapewne w miarę postępu czasu nauczycie się innych opcji. Oficjalny film powstanie już wkrótce i będzie okraszony głosem lektora.

Przeczytaj również powstające FAQ&Help

Pomysł

Idea Drawtera powstała po wielogodzinnych rozmowach dwójki webmasterów – Damiana ferrante Wielgosika i Kuby Dez Uczciwka. Stwierdziliśmy, że brakuje na rynku narzędzia, które w ogólnodostępny sposób oferowałoby szybkie i niezawodne rysowanie szkieletu stron internetowych. Pomysł zrodził się z irytacji, którą sprawiało żmudne wpisywanie tagów naszych stron internetowych. Wcieliłem się więc w programistę projektu, a Kuba w grafika. Po kilkumiesięcznych pracach, przerywanych często przez zdarzenia losowe, możemy pochwalić się spełnieniem naszych snów o edytorze idealnym – Drawterem w wersji beta, choć bardzo sprawnie działającej, trzeba dodać.

Co to Drawter?

Drawter (www.drawter.com) to narzędzie uruchamiane z poziomu przeglądarki internetowej, w całości oparte o JavaScript i bibliotekę jQuery. Zamiast wpisywać kod HTML, np. taki:

<div></div>

po prostu rysujemy w nim specjalną warstwę, która odwzorowuje element blokowy div. Po narysowaniu całej strony, otrzymujemy w szybki sposób jej kompleksowy kod HTML. Dzięki temu, po 5 minutach możliwe jest otrzymanie kodu złożonych witryn internetowych!

Drawter umożliwia również dodawanie dla narysowanych warstw stylów, identyfikatorów, klas i innych atrybutów.

Minimalne wymagania

Jako że Drawter korzysta z pełni możliwości przeglądarki internetowej, należy udostępnić jej jak najwięcej zasobów. I tak, absolutnym minimum jest 256MB pamięci RAM i 800Mhz taktowania procesora.

Obsługiwane przeglądarki

Drawter działa na Firefox 2.0.11, Operze 9.24, IE 7, i Safari 3.

Inne

Drawter to, może się wydawać na początku, skomplikowane narzędzie o dużych możliwościach – można w nim tworzyć szablony koncepcyjne dla grafików, jak i pełnoprawne strony internetowe. Wkrótce powstanie oficjalny blog projektu, zmieni się strona główna. Potrzebny jest też samouczek i dokumentacja wszystkich opcji. To już wkrótce, wiedzcie bowiem, że jako pierwsi słyszycie o tym projekcie, jeszcze przed jego całkowitym wdrożeniem. Proszę więc o konstruktywne opinie, zgłaszanie błędów (najlepiej na maila podanego obok!) i pochwalenie się swoimi narysowanymi stronami ;-)

Auto float

Warto powiedzieć o dostępnych opcjach generowania kodu. Jedną z nich jest Auto float (Preferences->Auto float). Uruchomiona (czyli aktywna, pokolorowana na czarno) sprawia, że podczas generowania kodu strony, skrypt znajduje elementy, które mieszczą się obok siebie i nadaje im pływanie – czyli float.

Auto sizes

Drugą jest Auto sizes (Preferences->Auto sizes). Ta z kolei pomaga nam odwzorować identyczny układ warstw, jak na rysunku, dzięki stylom position: absolute; left, top, width i height.

Przyszłość

Obecna wersja to Drawter.pro, co oznacza, że do jego obsługi wymagana jest znajomość HTML’a. Na szczęście dla użytkowników, którzy nie mają pojęcia o tej technologii, przygotowywana jest wersja Amateur. Umożliwi ona nawet największemu laikowi stworzenie strony internetowej, jaką sobie narysował i zapisanie jej na serwerze… W drodze jest już natomiast polska wersja Drawtera.pro.

Cały czas szlifuje też kod – proszę więc być w tej kwestii wyrozumiałym – jeśli chodzi o HTML, jak i CSS. Nie zdziwcie się, kiedy ujrzycie różne mało profesjonalne konstrukcje.

Podsumowując, w Drawterze tkwi duża gama możliwości, którą postaram się wykorzystać w dalszych wersjach programu.

Update: Już wkrótce podam nazwę projektu. Obecnie pozostaje skończyć pewne 3 opcje i zoptymalizować kod. Premiera jutro bądź w środę. Więcej informacji wkrótce.

Na początek 2 screeny, gdzie nie gdzie celowo zmieniłem nazwę projektu, którą podam w kolejnych postach na jego temat.

W miarę upływu czasu będę aktualizował tę notkę, podając następne informacje.