E-mail














 

Honlap, de kinek? - a Dreamweaver MX dícsérete


A cikk írója, Steve Drucker a Fig Leaf Software alapító elnöke. A cég a Macromedia kiemelt partnere, amely macromediás technológiákat oktat nagyvállalati és államigazgatási érdeklődőknek. Kis írásában arra hívja fel a figyelmünket, hogy weboldal készítésekor figyelembe kell venni, ki milyen gépen milyen böngészővel készül megnézni oldalaid. Itt szúrja közbe a fordító, hogy a cikk általában szól e világról, a kimondottan macesek számára honlapot készítők további kihívásoknak állnak elébe. Ha erre kapásból rávágod, hogy ugyan már, hiszen a Microsoft megnyerte a böngészőháborút, mindenki Explorert használ, akkor mindjárt vissza is kérdeznék, oké, de melyiket? Nézzünk pár számadatot! Kattints rá! Kattints rá! (És a két grafikont, amely a legfrissebb webes felmérés eredményeit mutatja. Ám tudjuk, ezek az adatok csak iránymutatóak, és statisztikával bármi és annak az ellenkezője is bizonyítható.)

  • A felhasználók 11,5 százaléka még mindig Internet Explorer 5-öt használ,
  • a felhasználók 8 százaléka tiltja a JavaScriptek futtatását,
  • a felhasználók 53 százaléka 800x600 vagy még kisebb felbontásban nézi a weblapokat,
  • kétmillió államigazgatási alkalmazott hivatalos böngészője a Netscape 4.x (elmaradt Amerika, mi? - kacant a Gonosz Almalap),
  • a Microsoft felhagyott az Explorer Mac platformos fejlesztésével, ez a piac a Netscape-é és az Apple Safarijáé lett,
  • az Opera Európában egyre elterjedtebb,
  • egyre többen kézi számítógépen böngészik a netet.
A még frissebb adatok megtalálhatók a Browser Statistics oldalon.

Aki mindenki számára elérhető honlapot kíván felépíteni, figyelembe kell vegye az eltérő platformokon működő számtalan böngészőt, a változó képernyőméretet és más szempontokat is. Következzen tíz jó tanács azoknak, akik belevágnak.

1. Használj XHTML kódot!
Az XHTML az XML és a HTML ötvözése, amely feszesebb szintaktikát jelent - például minden esetben megköveteli a lezáró tageket és az egyes tagek esetében kötelező paramétereket állapít meg. Az XHTML használata megvéd attól, hogy egyes kényes böngészők szétdobják vagy ne jelenítsék meg rendesen az oldalad. A Dreamweaver MX 2004-gyel oldaladat egy kattintással XHTML-esítheted, alkalmazd a File > Convert > XHTML parancsot!

2. Használd ki a CSS lehetőségét!
A CSS (Cascading Style Sheets - egymásba ágyazott stílus) az oldalon megjelenő szövegek kinézetére vonatkozó utasításokat (betűtípus, méret, szín, háttérszín...) külön állományként tárolja és tölti le az oldal megjelenítéséhez, az oldalállomány nem tartalmaz a szöveg megjelenésére, kinézetére vonatkozó információt. Természetesen a világ bonyolult, ezért a CSS-nek is több verziója használatos. A DWMX Tag Inspector paneljén a Relevant CSS fülecske segít eligazodni ebben a világban.

3. Gyors HTML-CSS ellenörzés
A DWMX - napjaink fejlesztőrendszereihez hasonlóan - képes szintaktikailag ellenőrizni az általunk írt kódot. A Check Browser Support gombra kattintva remélhetőleg egyetlen kódsorod sem vált vörös színűre. ha igen, akkor ott érdemes körülnézni, mert a DWMX valamit hibásnak ítélt. A beállítás részben megadható, hogy milyen előírások betartását szeretnéd ellenőriztetni.

4. JavaScript használata
Már a Dreamweaver 4 (és azóta már 2000 verzió jelent meg, így jutottunk el a 2004-es sorszámig) is számos tesztelt JavaScript programrészletet kínált a fejlesztőknek - a Netscape 4 alatt is működő drag-n-dropot, objektumok felfedését és elrejtését, pop-up hibajelzéseket... A kínálat azóta tovább bővült előre tesztelt és számos platformon működőképes rutinokkal. A DWMX csak azokat a JavaScript rutinokat kínálja fel, amelyek hibátlanul futtathatók az általunk megadott környezetben - keresd ezeket a Code > Snippletsben. A Macromedia folyamatosan bővíti a szkriptlistát, látogass el a Macromedia Excange-re.

