Po wielu dniach intensywnych prac wreszcie jest – Drawter! Od teraz budowanie stron internetowych jest szalenie łatwe!
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.
