Hirdetés

Az iWeb fejlesztői szemmel

Azt hiszem, nem titok, hogy a webfejlesztők többségének feláll a szőr a hátán a "WYSIWYG editor" kifejezés hallatán. Noha megvannak ezeknek a programoknak a maga előnyei - nevezetesen, hogy nem kell értenie a webes programnyelvekhez annak, aki az oldalt készíti - a módosítások után forráskódban maradt kódtöredékek igen fájdalmassá tudják tenni egy ilyen generált oldal ráncba szedését, ha mondjuk később valakit az a megtiszteltetés ér, hogy átveheti egy ilyen oldal további fejlesztését.

Az iWeb könnyen kezelhető, felhasználóbarát mivoltáról már remek cikkek születtek az Almalap hasábjain, ezért úgy gondoltam, megnézem az iWebet a másik oldalról is. Feltettem magamnak a kérdést: örülnék-e annak, ha egy ilyen oldalt kellene a továbbiakban karbantartanom. Gyorsan felpakoltam az iLife ´06 csomagot, összeraktam egy alap weboldalt, majd szemügyre vettem, hogy mit is sikerült alkotni. Bevezetésként csak annyit, hogy a modern webdesign egyik fontos törekvése, hogy a weboldal tartalmát elkülönítse a weboldal megjelenésétől. Ezt háromféleképpen teheti meg:
  1. Magába az adott elembe írja be az elem tulajdonságát a style kulcsszó használatával, ez az inline CSS. Hátránya, hogy csak az adott elemre vonatkozik, és ha ugyanazon az oldalon még egy ilyen stílusú elemet szeretnénk létrehozni, abba is bele kell másolni a stílus kódját. Ha változtatni szeretnénk, valamennyi elemben át kell írni a kívánt értéket.
  2. A honlap fejrészében létrehoz egy stílus-definíciós részt, és itt adja meg az elemek tulajdonságait, ez az embed CSS. Hátránya, hogy csak az adott oldalra vonatkozik, és a változtatások is csak az adott oldalon jelennek meg.
  3. Létrehoz egy külső stíluslap dokumentumot, amit hozzákapcsol az egyes oldalakhoz, ez a linked CSS. A stíluslapban létrehozott változtatások valamennyi oldalon azonnal megjelennek. A CSS segítségével formázott weboldalak kódja könnyen áttekinthető és értelmezhető, nincsenek benne felesleges információk, az oldal gyorsan letöltődik.
Az első benyomás pozitív volt, ugyanis az iWeb táblázatok helyett CSS-t használ a layout kialakításához, és alapból UTF-8 karakterkódolást alkalmaz, ami azt jelenti, hogy nagy valószínűséggel nem lesznek ékezetproblémák az oldalon. Aztán még egyszer rápillantva a kódra, és megnézve azt a mappát, ahová publikáltam az weblapot, ez a kezdeti megelégedés végképp messze tűnt.

A honlapom négy oldalból állt, melyeket az iWeb olyan rendkívül informatív, könnyen azonosítható neveken mentett el, mint például E3AC45B7-6F1A-4F29-8E86- 9EFDF70F8523, ami a képek oldalát jelentette. Valamennyi oldalhoz létrehozott "oldalnév_ files" elnevezésű mappát, ahová elmentette többek között az oldalon megjelenő szöveges navigációs linkekből generált .png típusú képeket.

