Drawter.com

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.

Komentarze

1

Pomysl godny szacunu. Wiec co tu duzo pisac – szacun :]!

Watcher
2

Ferrante: pomysł naprawdę fajny, ale chyba się czegoś przyczepię :) Gdy malujesz jednego div’a na drugim to później ten div jest praktycznie niewidoczny. Border jest zbyt cienki, a kolor wtapia się w tło i przez to ciężko zobaczyć tego dodatkowego div’a…

Poza tym troszkę dziwna sprawa z tym generowaniem kodu. Ja jak głupi klikałem na “Generate”, a dopiero po screencascie połapałem się, że najpierw musze zobaczyć kod (którego jeszcze nie ma), a potem go generować ;-)

3

Damianie składam pokłony :) Pikne… Tak jak randmen uważam, że div-y powinien zmieniać kolor gdy znajduje się w obrębie innego np. na inny odcień zieleni.

szalony_ivan
4

Świetny pomysł, narzędzie niewątpliwie się przyda.
Co do wykonania – może i jest trochę niedociągnięć, ale jestem pod wrażeniem, co można wycisnąć ze swojej wiedzy i np. tego jQuery.
Krótko? Powodzenia!

5

niezłe! :) powodzenia w rozwijaniu tego narzędzia :)

6

Dzieki za pierwsze opinie i zachecam jeszcze raz do uzywania narzedzia.

Co do uwag o tle divow – macie racje, dlatego zmienie chyba border warstwy n nieco ciemniejszy.

Co do Generate code – tutaj natomiast – bo widze, ze wielu to myli – zrobie autmatyczne pokazywanie belki z kodem.

Pozdrawiam!

7

Witaj.

Brawa za pomysł, a także za wykonanie. Działa szybko, ładnie i sprawnie, jest w miarę intuicyjne, oprócz tego, co opisał radmen. Czekam na dalszy rozwój projektu, na pewno się przyda :).

8

Swietna sprawa!
Uwagi:
– zdecydowanie musi byc jakis inny sposob wyroznienia poszczegolnych divow, moze rozne odcienie zielonego? No i obramowanie tychze – bardziej widoczne,
– skroty klawiszowe: Draw Mode/Edit Mode,
– dodatkowa funkcja, ktora ciezko opisac:P -> obrazek jednoznacznie wyjasni: http://img507.imageshack.us/my.php?image=drkv9.png ,

Nie moge sie doczekac wersji finalnej, aby polecic narzedzie paru osobom. Wreszcie laik bedzie mogl stworzyc strone!

setkos
9

Witam!

Bardzo ciekawe narzędzie – na pewno pozwoli szybko rysować proste układy.
Jestem również pod wrażeniem szybkości działania – nic nie przycina ;)

Uwagi i sugestie:
– możliwość nadania każdemu elementowi własnego koloru
– przenoszenie prowadnic + “przyciąganie do linii prowadnic”
– prowadnice powinny być grubsze – teraz kliknięcie w taką to spory wyczyn ;)
– inny sposób oznaczania opcji jako aktywnej (dla każdego użytkownika komputera “wyszarzone”=”nieaktywne” – może jakaś “fajka”?)
– w Operze 9.24 (Linux) nie mogę powiększyć pola rysowniczego
– możliwość zdefiniowania szerokości pola rysowniczego (podania wymiarów, a nie tylko rozciągania)
– dodanie etykiet na osi (np.: co 20px podanie wartości)
– możliwość importu grafiki jako tła pola rysowniczego – to dopiero będzie zabawa, jak zaczniemy obrysowywać uprzednio przygotowany przez grafika projekt :-)
– “Apply” przy atrybutach o stylach powinno byś zawsze szare i podświetlać się w momencie wypełnienia wartości – początkowo tego przycisku w ogóle nie zauważałem ;)
– miłoby było, gdyby parametry nadane przez aplikację były modyfikowalne (żeby wartości pojawiały się po wybraniu odpowiedniego atrybutu z listy)
– parametry w przypisaną wartością (czy to przez użytkownika, czy aplikację) powinny być jakoś wyróżnione na liście (a gdyby były wypisane pod dropdownem z możliwością szybkiej edycji to już w ogóle byłoby miodnie :-) )
– i może jeszcze gdyby po najechaniu na narysowany blok podświetlał się odpowiedni element w drzewie i odwrotnie (jak w Firebugu)…

To takie moje sugestie “na szybko”

Pozdrawiam i życzę sukcesów w rozwijaniu Drawtera :-)

MiB
10

