2000. év 9. szám
Elvonult a banduleiro, én pedig megpróbálom Varunát új életre támasztani. Nem lesz bonyolult, bár sajnos a banduleiro kirángatta a kanócokat a konnektorból, Varuna így tápfeszültség nélkül maradt, ami a rendszer integritásának nem okvetlenül tesz jót, de hát a banduleiro már csak ilyen.
A banduleiro (ejtsd: bandulejru) egyébként portugál szó és banditát jelent, vagy, ha tetszik, betörőt; én a takarítónőmet hívom így, ugyanis a mindenkori takarítónőm hajszálra olyan, amint akármelyik banduleiro, tudniillik akkor jön, amikor neki tetszik, felforgatja a lakást, elviszi a pénzt, és nem takarít. Még azt se lehet róla elmondani, hogy portörlés helyett a porrongyokról írna hosszú cikkeket valamelyik takarítási szaklapba, ez inkább a megbízójára, vagyis méltatlan személyemre jellemző, mert íme, most is webes alkalmazásokról fogunk hosszabban értekezni, miközben az általunk felügyelt webállomás olyan, mint egy elhagyott indóház valamelyik megszüntetett szárnyvonalon, ahol évtizedek óta nem járt vonat.
Pedig milyen kis csinos lehetne, ha volna rá időnk. De nincs.
 |
| 1. kép. A Dannemann Pierott Brasil szivardoboz nyomán megálmodott oldalterv, elemeit a Firework 3-mal, az oldalt magát a Dreamweaverrel alkottuk |
 |
| 2. kép. Importátlt PSD állomány, nem igazán olyan amilyennek a Photoshopban mutatkozott, viszont képnek kép ez is |
 |
| 3. kép. A firework 3 gombszerkesztőjében készült mötyür beillesztése az oldalba |
Macromedia Fireworks 3
Ő a Dreamweavernek, a Macromedia webtervező alkalmazásának a grafikai feladatokkal megbízott ikertestvére, 3-as változatuk egyszerre jelent meg a piacon tavaly decemberben, viszonyuk pedig ennek megfelelően igazán családias. Természetesen a Tűzijátékot közvetlenül az Álomszövőből is el lehet indítani, ilyenkor nemcsak képanyaggal tér vissza, hanem HTML és JavaScript kódokkal, amelyek néha eléggé cifrák, de az Álomszövő felismeri és oda hímzi be őket, ahova valók (1. kép).
Kicsit hasonlít ez az Adobe ImageReady-Photoshop-GoLive kapcsolatra, csakhogy a Macromediának olyanja, mint a Photoshop, nem igazán van, ezért aztán a Fireworks 3 nemcsak megnyitja a Photoshop-állományokat, hanem képes továbbszerkeszteni a szöveges rétegeket és az esetleges rétegeffektusokat, felismeri a scriptelhető Photoshop szűrőket és így tovább, bár az eredmény olykor fura. Viszont az előző verzió ennyit se csinált (2. kép).
Ezzel szemben nemcsak a különféle gombjaink változtathatják a színüket és formájukat (3. kép), amikor a felhasználó egérmutatója elsiklik fölöttük - egyébként ennyivel manapság nem is igen tudnánk a művelt publikum csodálatát kivívni -, hanem az is lehetséges, hogy oldalunk vendége a jobb alsó sarokban molyol valami kép fölött, és ennek hatására egy szövegkeret tartalma változik meg (4. kép). Ez a "disjoint rollover" nevű tervezési trükk nyilván egy kevésbé hi-tech alkalmazás - mondjuk a Notepad - használata révén is elérhető, de babrálni kell vele. Mellesleg a Fireworks 3 nemcsak egyedi grafikákat készíthet, hanem komplett weboldalt is, s ezzel olyan hatásokat érhetünk el, amilyenekre más tervezők gondolni se mernek.
Gyakorlatilag az történik, hogy létrehozzuk a művet, majd apró fecnikre vagdaljuk és a gyorsabb letöltés érdekében darabonként fogjuk optimalizálni, egy részük nyilván JPG lesz, más részük GIF, továbbá ezeket a fecniket ("slices"), ha a jellegük olyan, további oldalakban is felhasználhatjuk, ami megint csak gyorsabb letöltéshez vezet. Másfelől az okszerűen fölhentelt mű nemcsak egyben frissíthető, hanem, ha szabad így mondanunk, testrészenként is (5. kép), harmadrészt pedig a fecnikhez URL vagy script tartozhat, s ettől az oldal nagyon virgonc benyomást fog kelteni. Egyébként létezik olyan is, hogy szövegfecni (text slice), az csak normális HTML kódot (szöveget) tartalmaz, képpontokat nem. Ami pedig a szeletelést illeti, azt ne feltétlenül úgy képzeljük el, hogy fogunk egy láncfűrészt és nekimegyünk az állománynak, van ugyanis sokszögű kijelölés is, ezzel bármilyen képelemet elfogadható pontossággal behatárolhatunk, és utána mindenfajta mirákulumokat kapcsolhatunk hozzá, avagy - a program szóhasználata szerint - meghatározhatjuk a viselkedését ("behavior"). Mindezt a telefonos képen (6. kép) csodálhatjuk meg, kijelöltük a kagylót, a többit a Behaviors feliratú úszó panelből elrendezzük, az oldal vendége pedig csak ámul-bámul.
 |
