Grafika, multimdia, szrakozs

Kiskapu Kft. Minden jog fenntartva

ngolul kiejtve az n-view (new view) j nzetet, j nzpontot jelent. A fejlesztst a Linspire akkori nevn Lindows cg tmogatta, vezet fejlesztnek pedig a Composer vezet fejlesztjt, Daniel Glazmant bztk meg. Az NVU szmos verzit lt meg els megjelense ta, ebben az rsban a nemrg megjelent, eddigi legjobb, 1.0 vltozat legfontosabb funkciit mutatjuk be. Az NVU ingyenesen hozzfrhet s felhasznlhat, MPL/LGPL/GPL licensz, tbbplatformos Windows, Linux, MacOS alkalmazs, szmos nyelvi lokalizcija s forrskdja is elrhet.

Az NVU a Netscape, majd a belle kialakult Mozilla bngsz kiegsztst kpez Composer jjszletse. Amikor nhny vvel ezeltt a Mozilla ksztiben megfogalmazdott a gondolat, hogy az addig egy csomagot kpez funkcikat (bngsz, szerkeszt, levelez kliens, naptr alkalmazs, chat kliens) klnll alkalmazsokknt fejlesztik tovbb, a Composer alapjain megszletett az NVU.

Bevezets az NVU weblapszerkeszt hasznlatba

Els pillantsra az NVU egy, a Frontpage-re vagy Dreamweaverre hasonlt azt kapod amit ltsz (what you see is what you get) szerkeszt alkalmazs kpt mutatja, m, amint az a tovbbiakban kiderl majd, ennl jval tbbet knl. Az NVU teleptjt a honlapjrl lehet elsdlegesen elrni, minden platform al, Windows esetn szabvny windowsos ntelept formtumban, Linuxok esetn a legnpszerbb disztribcik csomag-formtumaiban illetve csomagolt binrisok formjban. Termszetesen a forrskd is elrhet. A telepts menete minden esetben egyszer, windowsos vltozat esetn grafikus fellet s alig egy-kt kattintst ignyel. Itt jegyezzk meg, hogy a magyar nyelvi kiegsztst a Magyar Mozilla Projekt honlapjrl lehet

Ismerkeds

1. bra Az NVU fellete letlteni. Ehhez az rshoz az NVU 1.0 linuxos vltozatt hasznltuk, Debian GNU/Linux SID opercis rendszer alatt, KDE krnyezetben. Az NVU fellete a Mozillaban is hasznlt Gecko megjelentsi knyvtrra pl, jl illeszkedve brmilyen platform brmilyen felhasznli krnyezetbe. Az alkalmazs alap-fellete az 1. brn lthat. Az alkalmazs felhasznli fellete nem ad tlzottan bonyolult sszkpet, ami egy fontos jellemz, tekintve, hogy els sorban olyan felhasznlknak szntk, akik nem professzionlis weblapszerkesztk. A lthat eszkztrak szvegszerkesztkbl megszokott alap-eszkzket tartalmaznak, amelyeket az j felhasznlk tbbsge is nagy valsznsggel mr ismer. A ksbbiekben ezek hasznlatt is bemutatjuk. Mieltt az NVU-s weblapszerkeszts rejtelmeibe mlylnnk, bemutatunk olyan belltsi lehetsgeket, amelyek fontosak a ksbbi munka szempontjbl.

Mieltt j dokumentumot hoznnk ltre s megkezdennk a munkt, rdemes az Eszkzk->Belltsok menpont alatt kicsit elidznnk. Az egyik fontos bellts, amit rdemes els lpsknt belltani, a ltalnos belltsoknl szerepel, Kpek s ms csatolt fjlok mentse az oldalak mentsekor. Ezt azrt fontos bejellni,

Els lpsek

50

Linuxvilg

Grafika, multimdia, szrakozs

Kiskapu Kft. Minden jog fenntartva
kiegszt llomnyokat (kpek, tovbbi HTML oldalak, stb.) feltlthetjk a webszerverre, ahol ez azonnal publikusan elrhet lesz. Errl a funkcirl a ksbbiekben mg szt ejtnk. Eljutottunk addig a pontig, ahol elkezdhetjk a ltrehozott res weblapunk szerkesztst. Fordtsuk most figyelmnket a szerkesztablakra s az NVU egyik erssgre, a klnfle nzet-ablakokra.

