Metodyka Tworzenia Stron WWW

Paweł Hikiert BOK

Rozdział VI - Programy do kreowania stron

1. 1-4-All HTML Editor, ver. 2.02a by Marcus Monnig, www.mmsoftware.com
    1-4-All jest edytorem HTML przeznaczonym dla systemów Windows 95 i Windows NT. Każdy nowo otwarty dokument jest reprezentowany przez zakładkę, przez co dostęp do nich jest bardzo wygodny. Zestaw rozpoznawanych elementów trudno jest zakwalifikować, lecz z pewnością znajdują się w nim elementy standardu HTML 3.2 wraz z rozszerzeniami N 3 i IE 3, także część elementów z HTML 4.0. Pomoc dołączona do programu nie opisuje żadnych metod tworzenia stron WWW, jednak możliwe jest skonfigurowanie zewnętrznych plików pomocy, np. dostarczonego wraz z edytorem HTML 3.2 Reference Guide. Bardzo pomocnicza jest własność CodeQuick - po otwarciu nowego znacznika pojawia się lista nazw elementów które można wpisać bądź wybrać, a następnie lista nazw atrybutów i (jeśli to możliwe) wartości tych atrybutów. Rozpoznawane elementy są kolorowane, co pozwala łatwiej orientować się w dokumencie, a przy tym jest to kolorowanie bardzo szybkie, właściwie natychmiastowe. W programie jest zainstalowany kontroler pisowni, akceptujący słowniki *.dct. Wbudowany jest także Publishing Wizard, z pomocą którego łatwo można umieścić stworzone pliki w sieci, wraz z potrzebnymi obrazkami czy plikami muzycznymi. Przy transferze plików tekstowych można wybrać typ znaków nowego wiersza: UNIX bądź ANSI. Edytor ma wbudowaną własną przeglądarkę, jednak można ustawić także dwie przeglądarki zewnętrzne, co jest idealne ze względu na trwającą obecnie wojnę Netscape z Microsoftem. Podczas wyboru obrazków do wstawienia możliwe jest ich natychmiastowe podglądanie bądź oglądanie w pełnych wymiarach, co znakomicie ułatwia wybór. Podczas wstawiania obrazków do dokumentu możliwe jest także automatyczne wstawianie atrybutów określających i wysokość i szerokość, co przyspiesza ładowanie strony. Wiele elementów można edytować też korzystając z okien dialogowych, z pomocą których można określić np. kolory i wielkości czcionek dokumentu, wybrać obrazek służący za tło itd., widząc od razu efekty. 1-4-All umożliwia również tworzenie projektów, co daje szybki dostęp do wszystkich dokumentów nad którymi pracujemy. Tworząc wiele dokumentów jednego typu można jeden z nich zachować jako szablon i potem z niego korzystać. Wraz z programem możemy uruchomić do czterech pomocniczych aplikacji, np. zażyczyć sobie od razu uruchomienia zewnętrznych przeglądarek. Program posiada osiem skryptów w języku JavaScript gotowych do natychmiastowego użycia. Większość elementów można wstawiać wybierając ich nazwy z rozwijanego menu, lub klikając odpowiednie ikonki.
Zobacz obrazek (26kB).

2. Agile HTML Editor, ver. 1.10.527 by Compware, www.compware.demon.co.uk
    Agile jest bardzo rozbudowanym edytorem HTML, świadczyć o tym może chociażby zestaw obsługiwanych zestawów elementów - od HTML 2.0, 3.2 i 4.0, poprzez rozszerzenia IE 2, IE 3 i IE 4 do N 2, N 3 i N 4. Można zażądać, by honorowano tylko jeden zestaw, bądź wszystkie z nich. Mocną stroną Agile jest także możliwość edytowania atrybutów wszystkich elementów poprzez rozwijane menu, pojawiające się po kliknięciu na elemencie prawym przyciskiem myszki. Nowy dokument może zostać utworzony na podstawie zdefiniowanego przez użytkownika szablonu, co ułatwia tworzenie wielu podobnych dokumentów. Oczywiście cały tekst źródłowy jest pokolorowany, w celu łatwiejszej orientacji. Wadą jest natomiast czas, jaki edytor na to potrzebuje. Kolorowanie dokumentu o rozmiarze ok. 100kB zajmuje ponad minutę. Wstawiane do dokumentu obrazki mogą mieć od razu poprawnie ustawione atrybuty wysokości i szerokości. Agile nie dysponuje wewnętrzną przeglądarką - podgląd odbywa się w domyślnej przeglądarce systemu. Większości popularnych elementów można wybrać z rozwijanego menu. Ciekawą własnością jest możliwość tworzenia tzw. Snippets, czyli definiowania gotowych kawałków kodu, które potem można wstawiać w prosty sposób do dokumentu, wybierając je z menu. Trochę do życzenia pozostawia bezawaryjność edytora. Parę razy zdarzyło mi się czytać komunikat This program has performed an illegal operation and will be shut down, co nie jest miłe, szczególnie dla osoby edytującej dokument. Usprawiedliwieniem może być fakt, że jest to dosyć młoda wersja programu.