5. A CSS-P jobb
Akár hiszed, akár nem, CSS használatával inkább kapsz azonos megjelenést különböző böngészőkben, mint egymásba ágyazott táblázatelemekkel, kitöltő üres gifekkel. A CSS-P(ositioning)-ot már a Netscape 4.x is támogatta. Használata nem csak a kódot teszi áttekinthetőbbé, olvashatóbbá, hanem az elrendezéstervezést is. Jómagam rengeteg idő töltöttem el azzal, hogy kiderítsem, adott ponton melyik táblázat melyik cellájában járok a számtalan, egymásba ágyazott közül. Ennek vége, amióta áttértem a Fireworks alapú munkára - egy helyfoglaló képpel módosítom a kinézetet (View > Tracing Image > Load), majd DWMX-ben behelyezem a végleges képet (Insert > Layout Objects > Layer). Ha minden hibátlanul működik, akkor a CSS fájlba beíródik a megfelelő új információ. Ekkortól bármit módosítok az elrendezésen, az az oldal tartalmát nem érinti, csak a kinézetet vezérlő CSS állományt. A rossz hír, hogy akadnak olyan tartalommenedzselő szoftverek, amelyek nem értelmezik vagy helytelenül kezelik a CSS-P-t, ezért teszteld le rendszered. Ha működik, használd, és bele fogsz szeretni.

6. Hozzáférhetőség
A W3C (World Wide Web Consortium) számos előírást tett közzé, amelyek betartása esetén egy weblap helyesen jelenik meg azokban a böngészőkben, amelyek megfelelnek a nevezett előírásnak - a legtöbb böngésző erősen törekszik erre, hiszen csak így válhat használható eszközzé. Az aktuális előírások elolvashatók a konzorcium weblapján - www.w3c.org -, de a DWMX File > Check Page > Check accessibility parancsával le is ellenőrizheted a megfelelést. A generálódó jelentés hibát jelző sorára kattintva a program a hibásnak minősített kódrészre ugrik, miközben meg is mutatja, mit miért tart hibásnak.

7. Óvakodj a kétértelmű tagektől!
Akadnak a HTML nyelvben böngészőnként eltérően értelmezett tagek. Ilyen például a form is, amely néha néhány pixeles üres területet hoz létre maga körül - nem kis boldogságot okozva a gyanútlan fejlesztőnek. Hasonló a helyzet a képeket határoló üres területtel - hspace és vspace paraméterek. És a lap háttérszínének alapértéke Netscape 4 esetén Silver (azaz szürke), az Explorerben White. A négyes Netscape a frame-eket is rendesen szétdobta, rendszeresen és véletlenszerűen három-négy pixellel a kívánt helytől jobbra vagy balra - esetleg feljebb vagy lejjebb is - voltak, mint a tervezett. A CSS és CSS-P használata megszünteti ezeket a gondokat. Érdemes nagyon odafigyelni a CSS line-hight értékére, egyes böngészők automatikusan 0-tól eltérő értéket tulajdonítanak ennek a változónak, amennyiben nem deklaráltad másképp, így remek keret jelenik meg az érintett objektum körül.
    Úgy vettem észre, hogy sok fejlesztő csupán néhány soron teszteli le a szöveg megjelenését vezérlő utasítást, amely nagyobb szövegblokkokra történő alkalmazásakor - legelrettentőbb példákat a sajtóköltemények képesek okozni - a szöveg csupán a StarTrekben járatosak számára válik kívánatossá. A DWMX a klasszikus Lorem ipsum vakszöveghez hasonló blablát hoz létre hosszabb szöveg látványának tesztelésére a Celestial Babble - letölthető a Macromedia Exchange-ről - kiegészítő progival.

8. Több a kevesebb!
Egy oldal fejlesztése során - különösen, ha többen is részt vesznek benne -, gyakran alakulnak ki "szent tehén" típusú részek, amihez senki sem mer nyúlni, de nem is nagyon világos, miért van ott. Az ilyen kódrészek felkutatására és kisöprésére szolgál a Commands > Clean Up HTML parancs. A Site > Reports utasítással pedig megjelenítheted, hol lehetne a kódot még tömörebbé tenni tagek összevonásával, esetleges üres tagek elhagyásával.

9. Védd, ami kész!
Ha úgy érzed, befejezted alkotói munkád, és tökéletes weboldalt alkottál, akkor tedd annak designját módosítások ellen védetté - erre a DWMX és a Contribute egyaránt alkalmas. A művelet neve template-té alakítás, azaz az oldalból sablon lesz, amit bármikor bárki elővehet, de a tartalmán kívül mást nem tud rajta megváltoztatni - akár akarná, akár csak megesne. További öröm - illetve balesetveszély, hogy a template módosítása magával vonja az összes érintett oldal - sablonra hivatkozók - módosulását. A sablonok alkalmazásának még egy távlati előnye is van, amikor az oldal akkorára nő, hogy tartalommenedzsment életre hívása szükségeltetik, a template-ek segítségével könnyebb az oldalak tartalmát egyszerűbb adatbázisba áttölteni.

10. Egyetlen alkalmat se hagyj ki!
Minél több böngészővel teszteld le az oldalaidat! A DWMX számos böngésző szimulációjára képes - ami azért nem ugyanaz, mint az adott böngészőben látni az oldalt, mutatja a tapasztalat -, alapértelmezetten érdemes az IE 5.0, IE 6, Netscape 4.8, Netscape 7 és Mozilla Firebird tesztelését elvégezni - ha csak nem célfejlesztéssel foglalkozol.

Ez a tíz ötlet csupán irányt adhat ahhoz, hogy remek multiplatformos honlapot alkoss. Javaslom, további ötletekért keresd fel rendszeresen a Dreamweaver Developer Centert a neten!


Steve Drucker


A lap tetejére