2. bra Norml (fent), HTML-elemes (kzpen) s Forrs szerkeszt nzet (lent)

hogy amikor a kszl dokumentumunkba klnfle kls elemeket szrunk be (pl. kpek), akkor ezek mentskor az oldal forrsval egytt kerlnek mentsre. Az j oldal paramtereinl fontos lehet elre megadni az oldal preferlt nyelvt s a hasznlni kvnt karakterkszletet magyar szveg esetn ez praktikusan ISO-8859-2 klnben s minden ms esetben javasolt az UTF-8 hasznlata. A Halad belltsoknl a kszl oldal kd-forrsnak nyelvt lehet kivlasztani, HTML4 s XHTML1 kzl vlasztva. Kezd s halad felhasznlknak egyarnt clszer az XHTML1 Transitional sma hasznlata. A HTML4 s XHTML1 kztti klnbsgekre itt most nem trnk ki. Ezek utn ltrehozhatjuk az els dokumentumunkat, a Fjl->j menpont segtsgvel. Ltrehozhatunk res dokumentumot j munka kezde-

tekor, de ltrehozhatunk j lapot sablonok alapjn is, amelyeket mi is elkszthetnk, de hasznlhatunk pldul Frontpage sablonokat is. A mi esetnkben res lapot fogunk ltrehozni, amelyen a ksbbiekben bemutatjuk az NVU kpessgeit. Az NVU beptetten tartalmaz egy weblap kezel s kzzttel eszkzt is, amit NVU webhelykezelnek hvnak, s ami az NVU elindtsakor a fellet bal-als rszn tallhat, ahogy az az 1. brn is lthat. Ha van sajt webszervernk vagy egy a szolgltatnl elfizetett webtrhelynk, FTP-s hozzfrssel, akkor itt bellthatjuk ennek paramtereit. Ez annyiban knnyti meg a munknkat, hogy a ksbbiekben, amikor mr kszl az oldal, a Fjl->Kzzttel menponttal illetve az eszkztr Kzzttel eszkzvel egy kattintssal a teljes megrt weboldalunkat s a hozz tartoz

Az NVU fellett megvizsglva knnyen szrevehetek a f szerkesztablak alatt tallhat flecskk. Ezek a flecskk szolglnak a klnfle nzetek kztti vltsra. Ugyanezek a funkcik elrhetk a Nzet menben is. Ezek a nzetek azt a praktikus clt szolgljk, hogy szerkesztsi lehetsget nyjtsanak teljesen kezd szint felhasznlktl a profi felhasznlkig. Vegyk most sorra ezeket a nzeteket, amelyekre egy rvid plda lthat a 2. brn. A Norml nzet olyan szerkesztsi felletet ad a felhasznl keze al, amellyel szinte mindenki boldogulni tud, akinek van nmi tapasztalta grafikus fellet szvegszerkesztkkel. Egyszer oldalak elksztshez ebben a nzetben egyltaln nem kell s nem is lehet HTML kdot hasznlni. Mivel az NVU egyik erssge, hogy meglehetsen knnyen olvashat s tiszta kdot generl az elmentsre kerl oldal ebben a nzetben is megfelel lehet. A szveg stlust (font tpusa, mrete, irnya, pozcija, szne, stb.) az eszkztr segtsgvel ill. a Formtum men pontjainak segtsgvel knnyen szemlyre lehet szabni. Kpeket, hivatkozsokat, klnleges karaktereket, tblzatokat, rlapokat, stb. a Beszrs men pontjai tesznek knnyen elrhetv s szerkeszthetv, amelyek egy rszre a ksbbiekben rszletesebben kitrnk. A HTML nzet teljes elnevezse Minden HTML elem megjelentse leginkbb a Windowsra kszlt Adobe GoLive-bl lehet egyesek szmra ismert. Ez a nzet gyakorlatilag egy tmenet a Norml nzet s a Forrs nzet kztt. Az oldal egyes elemei (szveg, kp, hivatkozs, stb.) kztt grafikus elemek jelzik az egyes rszek hatrait ahogy az a 2. bra kzps kpn is lthat.