Zobacz obrazek (19kB).

3. Arachnophilia, var. 3.4 by Paul Lutus, CareWare www.arachnoid.com/lutusp/arach.html
    Arachnophilia to edytor na pierwszy rzut oka wyglądający bardzo nieprofesjonalnie. Po uruchomieniu nie zobaczymy stada ikonek rozmieszczonych na docking/power/multi-barach ani nawały okien. Wrażenie to jest jednak mylące. Po rozwinięciu wszystkich możliwych "barów" zajmują one ok. 1/2 ekranu. Siła Arachnophili leży w jej pełnej konfigurowalności. Zestaw przycisków możemy dostosować do swoich własnych potrzeb, nie są to jednak ikonki, lecz zwykłe przyciski tekstowe - nie tak estetyczne, lecz bardzo czytelne ("TableWiz" zamiast pałki za kratkami). Arachnophilia pozwala na cofnięcie do 32 zmian w dokumencie, lub na przywrócenie ich z powrotem (Power Undo). Większość atrybutów każdego elementu można edytować po kliknięciu na nim prawym klawiszem myszy. Arachnophilia posiada ciekawą możliwość konwersji dokumentów z formatu .rtf (Rich Text Format) na dokumenty HTML. Ułatwia to pracę, gdy chcemy umieścić w Sieci dokument np. z WordPada lub Worda, a o HTMLu mamy dosyć blade pojęcie. Innym ciekawym udogodnieniem jest Arachnophilia Site Analyzer - funkcja tworząca nam drzewo odwołań i hiperłączy wykorzystywanych w naszym dokumencie, co pozwala wyłapywać ew. błędne odwołania do nieistniejących zasobów. Zestaw wszystkich powiązanych ze sobą dokumentów można umieścić w sieci z pomocą Site Update Tool, przy okazji skracając ścieżki odwołań do lokalnych zasobów z pomocą Autocopy Mode (wszystkie odwołania typu c:/praca/firmasiedem/stronagłówna/obrazki/obrazekpoczątkowy.gif zostają zamienione na obrazekpoczątkowy.gif z jednoczesnym przeniesieniem pliku do katalogu z dokumentem). Jeśli dokument wydaje nam się bardzo zagmatwany możemy użyć funkcji Beautifiera ("Upiększacza"), który poprawi nasz dokument odpowiednio go formatując i robiąc wcięcia, by stał się bardziej "strukturalny wizualnie". Arachnophilia rozpoznaje elementy HTML 3.2 i pozwala na ustawienie do sześciu (!) zewnętrznych przeglądarek.
Zobacz obrazek (19kB).