| 4. kép. Amikor a felhasználó az egérmutatóval motoszkál a felületen, a szövegbox tartalma változik |
 |
| 5. kép. A Fireworks 3-ban készült weboldalt fecnikre fogjuk darabolni |
Legbensőbb lényegét tekintve a Fireworks 3 egy bittérképes festőprogram, egy vektoros rajzolóeszköz, továbbá egy GIF-animátor jól sikerült szimbiózisa, az ilyen alkalmazások valamennyi fontosabb kellékével fölszerelve. Nagyszerű tulajdonsága, hogy valós idejű effekteket kínál, nézzük meg például a tehenes képet (7. kép), ott egyetlen panel látható, a felirat valamennyi jellemzőjét azon lehet szabályozgatni, és a változtatás a képen azonnal megjelenik.
Minthogy pedig webes alkalmazásról van szó, a Fireworks 3 egyszersmind természetesen bigyógyár és ezzel összefüggésben HTML-, illetve scriptgenerátor is. Működé-se automatizálható, amennyiben az Előzmények panel elemei makróvá állhatnak össze, továbbá van benne egy JavaScript API, és természetesen stílusokat is alkalmaz. Minthogy rengeteget tud, a használata némiképp körülményes, legalábbis elsőre. Később aztán kiderül, hogy voltaképp segítőkész jószág ez, egyebek között olyan export preview ablaka van (8. kép), amihez foghatót még nem láttam, s ez igazából a könnyebbség irányába hat, hiszen mindig jó, ha az ember pontosan tudja, mit csinál. Ezzel együtt a Fireworks 3 mégis inkább profi célra javasolható, a kevésbé differenciált lelkivilágú adóalanyok számára léteznek a célnak megfelelő, de sokkal szimplább eszközök is, aminő például a Xara WebStyle. Ennek tanulási ideje nincs, azonnal használható, a gomb színeváltozásához szükséges scriptet nem gyártja le ugyan, de hát a szükséges forráskód akárhonnan beszerezhető és tetszés szerint újrahasznosítható, már ha csakugyan ragaszkodunk az ilyesmihez (9. kép). Különösebben sokat nem érdemes mondani róla, letölthető (ftp://onyx.xara.net/pub/ xaraltd/style110.exe, illetve http:// www.xara.com/ downloads/ webstyle .html), mókás kis holmi, amellett csakugyan praktikus.
 |
6. kép. Az itt kijelölt telefonkagylóhoz
a weboldalban script fog tartozni, és amikor a felhasználó egérmutatója fölébe kerül, a kedves hölgyek fenyegető tekintetű adórendőrökké lényegülnek át |
 |
7. kép. Tetszés szerint babrálunk az úszó panelen,
s a címsoe külleme azonnal megváltozik |
Adobe
ImageReady 2.0
Természetesen a szeletelés nem a Fireworks 3 titkos tudománya, ugyanez az ImageReady 2.0-ban is megtalálható, egyébként a két alkalmazás szolgáltatásai hasonlók, áruk pedig gyakorlatilag azonos. További azonosság nemigen fedezhető föl, én ugyan úgy terveztem, hogy nézegetem majd mindkettőt, de erre valójában nem fog sor kerülni. Az ImageReady 2.0 kínosan lassú, pedig memóriahiányra nálam igazán nem panaszkodhat. (Emlékeztetőül: Varuna nevű gépem 512 megabájt RAM-mal van fölszerelve.) A Fireworks 3 esetében lomhaságot nem is igen tapasztaltam, viszont az ImageReady 2.0 képernyőjén egy réteg odébb piszkálása is idegőrlő feladat. Kár, hiszen vannak tetszetős tulajdonságai, például változatosabb címfeliratokat tud készíteni (10. kép), sokkal több szűrője van, bár ez némiképp indifferensnek látszik, ha meggondoljuk, hogy az ImageReady 2.0 egy dobozba van csomagolva a Photoshop 5.5-tel, márpedig abban annyi a szűrő, mint a rosseb. Rendes JavaScript gombsorokat az ImageReady 2.0 egyáltalán nem csinál, holott ha az ember temérdek pénzt kiad egy ilyen alkalmazásért, akkor egy ilyen gombsor mégiscsak jár neki.
Macromedia Dreamweaver 3
Úgy látszik tehát, nem véletlen, hogy tavaly az amerikai Macworld által kiadott szerkesztők díját a webgrafika kategóriában a Fireworks 2 nyerte el, amihez képest a 3-as verzió több új erénnyel gazdagodott. Webszerkesző kategóriában pedig az ikertestvérkéé, a Dreamweaver 2-é lett a díj, az Adobe GoLive 4.0 tehát az előkelő második helyre szorult vissza, noha nagyon nagy program az is.
A Dreamweaver viszont egyszerűen lebilincselő.
Előttem már a 3-as verzió van, újdonságai nem éppen elhanyagolhatók, részben ezeknek köszönhető, hogy ez az alkalmazás első pillantásra a szívünkbe lopja magát.
Vizuális webszerkesztőről beszélünk; olyan bonyolult oldalak tervezésére való, amilyeneket vakrepülésben - értsd: szimpla kódszerkesztővel - nagyon nehéz volna összehozni. A többi hasonló szerszám általában úgy épül fel, hogy van a WYSIWYG nézet, a HTML nézet, meg esetleg egy vázlatnézet, ezek között lehet kapcsolgatni, s a dolgozó így is prímán elvan.
Eszébe se jut, hogy lehetne ez jobb is, noha lehetne.
A Dreamweaver 3-ban a WYSIWYG felületen matató webművésznek nem kell átváltania egy másik nézetbe, ha közvetlenül akar belenyúlni a kódba, csak rákattint az oldal valamelyik elemére, leüt egy billentyűkombinációt, s az illető elemhez tartozó kódrészlet egy beugró ablakban, az úgynevezett Quick Tag Editorban jelenik meg, itt a megfelelő címke direktben szerkeszthető, de új HTML kódot is be lehet írni.
 |
| 8. kép. Export preview a Firewoks 3-ban: különféle JPG és GIF paraméterek |
A kód folyamatos szem előtt tartására a HTML Source inspector nevű úszó ablak szolgál, ez olyasmi, mint más hasonló programokban a HTML nézet, a kódot a szokásos módon szerkeszthetjük benne, s ha visszalépünk a WYSIWYG ablakba, akkor a módosítás eredménye megjelenik. Kivéve, persze, ha az általunk beírt módosítás vitathatatlan baromság, viszont ez esetben a Dreamweaver 3 a kódot nem is írja felül.
Ha viszont a webművész egyébként is hajlamos a közvetlen HTML szerkesztésre, akkor e célra nyilván van olyan editora, amit kedvel, és amit már rég kistafírozott (fölmakrózott) a maga gusztusának megfelelően, tehát ő azt szereti használni, nem pedig a WYSIWYG szerkesztők igen korlátozott képességű és rendszerint makrózhatatlan HTML nézeteit. A Macromedia figyelembe vette ezt a körülményt, s ennek köszönhetően a webfaragó kvázi integrálhatja a Dreamweaver 3-ba legkedvesebb HTML kódszerkesztőjét, legyen az NoteTab, vi, emacs vagy bármi egyéb, s ez a tény már önmagában is elégséges okot szolgáltat arra, hogy mellette tegyük le a garast.
Megemlítendő - mint újdonság - a Netscape Resize Fix, a GoLive 4.0-val kapcsolatban már volt szó arról, hogy ez mire való, tömören annyi, hogy a Navigatornak a stílusokhoz, kivált a CSS réteghez való viszonya kissé feszült. Ha újraméretezzük a böngészőablakot, amely éppen egy stílusokkal formázott oldalt jelenít meg, akkor a Navigator agresszívvá tud válni, nálam például egy alkalommal az egész rendszert lecsapta. Ezt megelőzendő, a dokumentum fejrészében el lehet helyezni egy scriptet, a művelet automatikus, a rétegpreferenciák között állítható be, a továbbiakban nincs vele gond.
 |
| 9. kép. A Fireworks 3 legszimplább alternatívája a Xara WebStyle: keveset ad, de nem is riszálja magát |
Szintén újdonság a Word HTML dokumentumainak takarítása (Clean Up Word HTML), ez a Microsoft Word által kreált állományokból szedi ki a fölösleges dolgokat, ilyen pedig van egypár, utána a kód rövidebb lesz és áttekinthetőbb. De nemcsak a Word állományait takarítja ki, hanem azokat a remekműveket is, amelyeket megint csak nem a két dolgos kezünk munkájával kódoltunk, hanem valamely szerényebb képességű WYSIWYG szerkesztőben hoztunk létre, s amelyek általában kódszeméttel vannak tele, ilyenekkel, hogy , sőt még rosszabbakkal·b>amilyen·/b>ez·/b>. Az egymásba ágyazott fontcímkéket összevonja, tehát abból, hogy nagy, vörös ·/FONT>, az lesz, hogy nagy, vörös . Emellett különféle speciális címkéket is hajlandó kiszedni, eklatáns példa erre a BLINK. Valamilyen kifürkészhetetlen okból fakadóan az üres (semmire se vonatkozó) ·span>·/span> címkepárokat hajlamos a szövegben hagyni, de hát ennél nagyobb bajunk sohase legyen.
Maga a Dreamweaver 3 a jelek szerint nem generál kódszemetet, sőt még a forrásállomány külalakjára is gondot fordít, ezt a mi preferenciáinknak megfelelően szabályozhatjuk, igaz, nem menüből vagy egyéb "elegáns" módon, hanem egy SourceFormat.txt nevű állomány szerkesztése útján, ám akit a kód csinossága ennyire foglalkoztat, az nyilván kódot editálni is hajlandó. A menük és a billentyűkombinációk átírása is hasonlóképpen, egy menus.xml nevű állomány szerkesztésével megy végbe.
 |
| 10. kép. Az ImageReady 2.0 tetszetős címfeliratokat hoz létre, további előnye nincs is |
A felület, mint a CNN egyik dokumentumát megjelenítő képen (11. kép) is látható, némileg konfúzus benyomást bír kelteni az úszó paletták sokasága miatt (itt csak kis részük van kirakva), melyek megnyitása és becsukása egy további úszó paletta, az úgynevezett Launcher
révén történik. A zűrzavart bizonyos fokig mérsékelhetjük, a paletták nagyobb csoportokba dokkolhatók, persze lehetséges, hogy utána meg ezért nem fogjuk őket megtalálni. Azt is előírhatjuk, hogy melyik paletták legyenek mindig a dokumentumablak előterében, illetve, hogy a dokumentum melyeket födheti el, mindazonáltal aki a Corel alkalmazások átgondolt és praktikus megjelenéséhez szokott, az itt egy darabig szentségelni fog, később, idő múltával nyilván betörik. Ha pedig egyszer frontálisan találkozik a GoLive 4.0-val, akkor a Dreamweaver 3 tervezőit áldani fogja.
A legfontosabb kérdés persze az, hogy mit tudunk megcsinálni ezzel az alkalmazással, nos, ha a Fireworks 3-mal párba állítjuk, akkor úgyszólván mindent. Természetesen csakis nagyon körmönfont oldalak készítéséhez javallott, mindenesetre a FrontPage veteránjai feltehető érdeklődéssel figyelnék, ahogyan a Dreamweaver 3 felhasználója az egyik réteget pakolja a másik fölé, miközben ők - a FrontPage-veteránok - még sohase hallották, hogy a HTML-ben is van ilyen.
 |
| 11. kép. A Dreamweawer cuccainak egy része, köztük a Quick Tag Editor és a HTML Source inspector |
Sablonokkal más webszerkesztőben is találkozhatunk, mindamellett a Dreamweaver 3 ilyen irányú képességei nagyon rokonszenvesek. Amikor valamely dokumentumot sablonként mentünk el, definiálhatjuk, mely elemei legyenek szerkeszthetők, tehát például egy online folyóiratnál kijelöljük az aktuális cikket magát, az oldal fej- és láblécét nyilván nem, mert azt visszatérő tartalomként szeretnénk köszönteni. Persze maga a sablon is felülírható, ha így látjuk jónak, azaz megváltoztathatjuk benne a konstans részeket, s ha ez megtörtént, minden olyan dokumentum, amit e sablon alapján hoztunk létre, új arculatot ölt. A sablonok tartalmazhatnak stílusokat, viselkedésmódokat (behavior, lásd föntebb), sőt DHTML animációkat (timelines) is. Ide kapcsolódik a könyvtárak (libraries) fogalma; a könyvtár újrafelhasználható képek, szövegek és más objektumok gyűjteménye, ezeket a Dreamweaver 3 a webállomás gyökérkönyvtárában levő Library könyvtárban tárolja és az egyedi állományokból csak hivatkozik rájuk, ha tehát megváltoztatjuk a könyvtár valamelyik elemét, akkor ez a változtatás automatikusan átvezetődik akár több ezer oldalon is. Mindezek birtokában bölcs dolog, ha a közélet jeles figuráit, mint könyvtárelemeket szúrjuk be az oldalba, így garantálható, hogy mondjuk "a haza bölcse" valamennyi dokumentumunkban mindig az a személy lesz, akit a legfelsőbb helyen éppen annak tartanak, továbbá "a legfelsőbb hely" kifejezés által jelölt egyént is egy pillanat alatt tudjuk szélnek ereszteni, ha eljön az ideje.
Gyönyörű dolgok ezek, ám ne felejtsük el, hogy elemkönyvtárakat magunk is csinálhatunk és ugyanezt az eredményt fogjuk elérni vele, ami pedig az oldalak konzisztens megjelenését eredményező sablonokat illeti, ez is létrehozható, mondjuk, a NoteTab Light nevű ingyenes editorral, ott ugyebár betöltünk egy szövegállományt, egy billentyűszekvencia leütésével HTML dokumentumot csinálunk belőle, de magunk döntjük el, hogy az állomány elején és a végén mi lesz. Más szóval a fej, valamint a törzsben az aktuális szöveg előtti és utáni rész azt fogja tartalmazni, amit előre beállítottunk, s ha a fejben külső stíluslapra hivatkozunk - márpedig mért ne tennénk ezt - akkor a tipográfiai egyöntetűség is garantált. Egyébként pedig az oldal értékét nem a csicsa határozza meg, hanem a tartalom.
Ha viszont azzal gondok vannak, tessék a Dreamweaver 3-at hadrendbe állítani.
Az legalább elegáns.
Váncsa István