A szerkeszt

www.linuxvilag.hu

2005. december

51

Grafika, multimdia, szrakozs

Kiskapu Kft. Minden jog fenntartva

3. bra Helyi men az llapotsorban

A Forrs nzet pldul a 2. bra als rsze egy olyan szerkesztsi nzetet szolgltat, amely leginkbb a profi felhasznlk szmra otthonos terlet. Ebben a nzetben a kszl lapunk teljes forrskdjt lthatjuk s szerkeszthetjk. A szerkesztst az NVU ebben a nzetben a HTML szintaxiselemek kiemelsvel segti. Brmely nzetben nagy segtsg lehet a szerkeszts sorn a Szerkeszts men Helyesrs-ellenrzs menpontja, amivel knnyen elkerlhetk a gyakran nagyon zavar helyesrsi hibk. Fontos, a gyors munka szempontjbl egyik kimagasl eszkz az, hogy az oldal egy adott rszn llva a kurzorral az NVU sttusz-sorban lthatjuk az oda vezet utat az oldal HTMLelemeinek hierarchijban. Ami ennl is fontosabb, hogy adott hierarchiaelemre jobb egrgombbal kattintva egy loklis mdost men lp el, amelynek segtsgvel gyorsan tudunk loklis paramtereket vltoztatni (3. bra). Az Elnzet mdban az NVU lehetsget ad arra, hogy kls alkalmazs indtsa nlkl megtekinthessk a kszl oldalunkat. Sajnos egyelre az NVU nem tartalmaz gynevezett automatikus kiegszts (autocomplete) funkcit, vagyis az ppen bert HTML parancsok bers kzbeni felismersre s automatikus kiptlsra, de remlhetleg ez a funkci s beptsre kerl a jvben, hiszen nagyban megknnyten a Forrs nzetben vgzett munkt. A tovbbiakban nhny fontos elem beillesztsi lehetsgeit mutatjuk be. Ennek a bemutatnak nem clja

4. bra Tblzat belltsai

a HTML nyelv bemutatsa, gy a konkrt HTML parancsokra csak akkor trnk ki, ha felttlenl szksges.

Weboldalak gyakori elemei a tblzatok. Nagyon sokrten hasznlhatk, az egyszer adat-reprezentcitl teljes oldalak szerkezetnek felptsig. Az NVU knnyen kezelhet tblzatbeszrsra ad lehetsget. Tblzatokat a Tblzat->Beszrs menpontban tudunk beilleszteni a dokumentumunkba. Beszrs eltt s utn is lehetsgnk van a tblzat paramtereit tetszs szerint belltani, ahogy azt a 4. brn lthatjuk. Halad szerkeszts-t vlasztva halad felhasznlknak lehetsge van arra, hogy minden lehetsges paramtert kzzel belltson. Ezt termszetesen a Forrs nzetben is megtehet, de ez a mdszer egy ttekinthet, knnyen kezelhet felletet biztost ehhez a feladathoz, megknnytve a halad felhasznlk munkjt is.

Tblzatok

rlapok

rlapok (form) hasznlatra is gyakran szksg lehet. Az rlapok lehetsget biztostanak arra, hogy a weblapot ltogatk adatokat kzlhessenek, kldhessenek el, amelyeket a weboldal tulajdonosa felhasznlhat, pldul fel-