4. CoffeeCup HTML Editor++ 98, ver. 5.0 by CoffeeCup Software, www.coffeecup.com
    CoffeeCup jest edytorem który robi wrażenie. Niewątpliwie zasługa w tym ładnie zaplanowanych i rozmieszczonych ikonek oraz okien, ale CoffeeCup nie tylko ładnie wygląda. Jest to prawdziwy kombajn umożliwiający w łatwy i szybki sposób stworzyć bogate strony WWW. Editor++ jest tylko częścią oprogramowania do tworzenia stron (główną). Do kompletu można (aczkolwiek nie trzeba) zainstalować ImageMapper++ i StyleSheet Maker++ - przydatne do łatwego tworzenia map regionów oraz stylów. Editor++ posiada wbudowane ok. 50 gotowych programów JavaScript, dziesięć VBScript oraz pięć skryptów CGI gotowych do natychmiastowego wykorzystania. Poza tym dostajemy ok. 200 animowanych GIFów, 50 JPEGów do wykorzystania jako tła oraz kilkadziesiąt strzałek, kulek, przycisków i innych obrazków, które można wykorzystać w celu uatrakcyjnienia swojej strony. Większość z nich jest przygotowana w dwóch wersjach - dla jasnych i ciemnych teł, co pozwoli wybrać wersję najlepiej wtapiającą się w stronę. Editor++ posiada możliwość sprawdzenia pisowni czy szybkiego umieszczenia strony w Sieci za pomocą Espresso FTP. Niestety większość tych opcji jest dostępna tylko dla zarejestrowanych użytkowników, ale i bez tego jest to potężne narzędzie. Posiada łatwy w użyciu kreator tabel, ramek, formularzy i list (w tym ostatnim możliwe jest zaimportowanie listy z pliku .txt), umożliwia korzystanie z kontrolek ActiveX. Podglądu dokumentu można dokonać w przeglądarce domyślnej bądź ulubionej. Tekst, który podlega edycji można pokolorować, aby poprawić jego czytelność, aczkolwiek jest to funkcja dodana trochę "na siłę" - po prostu wszystkie elementy robią się niebieskie. Algorytm kolorowania nie wyłapuje też sytuacji typu: napisaliśmy a href="ala.ma.kota", a dopiero potem ujęliśmy znacznik w znaki <>. Zawartość w takim wypadku pozostanie czarna. Takich błędów można jednak spotkać niewiele.
Zobacz obrazek (22kB).

5. Under Construction 98, ver. 2.5 by Global Planet, www.gplanet.com
    Under Construction, podobnie jak CoffeeCup HTML Editor++ to program bardzo rozbudowany. Po uruchomieniu w oczy rzuca się duża ilość zakładek, ikonek, pasków itd. Program naprawdę posiada ogromne możliwości, aczkolwiek w pełni zadowolą się nim tylko posiadacze szybkich komputerów. Przy większym dokumencie (>100kb) wyświetlenie kolejnych znaków potrafi zająć do pół sekundy. Niemniej, na szybkich maszynach edytować się będzie łatwo i bez niespodzianek. Cały tekst dokumentu jest ładnie pokolorowany, co ułatwia orientację. Po dwukrotnym kliknięciu na znacznik HTML pojawi się Web Assistant, podpowiadający nam z jakim elementem mamy do czynienia, jakie ma atrybuty (HTML 3.2), jak go użyć, a nawet jak wygląda w przeglądarce. Do stron można włączać (po drodze ustawiając kilka opcji) obrazki i dźwięki. O ile przy tych ostatnich nie było problemów, to wstawienie obrazka, którego nie ma (taki mały test), może się skończyć komunikatem Access violation at address .... Zdarzyło mi się też przeczytać dymek ExplorerButton, który miał objaśniać, że dany przycisk powoduje wstawienie do dokumentu... niełamliwej spacji. Program jest zbudowany bardzo "wizualnie", orientowanie się w gąszczu możliwości jest intuicyjne, a więc pracuje się bardzo wygodnie. Do dyspozycji (zarejestrowanego użytkownika) jest około 70 gotowych do umieszczenia na stronie programów JavaScript. Ciekawą własnością jest to, że Under Construction potrafi użyć microsoftowych Favourites czy netscapowych Bookmarks i korzystając z tam składowanych informacji automatycznie wstawić na stronę hiperłącze wskazujące wybrany dokument. Program został pomyślany tak, by można go było łatwo rozbudować - większość funkcji załatwiają pisane do Under Construction wtyczki, co pozwala łatwo uaktualniać program. Umieszczenie dokumentu w Sieci możliwe jest za pomocą wbudowanego klienta FTP, można również sprawdzić poprawność pisowni (jeśli się pisze po Angielsku).
Zobacz obrazek (32kB).