setkos, MiB – swietne uwagi, niektore mialem w planach, niektore nie, aczkolwiek wiekszosc z nich zostanie wypuszczona w beta1, byc moze juz dzis wieczorem :-)

Co do poszerzania Draw Area – mozna to zrobic tylko przed rysowaniem :-)

11

Genialne. Po prostu, brak mi słów. Gratuluję pomysłu i świetnego wykonania. Bardzo przydatna rzecz :).
Pozdrawiam.

armz
12

Witam

W koncu się dowiedziałem tego, nad czym pracowałeś przed kilkadziesąt (?) tygodni. Naprawdę jestem pełen podziwu dla tego projektu, który niewątpliwie pomoże wielu początkującym webmasterom.

Wiedząc o tym, że to wersja testowa, zauważyłem pewne rzeczy, które wpływają na pewną funkcjonalność tego projektu.

1. pod firefox 2.0.11 nie działa opcja generowania kodu, tzn probuję nacisnąć, ale nic się nie dzieje.
2. wybierając z menu view np. page details, zostaje schowana zawartość w box, czyli reaguje prawidłowo, jednakże po tej akcji czcionka staje się na tyle niewidoczna, że można sądzić że dana opcja nie będzie dalej działać. Tutaj proponuję coś takiego jak zaznaczenie np. popularny ptaszek (jest obecny, gdy rozwinięta jest zawartość “page details”
3. podobnie jak poprzednio w box brakuje mi trójkąta w przypadku maksymalizacji (rozwinięcia) lub minimalizacji (zwinięcia) zawartości. ikonka jaka tam jest zastosowana (czyli x) sugeruje ze to służy do zamknięcia tej opcji.

A tak to poszczególne uwagi zostały już wymienione. Rozumiem, że te moje zastrzeżenia to kwestia stylistyki, niemniej jednak ma to spory wpływ na użyteczność projektu.

Jeszcze raz szczere gratulacje i powodzenia w rozwijaniu tego projektu :)

pozdrawiam, Kuba

13

Nie miesci sie w rozdzielczosci 1024×768 – co prawda w sposob nie przeszkadzajacy w uzytkowaniu, ale jednak :)

Wilk
14

Ja jednak proponuję budowanie stron internetowych pozostawić profesjonalistom (którzy nie boją się dłubania w css-ach i html-u) – bo i tak w większości przypadków na końcu z takich narzędzi wychodzi to co z frontpage-a czyli WYSIWTF.

sceptyk
15

Ja jednak proponuje przyjrzec sie narzedziu i go uzyc w konktretnym zastosowaniu. Ogolnikowe opinie bo i tak w większości przypadków na końcu z takich narzędzi wychodzi to co z frontpage-a czyli WYSIWTF. sa wyrazem totalnej ignorancji :-).

16

ostrrrro ;) jeszcze wygryziecie z rynku wielkie korporacje webdesignerskie :P

17

Pomysł godny uwagi. Zwłaszcza gdyby go połączyć z systemami które pozwalają wdrażać całe strony internetowe w oparciu o szablon w XHTML (patrz: http://www.pluscms.net) i zestaw dodatkowych tagów, które generują całą konsole do zarządzania treścią wraz z pełną kontrolą dostępu, etc. Wystarczy wtedy w waszym narzędziu wygenerować template (używając standardowych XHTML tagów oraz tagów np. z systemu +cms) który po wprowadzeniu do systemu pozwala na edycję zarówno treści jak i formy prezentacji.

webmaster
18

Gratulacje! Jestem zaszokowany :D

19

I nie jestem ignorantem, ale mi po prostu brak słów :D

20

Jestem pod wrażeniem. Pytanie, czy można wykorzystać ten silnik do projektowani szablonów np do Joomla?
Zrazu uprzedzam, nie jestem fachowcem, choć sobie radzę.

Pozdrawiam
Waldek

21

Drawer rysuje tylko kod HTML. Jak wykorzystasz ten kod to juz Twoja sprawa :). Pozdrawiam

22

Niestety Joomla nie ma takiego silnika jak +CMS wiec nic z takim HTMLem nie zrobisz. +CMS tez jest darmowy wiec możesz pod tym systemem połączyć oba projekty.

praktyk
23

[…] Drawter jest godnym podziwu narzędziem dla początkujących webmasterów, stworzonym przez Damiana Wielgosika, dzięki któremu możemy “wyklikać” własny kod html szablonu. Autor przygotował screencast prezentujący możliwości Drawtera. Więcej informacji znajdziecie pod tym linkiem. […]

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>