hasznlk regisztrlsa, vendgknyvek, stb. esetn. Az NVU-ban rlapok kezelsre is van lehetsgnk, a tblzatok kezelshez hasonl knnyedsggel. Erre a Beszrs->rlap men, ill. az eszkztr rlap eszkze biztost lehetsget. Az rlapkezelst egy egyszer pldn keresztl mutatjuk be. Vltsunk a plda kedvrt a HTML elemes nzetre. Az rlap->rlapkszts-t kivlasztva hozzunk ltre egy Adatok nev rlapot, mveleti URL-nek adjunk meg pldul feldolgoz.php-t ez lenne egy sajt szkript, ami ksbb feldolgozn a berkez adatokat , mdszernek postot vlasztva. Az rlap->rlapmez-t vlasztva szrjunk be kt bekrsi mezt, egyet a felhasznl nevnek, egyet pedig a cmnek. Meztpusnak vlasszunk szveg-et, Meznv-nek adjunk Nev es Cim neveket az els ill. a msodik esetben, Maximlis hossz-nak pedig lltsunk be 256 karaktert, ebbe valsznleg minden belefr. Ezek utn szrjunk be egy gombot, amire kattintva az rlap tartalma elkldsre kerl, az rlap->Gomb beszrsa menpont segtsgvel, a gomb Tpus-nak elklds-t vlasztva. Az aktulis helyzetet a 5. bra mutatja. A fenti pldban egy kls PHP szkriptre hivatkoztunk azzal, hogy az

52

Linuxvilg

Grafika, multimdia, szrakozs

Kiskapu Kft. Minden jog fenntartva Egyb elemek beillesztse

5. bra rlap ltrehozsa: rlap (bal fels), szveges beviteli mez (jobb fels), gomb, s az aktulis llapot HTML elemes nzetben (als)

Az elzekben mg nem ejtettnk szt kpek beszrsrl. Kpek beillesztsre a Beszrs->Kp menpont ad lehetsget. Ezt kivlasztva egy olyan dialgus-ablakot kapunk, amelyben minden kp-tulajdonsgot knnyen bellthatunk. A dialgus ablak ngy flecskje (Hely, Mretek, Megjelens s Hivatkozs) tartalmazza csoportostva a kpi paramtereket. A Hely flecskvel megadhatjuk a beilleszteni kvnt kpet, a Mretek-ben a kp megjelentsi mreteit, a Megjelens-ben megadhatjuk a kp krli szveg viselkedst pldul a kp krli trkzk, hogyan fusson a szveg a kp krl , a Hivatkozs lapon bellthatjuk, hogy a kpnk legyen-e hivatkozs is egyben s ha igen, akkor hova mutasson ez a hivatkozs. Termszetesen Halad szerkeszts-t vlasztva itt is szabad kezet kapunk minden lehetsges paramter belltsra. Ahogy mr az elzekben emltettk, lehetsgnk van PHP kd beillesztsre is, a Beszrs->PHP kd menpontban. Hasonl mdon kls forrsbl szrmaz HTML kdot is beilleszthetnk a dokumentumba a Beszrs->HTML menpont segtsgvel. Ezeken kvl klnleges karaktereket s szimblumokat is beilleszthetnk. A fentiek mellett az NVU lehetsget ad JavaScriptben rt gynevezett Okos felleti elemek (a Beszrs menben) beillesztsre is. Pldaknt az NVU tartalmaz egy naptr elemet, s egy Made with NVU - NVU-val ksztve gombot, amit beilleszthetnk.

6. bra PHP kd begyazsa a kszl dokumentumba. Fent: Beszrs->PHP kd, als jobb: eredmny HTML elemes s (als bal) Forrs nzetben

adatok feldolgozst majd az vgzi. Az NVU nem ad tmogatst PHP szerkesztshez, gy ezt a szkriptet magunknak kell ltrehoznunk ennek megrsra ebben az rsban nem trnk ki. Azonban az NVU lehetsget biztost PHP kd beillesztsre

a kszl dokumentumba, a Beszrs->PHP kd menpont segtsgvel. Egy egyszer PHP fggvnyhvs begyazsra mutat pldt a 6. bra. A tovbbiakban ms szkriptek ill. egyb kls elemek begyazsra adunk tmutatst.

A CSS a Cascaded Style Sheet rvidtse, ami egy stlus-ler nyelv. A CSS lehetv teszi olyan weboldalak ltrehozst, amelyekben a tartalom s a megjelents klnvlik, gy knnyebb tve a fejlesztst s a ksbbiekben a klalak megvltoztatst a tartalom vltoztatsa nlkl. Manapsg mr majdnem minden bngsz tmogatja a CSS-t valamilyen szinten, az eltrsek az egyes CSS elemek mennyisgnek tmogatsban illetve a tmogatott CSS verzi miatt szlelhetk. Ma mr a webfejlesztk tbbsge beltja a CSS stluslapok hasznlatnak elnyeit, gy fontos tulajdons-