6. WebEdit Pro, ver. 3.0.4 by Luckman Interactive, www.luckman.com
    WebEdit jest solidnie napisanym edytorem. Nie znajdziemy w nim nic, co nie byłoby związane z tworzeniem stron WWW. Przypomina tym Arachnophilię - nie ma tu mnogości przycisków czy okien, jest za to czysta użyteczność, czyli można zrobić wszystko, pod warunkiem że się wie czego się chce. WebEdit posiada większość funkcji wymaganych dla profesjonalnych edytorów HTML, czyli kolorowanie tekstu, klienta FTP (także HTTP), sprawdzanie pisowni, system pomocy itd. Najciekawiej prezentują się jednak jego funkcje z serii ...Wizard. Oprócz spotykanych wszędzie FrameWizard, TableWizard itd. WebEdit proponuje nam: Link Validator Wizard - do sprawdzania poprawności występujących w dokumencie hiperłączy; HTML Validator - do sprawdzenia poprawności składni elementów występujących w dokumencie, przy czym możemy wybrać typ języka (HTML 2.0, HTML 3.2, HTML 4.0, HotJava Extensions itd. itp.); Multimedia Wizard - pozwalający dołączyć do strony obrazki, dźwięki i skrypty (mamy kilka gotowych), jednocześnie z wyborem orientacji na przeglądarkę (IE czy N); Table of Contents Wizard pozwala na stworzenie szybkiego spisu treści strony (bazuje na elementach nagłówków); Home Page Wizard pozwala wręcz stworzyć ciekawą stronę przy zerowym obeznaniu z HTMLem. Na koniec najciekawszy, moim zdaniem: Rating Wizard. Pozwala on na dołączenie do strony (element META) klasyfikacji, w formacie bądź RSACi Recreational Software Advisory Council, bądź SafeSurf Rating Service. W łatwy sposób specyfikujemy, dla jakiego grona odbiorców przeznaczony jest dokument, czy występują w nim materiały pornograficzne (i w jakim stopniu) itd. Z takiej klasyfikacji korzystają programy typu Komputerowa Niania, mogąc nadzorować dostęp nieletnich do zasobów Sieci.
Zobacz obrazek (16kB).

7. WebEditor Pro, ver. 1.0 by Peter Simonsson, www.geocities.com/SiliconValley/Park/7619
    Web Editor Pro jest edytorem dla tych, którzy jako tako obeznani są z HTMLem i CSS. Pomoc dostępna w programie jest dosyć niewielka, żeby nie powiedzieć śladowa. Składa się na nią około piętnastu (!) stron pomocy, i skrócony opis wszystkich elementów HTML 3.2, plus rozszerzenia IE i N. Na plus programu zalicza się fakt, że pozwala tworzyć strony wykorzystując Style Kaskadowe. Program posiada również dosyć dobrą wewnętrzną przeglądarkę, obsługującą standard HTML 2.0. Podgląd zewnętrzny można wykonać w przeglądarkach wykrytych przy instalacji bądź w domyślnej przeglądarce systemowej. Web Editor wymaga dosyć dużych zasobów systemowych, niespełnienie tych wymagań może się skończyć komunikatem Out of memory, lub Access violation at address..., co na szczęście nie kończy się "padem", ale uniemożliwia edytowanie większych dokumentów. W programie nie spotka się żadnych skomplikowanych Wizardów: wszystko jest proste, natychmiastowe (prawie) i nieskomplikowane. Wbudowany klient FTP pozwala na łatwe umieszczenie plików w Sieci. Ponieważ jest to wersja programu 1.0, nie oszołamia, aczkolwiek autor (autorzy) w przyszłości zapowiadają liczne unowocześnienia. Ciekawą właściwością programu (wadą?) jest to, że kompletnie nie sprawdza on wartości przypisywanych atrybutom za pomocą okien dialogowych, np. można wstawić obrazek który ma "argh" wysokości.
Zobacz obrazek (27kB).