<div style="text-align: center; "><div style="margin-left: auto; margin-right: auto; overflow: hidden; position: relative; background: transparent url(Images/pinstripe_bk_tile.jpg) repeat scroll top left; height: 806px; width: 700px; " id="bodyContent"><div style="height: 61px; left: 0px; position: absolute; top: 0px; width: 700px; " id="nav_layer"><div style="background: transparent url(Images/leather777-1.jpg) repeat scroll top left; border: 1px #000000 none; float: none; height: 61px; left: 0px; margin: 0px; position: absolute; top: 0px; width: 700px; z-index: 1; "><div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_separator_0.png) no-repeat scroll center; height: 61px; left: 130px; position: absolute; top: 0px; width: 10px; z-index: 1; " id="id1"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_separator_1.png) no-repeat scroll center; height: 61px; left: 310px; position: absolute; top: 0px; width: 10px; z-index: 1; " id="id2"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_separator_2.png) no-repeat scroll center; height: 61px; left: 410px; position: absolute; top: 0px; width: 10px; z-index: 1; " id="id3"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_active.png) no-repeat scroll center; height: 69px; left: 7px; position: absolute; top: -3px; width: 132px; z-index: 1; " id="id4"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE-41CB84E34562_files/ navbar_0_normal.png) no-repeat scroll center; height: 61px; left: 136px; position: absolute; top: 0px; width: 177px; z-index: 1; " id="navbar_0_normal"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_0_rollover.png) no-repeat scroll center; height: 72px; left: 136px; position: absolute; top: -3px; visibility: hidden; width: 182px; z-index: 1; " id="navbar_0_rollover"></div> <a style="display: block; height: 61px; left: 140px; position: absolute; top: 0px; width: 170px; z-index: 2; " onmouse-out="NBmouseout('0');" href="51F5DC53-DA63-4673- 888E-ED9BB2528A4A.html" on-mouseover="NBmouseover('0');"></a><div style="background: transparent url(DD3222EA-D239-4B9E-A6EE-41CB84E34562_files/navbar_1_normal.png) norepeat scroll center; height: 61px; left: 316px; position: absolute; top: 0px; width: 98px; z-index: 1; " id="navbar_1_normal"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_1_rollover.png) no-repeat scroll center; height: 72px; left: 316px; position: absolute; top: -3px; visibility: hidden; width: 102px; z-index: 1; " id="navbar_1_rollover"></div> <a style="display: block; height: 61px; left: 320px; position: absolute; top: 0px; width: 90px; z-index: 2; " onmouse-out="NBmouseout('1');" href="E3AC45B7-6F1A-4F29- 8E86-9EFDF70F8523.html" on-mouseover="NBmouseover('1');"></a><div style="background: transparent url(DD3222EA-D239-4B9E-A6EE-41CB84E34562_files/navbar_2_normal.png) norepeat scroll center; height: 61px; left: 416px; position: absolute; top: 0px; width: 81px; z-index: 1; " id="navbar_2_normal"></div> <div style="background: transparent url(DD3222EA-D239-4B9E-A6EE- 41CB84E34562_files/navbar_2_rollover.png) no-repeat scroll center; height: 72px; left: 416px; position: absolute; top: -3px; visibility: hidden; width: 84px; z-index: 1; " id="navbar_2_rollover"></div> <a style="display: block; height: 61px; left: 420px; position: absolute; top: 0px; width: 72px; z-index: 2; " onmouse-out="NBmouseout('2');" href="Blog/Blog.html" onmouseover="NBmouseover('2');"></a></div> </div>

Eme abszurditásnak érzékeltetésére beírok egy rövid kódot, hogy hogyan írnám meg a felső navigációs menüsort kézzel:
<div id ="navbar">
<ul>
<li><a href="">Üdvözlet</a></li>
<li><a href=""">Bemutatkozás</a></li>
<li><a href="">Képek</a></li>
<li><a href="">Blog</a></li>
</ul>
</div>

Az iWeb által generált navigációs kód az előző oldal felét befedő HTML-kód. Az oldal stíluselemeit nem egy külső stíluslapba gyűjtötte össze, hanem hasonlóan esze ment nevű CSS fájlokba, rögtön négybe, plusz a blog oldalához is hozzáadott még két stíluslap fájlt, amelyek azonban üdítő kivételként az archive.css és a blog.css neveket viselték. E rengeteg külső stíluslapfájl mellett azonban valamennyi <div> tag tulajdonságait beleírta az adott tag-be, ami nem sokat könnyít a kód olvashatóságán, ráadásul ebben az esetben miért van szükség külső stíluslapokra?

A stíluslapok tartalma között nagyon nagy az átfedés, gondolom, ez abból adódik, hogy meghagyták a felhasználónak a lehetőséget, hogy akár eltérő sablon alapján létrehozott oldalt illesszen be az projektjébe. Ezzel a lehetőséggel valószínűleg nem élnek olyan sokan, hiszen így pont az oldal egységes megjelenése veszne el, ám így az ugyanolyan oldalakra vonatkozó stíluslapok felesleges adatduplikációt eredményeznek. Az iWeb weblapjai nagyon szépek, a program nagyon könnyen használható, az én szememnek is jólesik a Made on a Mac felirat, de a forráskód nézegetését csak különösen mazochista webfejlesztőknek ajánlom.

Esőjáró

A lap tetejére


Alkalmazás cikkeink 2006-ban