CSS

www.linuxvilag.hu

2005. december

53

Grafika, multimdia, szrakozs

ga az NVU-nak az, hogy nem amellett, hogy lehetsget ad CSS elemek beptsre a dokumentumba, egy CSS szerkeszt dialgust is tartalmaz, amellyel a kezd felhasznlk s sokszor a haladk is egy olyan eszkzhz jutnak. Ez nagyon sok esetben megknnytheti s felgyorsthatja a munkt. A CSS szerkeszt az Eszkzk->CSS szerkeszt menpont alatt rhet el. A CSS elnyeinek bemutatshoz rvid pldaknt egy CSS alap ment mutatunk be. Ennek alapja az, hogy az egyszer felsorols HTML elemeinek (ul, li) stlusait megvltoztatjuk gy, hogy egyszer egymsba gyazott felsorols helyett menknt jelenjenek meg. A plda mennk Norml s HTML nzetben a 7. brn lthat. A stluselemeket egyarnt szerkeszthetjk a CSS szerkeszt segtsgvel (8. bra), vagy kzzel a Forrs nzetben (9. bra).

Kiskapu Kft. Minden jog fenntartva

7. bra A CSS-alap plda-mennk Norml (bal) s HTML (jobb) nzetben

Az NVU-hoz lteznek gynevezett kiterjesztsek (extension). Ezek olyan kiegsztsek, amelyeket brki megrhat, majd beilleszthet az NVU-ba. Ennek a mdszernek a mintja a Mozilla illetve a Firefox bngszk kiegsztskezelse, lvn, hogy az NVU az ezek ltal hasznlt Gecko knyvtrakra pl. NVU-ban kiterjesztseket az Eszkzk->Kiterjesztsek menponttal tudunk telepteni. Itt kt kiegsztsrl ejtnk szt. Az egyik a lokalizcis kiegsztsek, pldul a magyar nyelvi lokalizci is egy ilyen kiegsztssel telepthet. A msik kiegszts, amelynek itt helyet adunk lehetsget ad NVU felhasznlk szmra, hogy a mltn elhreslt Mambo (illetve j nevn Joomla) tartalom-kezel portlrendszerhez sablonokat (template) illetve tartalmat ksztsen. Ennek neve Mambo template builder. Telepts utn az NVU eszkztra szmos j eszkzzel bvl (10. bra), amelyek segtik a Mamboval a template-ek ksztst.

Kiterjesztsek

8. bra A CSS-alap plda-mennk paramtereinek szerkesztse a beptett CSS szerkesztvel zott s/vagy mdostott oldalakat feltltsk a webszerverre, ahonnan majd publikusan elrhet lesz. A webhelyek szerkesztse gombra kattintva a 11. brn lthat dialgus ablak lp el. Itt bellthatjuk a webszerver elrsi adatait, cmet, belpst. Ksbb, amikor a Kzzttel eszkzt hasznlva feltltjk az elksztett oldalakat, az itt belltott elrst hasznlva trtnik a feltlts (12. bra). Ahhoz, hogy ezt az eszkzt hasznlni tudjuk FTP szint elrsre van szksg a webszerverhez, vagy a webszolgltatnkhoz. Sajnos az NVU jelenleg nem tmogat titkostott fjl-tviteli protokollokat (scp, sftp), remlhetleg a jvben vltozni fog.

Publikls, fjlkezels

Ahogy azt az elbbiekben mr emltettk, az NVU-ban rendelkezsre ll egy publikl/kzzttel eszkz, amely megknnyti az oldalak menedzselst, s lehetv teszi, hogy egy kattintssal (Kzzttel eszkz) a ltreho-