8. HotDog Professional, ver. 4.5 by Sausage Software, www.sausage.com
    HotDog robi duże wrażenie już od pierwszego uruchomienia. Każdemu ruchowi użytkownika towarzyszy jeśli nie animacja, to przynajmniej dźwięk lub obrazek. HotDog posiada ogromne możliwości i bez wątpienia jest jednym z najlepszych dostępnych edytorów HTML. W parze z możliwościami idą też wymagania sprzętowe. Na moim komputerze, przy uruchomionych kilku (dokładnie dziewięciu) aplikacjach HotDog wczytywał duży dokument (>100kB) tyle czasu, że w międzyczasie zdążył zrobić AutoSave, a w końcu wyczerpał cierpliwość i został przeze mnie wyłączony, nic nie pokazując. Może przy 128MB... Niemniej na odpowiednim sprzęcie program ten rozwinie skrzydła. Pierwszą ciekawą własnością, którą od samego początku chwali nam się występujący w okienku zielony pies jest natychmiastowy podgląd wykonanych poprawek, we wbudowanej przeglądarce ochrzczonej "Rover", która może zostać zastąpiona przez IE 3 albo IE 4. Następną rzeczą jest możliwość sprawdzenia składni i pisowni dokumentu, a także użycia własnych, zdefiniowanych przez siebie znaczników (!). Co do tych ostatnich, HotDog umożliwia utworzenie z boku małego okienka nazwanego HTML Properities, w którym wyświetlają się wszystkie atrybuty edytowanego znacznika, wraz z rozszerzeniami specyficznymi dla różnych przeglądarek. Można także definiować własne style, lub importować już istniejące. Najkrócej HotDoga można określić jako skrzyżowanie 1-4-All z CoffeeCup HTML Editor++ i Under Construction.
Zobacz obrazek (36kB).

9. HomeSite, ver. 3.01 by Allaire Corporation, www.allaire.com
    HomeSite na pierwszy rzut oka mocno kojarzy się z 1-4-All (choć pewnie powinno być odwrotnie). Oprócz standardowych opcji, dostępnych w każdym profesjonalnym edytorze HomeSite posiada kilka, które powinni docenić ludzie zajmujący się utrzymywaniem serwerów WWW. Są to między innymi:

Reszta - patrz 1-4-All
Zobacz obrazek (31kB).

10. Pajączek, ver. 3.0.1 Light by Rafał Płatek, www.intraco.com.pl/pajaczek
    Pajączek Light jest uproszczoną i darmową wersją programu Pajączek 3.0 Pro (za którą trzeba już zapłacić). Pajączek jest generatorem stron WWW, co znaczy, że cały program został pomyślany jako jeden wielki Czarodziej do łatwego i szybkiego tworzenia stron. Każdy, nie mający nawet bladego pojęcia o składni języka HTML może z pomocą tego programu skonstruować swoją stronę domową. Kreowanie obejmuje trzy sekcje: Nagłówki oraz Logo, Ulubione odnośniki URL, Skrzynka kontaktowa, i odbywa się w trzech, założonych zakładkami okienkach. W pierwszym (Ustawienia sekcji) ustawiamy tło strony, kolory, muzykę, która może nam towarzyszyć w tle, tytuł, słowa kluczowe, sposób kodowania polskich znaków itd. W drugim (Atrybuty sekcji) ustawiamy nagłówek, podtytuł, ew. obrazek, ulubione URLe oraz adresy e-mailowe (zgodnie z wyborem sekcji). Ostatnia zakładka (główna sekcja) to tekst dokumentu, który wstawiamy sami. Ewentualne upiększenia możemy dodać wybierając jedną z pozycji ukrytych pod prawym klawiszem myszy, nie jest tego jednak wiele: pochylenie, pogrubienie, wstawienie obrazka czy hiperłącza i kilka innych. Należy zapomnieć o ramkach, tabelach i formularzach. Nie znalazłem w Pajączku możliwości wczytywania dokumentów (może w wersji Pro?). Wraz z Pajączkiem Lite dostajemy parę obrazków, teł i muzyczek do wykorzystania na swoich przyszłych stronach.
Zobacz obrazek (14kB).