Ebben a meglehetsen rvid gyorstalpalban megprbltunk betekintst adni az NVU lehetsgeinek s eszkzeinek vilgba. Taln sikerlt egy olyan ingyenes s nylt forrskd eszkzt megismertetnnk az olvasval, amely ezltal mg szlesebb krben elterjed. Termszetesen az elterjedsnl fontosabb, hogy hasznos eszkzv vlhasson a webszerkeszt trsadalomnak, s remljk, hogy ez a rvid ismertets elg bepillantst nyjtott ahhoz, hogy esetleges hasznossgrl az olvas legalbbis elgondolkodjk. Vgszknt rviden azon idznnk el egy keveset, hogy milyen j s rossz tulajdonsgokat tudunk az NVU

Vgsz

54

Linuxvilg

Grafika, multimdia, szrakozs

Kiskapu Kft. Minden jog fenntartva
a webes kzzttel eszkz is. A tbbfle nzetes szerkeszt fellet szintn a j tulajdonsgokat gazdagtja. Ezek mellett nagyon fontos pozitvum, hogy egyrszt ingyenes s nylt forrs az alkalmazs, msrszt hogy Windows, Linux s MacOS opercis rendszerekre fordtott vltozat is elrhet. A kedves olvasnak kellemes webszerkesztst kvnunk az NVU-val! 9. bra A CSS-alap plda-mennk forrsa Forrs nzetben
Kovcs Levente (leventek@gmail.com) 26 ves, informatikuss villamosmrnk. Jelenleg doktorandusz a Veszprmi Egyetem Kpfeldolgozs s Neuroszmtgpek Tanszkn. Hat ve hasznl klnfle Linux disztribcikat.

KAPCSOLD CMEK
Az NVU honlapja: http://www.nvu.com A Mozilla honlapja: http://www.mozilla.org

A Macromedia honlapja: http://www.macromedia.com GNU GPL: http://www.gnu.org/copyleft/ gpl.html 10. bra A Mambo template builder eszkztrai mellett s ellen felsorakoztatni. Kezdjk a rosszakkal. Szmos webszerkeszt hinyossgnak tlheti azt, hogy keretek s keretcsoportok (frame, frame-set) kezelse hinyzik az NVU-bl. Viszont ezt a tulajdonsgot a szerz ppen ellenkezleg, elnynek tekinti. Ennek oka az, hogy az j, elterjed HTML szabvnyok (XHTML 1.x strict/transitional) mr nem tmogatjk a keretcsoportok hasznlatt. A frame-set-ek klalakjt s viselkedst teljes egszben reproduklni tudjuk CSS stluslapokkal s a szabvnyok kvetse rdekben ezt is javasolt tennnk. A htrnyok ill. hibk kz kell sorolnunk azt, hogy az NVU hajlamos arra, hogy esetenknt figyelmen kvl hagyja a belltsoknl tett azon kvnsgunkat, hogy ne formtumozza jra a (X)HTML forrst mentskor, aminek esetenknt az az eredmnye, hogy jratrdeli a forrsokat. Ez ltalban nem problma, de mivel sok fejlesztnek fontos a jl olvashat (X)HTML forrs, ez mindenkpp htrny. A HTML parancsok szn-kiemelse is lehetne sokkal jobb, ami segten a forrs-szerkeszts hatkonysgt. A rossz dolgok utn trjnk r a pozitv tulajdonsgokra. Mindenkppen pozitvum az, hogy dokumentumltrehozskor a HTML, XHTML, Strict/Transitional DTD vlasztsi lehetsgek szleskr szabad kezet adnak. Nagyon fontos pozitvum a beptett CSS szerkeszt, mint ahogy

A Linspire honlapja: http://www.linspire.com

HTML4: http://www.htmlhelp.com/ reference/html40/ PHP: http://www-php.net

Magyar Mozilla Projekt NVU oldala (magyar nyelvi fjlok): http://www.fsf.hu/nvu.html

XHTML1: http://www.w3.org/TR/xhtml1/

JavaScript: http://www.w3schools.com/js/ default.asp

CSS: http://www.w3schools.com/css/ default.asp Mambo: http://www.mamboserver.com

NVU Mambo sablonkszt: http://www.open4g.com

www.linuxvilag.hu

2005. december

55