11. Tiger 95, ver. 1.5 Final by Jacek Szarapa, www.rubikon.net.pl/tiger
    Tiger jest polskim, bardzo dobrym edytorem HTML. Nie posiada wprawdzie tak wystrzałowej oprawy graficznej jak HotDog, lecz funkcjonalnością dorównuje pozostałym edytorom, a dla niektórych na pewno je przewyższa (wszystko po Polsku!). Oprócz podstawowych ułatwień, takich jak kolorowanie tekstu czy kreatory tabel, Tiger 95 posiada np. kreatora wykazu, który wyświetla nam listę wszystkich lub wybranych użytych w dokumencie zasobów, kreatora spisu treści, kreatora odnośników (hiperłączy), czy możliwość stworzenia napisu z cieniem (za pomocą CSS). Tiger 95 potrafi też zaimportować pliki TAGa, czy większości baz danych. Posiada kilka gotowych JavaScriptów oraz możliwość tworzenia styli. Dużą zaletą jest również możliwość sprawdzenia pisowni (w języku Polskim, Angielskim i Francuskim). Co prawda zasób słów w słownikach nie jest oszałamiający, ale na początek wystarcza. Teraz trochę o wadach: Tiger nie oszałamia szybkością (przynajmniej na moim komputerze), na pokolorowanie dokumentu (~100kB) musiałem poczekać coś około minuty. Nieciekawie przedstawiało się też edytowanie tak dużego tekstu: szybkie wpisanie z klawiatury "ala ma kota" dawało efekt w postaci "al m koataa" lub "aa a ktoaml" (sprawdzałem wiele razy). Tiger dał się też nabrać na manewr typu: najpierw piszę "a href=...", potem dopiero wstawiam znaki <>. Taki znacznik nie zostanie pokolorowany. Niedociągnięciem jest również to, że Tiger poszukuje swojego pliku z pomocą w katalogu aktualnym, a nie tym, w którym został zainstalowany. Trzeba go tam skierować dopiero "ręcznie". Jednak pomimo tych wszystkich niedociągnięć zaryzykował bym stwierdzenie, że Tiger 95 stoi co najmniej na tak dobrym poziomie jak HomeSite, a dodatkowym atutem jest jego wersja językowa.
Zobacz obrazek (31kB).

12. Pajączek 2.1 by Rafał Płatek, www.intraco.com.pl/pajaczek
    Pajączek to komercyjny "Edytor stron HTML". Pierwsze, co zwróciło moją uwagę po uruchomieniu programu to... ładne tło. Program posiada opcje szybkiego startu i generowania stron. Generator strony to nic innego jak Pajączek Light, natomiast szybki start to generator strony podany nieco inaczej (moim zdaniem można było umieścić wszystko w jednej opcji). Sporym niedociągnięciem jest brak wyświetlania długich nazw w okienkach przedstawiających pliki dyskowe, pliki projektów bądź pliki właśnie edytowane. Zastanawia też brak polskich liter w dymkach podpowiedzi, ale równie dobrze może to być wina systemu (choć w dokumencie i menu znaki te wyświetlane są prawidłowo. Pragnąc posłużyć się pomocą natrafiłem na komunikat "Brak zdefiniowanej przeglądarki". Na szczęście w Pajączku istnieje system porad, w którym jednak brakuje opcji "poprzednia". Pajączek obsługuje chyba wszystkie aktualne elementy HTML. Możliwe jest wybranie elementu z rozwijanego okna i wstawienie go do dokumentu. Niestety, atrybuty do takiego elementu wstawiamy również z rozwijanego okna, w którym znajdują się atrybuty dla... wszystkich innych elementów. Pytanie: po co? Jeśli ktoś jest początkujący same nazwy atrybutów nic mu nie powiedzą (w oknie tym nie ma dymków), zaawansowany natomiast szybciej wpisze nazwę "z palca". Pajączek wydał mi się nie do końca przemyślany, gdyż pomoc przy kreowaniu strony w dużej mierze ogranicza się do zadania użytkownikowi paru pytań w oknie dialogowym i wstawieniu elementu w miejscu "postoju" kursora. W ten sposób można sobie porobić np. siedem znaczników , każdy z ustawionym innym kolorem tła. Na duży plus zaliczyć natomiast należy dołączenie do programu kursu HTML autorstwa Pawła Wimmera. Pajączek posiada też wbudowanego klienta FTP, pozwalającego w prosty sposób umieścić wyniki naszej pracy w sieci.
Zobacz obrazek (69kB).

Rozdział VII - Dynamiczny HTML na przykładzie Netscape Navigator 4

E-mail to: coding@poczta.onet.pl