A webgrafika gyakorlati megvalósítása Grafikából szabáványos CSS és XHTML sablon

Átírás

1 Már régóta ígérgetem a cikket, amiben leírom opendir design cseréjét, de ebből már nem lesz semmi. Mivel elfelejtettem már a dolgot, ezért inkább elkezdem részletesebben előröl. A cikksorozat első részében néhány pontban a tervezés elméleti részéről lesz néhány gondolat. Utána svájci bicskát rántunk és megrajzoljuk GIMP-ben. Majd mint egy levezetésképpen összerakjuk a kész weboldal sablonját CSS és XHTML módon. Természetesen a végterméket bárki felhasználhatja, szabadon. A webgrafika gyakorlati megvalósítása Grafikából szabáványos CSS és XHTML sablon Mielőtt bármilyen rajzolásba kezdenénk, néhány kérdésre meg kell találnunk a választ: Mi a célunk az oldallal most és a jövőben Monitorfelbontás, web-design széllessége Színek kiválasztása Elrendezés és megvalósítás Fejlécek, láblécek, oldalsávok Reklámok és űrlapok a sablonon (kereső, belépés..) Menük elhelyezése Látogatók száma és optimalizálás Kütyük Ötletelés ERROR( M;T ) A tervezés folyamatában eldöntendő kérdések: Mi a célunk a weboldallal? Fontos eldönteni rögtön az elején, mi a célunk a weboldalunkkal, vagy az új megjelenéssel. Ha marketing céljaink vannak a honlappal, vagyis szeretnénk egy kis népszerűségre szert tenni (kereső és látogatói oldalról), akkor érdemes tovább olvasni a leírást. Ezzel együtt a tervezés, megvalósítás és teszt időszakokban folyamatosan arra törekedjünk, hogy kezdő felhasználókat se riogasson az oldal. Nagyon hasznos Link a témakörben: Céges honlapok tervezési tévedések: Ha viszont csak az vezérel bennünket hogy a mi honlapunk legyen a legszebb, leginteraktívabb ahol még az egérkurzor is zászlóként lengedezik, komoly zenei aláfestés közepette, azzal valószínű marketing szempontból rögtön az elején megástuk a weboldal sírját. (Brávó) (Ez nem vonatkozik egy márka vagy egy önálló termék bemutatására, ott kifejezetten hasznos lehet) Bár manapság már a keresők indexelik az animációs tartalmakat is, de ezeket a tartalmakat nem kis csapás naprakészen tartani, ráadásul az effekten kívül szinte semmi haszna a legtöbb esetben. Valószínű hogy ez a rész X időn belül már nem állja meg a helyét (lásd: SecondLife, Lively), de most ban még ez a pálya. Hallottam

2 Valószínű hogy ez a rész X időn belül már nem állja meg a helyét (lásd: SecondLife, Lively), de most ban még ez a pálya. Hallottam már saját fülemmel olyat, hogy a megrendelő az új honlapjának az elkészültét tűzijátékkal szerette volna mindenkivel tudatni. (Értsd: Intró oldalon mindenkit egy tűzijáték fogadott volna, megfelelő csinnadrattával. Annyira aranyos volt, olyan jót mosolyogtam magamban, hogy már csak ezért is majdnem elkészítettem. A félreértések elkerülése végett, nekem tetszenek ezek a dolgok mert nagyon vágányok, viszont a megfelelő helyen, időben és mennyiségben. A másik tévedés az, mikor a céges weboldalt maga a tulaj szeretné elkészíteni, mert csak lementem Wordben és hurrá. Igen tényleg csak ennyi, mi is így csináljuk.. A második pont ahol megástuk a sírját a weboldalnak. Van egy olyan ügyes titkárnőm, olyan szépeket rajzol, ő fogja elkészíteni a cégünk webes megjelenését (Mi az a kezeden kosz? Á nem csak pixeles lett.). De már kész is van.. die( ); A látogatóink mekkora monitorfelbontást használnak Kapásból az ember le is hidalhatna ennél a kérdésnél, de szerencsére rengeteg statisztikai adatot találunk Interneten erről. Ha már működik az oldalunk akkor a Google Statisztikai rendszerében erről is szerezhetünk információt. De miért is kell nekünk ez az információ? Az új külsőnél fontos, hogy a lehető legtöbb látogató kényelmesen, mindenféle scrollozgatás nélkül megtekinthesse a weboldalunkat. Esztétikailag is elég gázos egy Frame-es, félig szétesős, tologatós oldal. Régebben a honlapokat általában ~780 pixel körüli szélleségre tervezték, ez már több okból is kicsinek és indokolatlannak tűnhet. Egyre több Videó és reklám anyag jelenik meg a weboldalakon, a monitorok méret (15 22 ) növekedett így van elég helyünk egy nagyobb design megjelenítésére. Tehát a jelenlegi ideális méret amit bátran használhatunk az az 1024 pixel környéke. A végleges méreteknek ezeknél kisebbnek kell lennie px a grafika széllessége ne haladja meg az pixelt, inkább kisebb legyen 780 px a grafika széllessége pixelt ne haladja meg Milyen platformról nézik a legtöbben az oldalunkat Színek kiválasztása

3 Bármennyire furcsa a weboldal grafikában alkalmazott színeknek is nagy jelentősége van. Érdemes több időt eltölteni ennél a résznél, Interneten számtalan színséma található. Ha a kiválasztott színsémához ragaszkodunk a honlapunk megjelenítési részeinél (Linkek, szövegek, kiemelések, dobozok, doboz címek, felsorolások, ikonok), akkor egyfajta harmónia fog tükröződni már első ránézésre is. Látogatókra gyakorolt hatás Színek és az üzlet Megjelenítéssel kapcsolatos kérdések (sztenderd (rendszer) színek használata, vagy egyéb) Megvalósítási kérdések: Grafikai elem, CSS, CSS-el megjelenített grafikai elem Interneten fellelhető színsémák, segédletek Néhány link a segédletek kereséséhez Elrendezés és megvalósítás kérdése A grafika tervezése közben figyelembe kell venni néhány szempontot amit a összerakásakor lehet hasznos. Vannak megjelenítési módok, amit kifejezetten nehéz megoldani úgy, hogy minden böngészőben azonos képet kapjunk, ráadásul a hactivityk miatt nőni fog a letöltési idő. Ebben az esetben el kell készíteni a különböző böngészőkre vonatkozó stílus beállításokat is. Mennyivel egyszerűbb volna az életünk ha a Firefox volna az egyetlen böngésző (40% hajrá), de ez nem így van. Figyelembe kell vennünk az alábbi böngészőket: IE6, IE7 A legtöbb fejtörést ezek okozzák Firefox de szép volna Opera Safari Konqueror Links2 érdemes megnézni szöveges módban mennyire navigálható az oldalunk, a keresők is valami hasonlót látnak Tesztelésükre Interneten on-line eszközöket is találhatunk. A praktikusabb elrendezés ha kocka formákban gondolkozunk, így a legkevesebb a haszontalan, kieső terület. Az íves megoldások szépek, de elég sok holtterületet eredményeznek. A megoldás valahol a kettő között van. (maradj az úton) Bármilyen elrendezést is választunk, ennél a résznél már figyelembe kell venni a bennük elhelyezendő tartalom szélleségét, milyenségét, az alkalmazott képek nagyságát. A későbbiekben sok macerától kíméljük meg magunkat, ha az elrendezésnél már betervezzük a reklámok, animációk, dobozok, címsávok, grafikai elemek helyét és méretét. Táblázatos design (table tr td etc..): Fú ez már nagyon gáz, ez tényleg felejtős weblapsablon összerakáshoz. Pedig még mindig találkozni néhány ilyen elvetemült honlappal. Ingyenes sablonok: Ingyenenes CSS és XHTML sablonok Fejlécek, láblécek, oldalsávok Nekem személy szerint tetszenek a nagy és szép fejlécképek (bevallom néhányszor bele is estem ebbe a hibába, cseresznyefa koromba), de igazából azonkívül hogy szép inkább csak zavaró. Mikor egy honlap úgy kezdődik hogy 550 pixel magas fejléc kép és görgetni kell mindig, hogy a tényleges tartalmat megtaláljuk, hát nagyon fontos kell hogy legyen ha folytatom a látogatást. A fejléc és a lábléc területek nagyon fontosak, tényleg komoly funkcionalitás lehet plántálni viszonylag pici területre is, anélkül hogy az domináljon az egész honlapon. A weboldalunkra gondoljunk úgy mint egy szuper asztali alkalmazásra amit bárki pillanatok alatt megtanulhat használni, nem kell hozzá tanfolyást végezni. Amitől valójában nem is vagyunk messze hála web 2.0-nak.

4 Fejléc: Lábléc: Férjünk bele pixeles magasságba Ha nem ruházzuk fel extra funkciókkal (kereső, stb..) akkor 100 pixelnél nagyobb ne legyen, ide úgy is a kapcsolati és egyéb információs linkek kerülnek. Oldalsávok: Ne legyen túl keskeny, mert nyomorultul néz ki a hosszú címek, menük sortöréssel történő megjelenítése, viszont ne nyomja el a tartalmi részeket. Ha tanácstalanok vagyunk, keressünk rá a 960 Grid System, Layout Grid kifejezésekre. Reklámok és űrlapok az sablonon (kereső, belépés..) A honlapon elhelyezendő dobozokat, űrlapokat jó időben be kell tervezni. Később ezeket elég nehézkes bele bútorozni a kész oldalba. Mikor a grafikát rajzoljuk, ezeket az elemeket el kell helyezni rá. Menük elhelyezése Fontos hogy a menüt a felhasználó kapásból megtalálja, ezért érdemes feltűnő helyre cuccolni. Az oldalon található menüket ne duplikáljuk, ugyanarra az oldalra nem mutasson más néven link. Lehetőleg szöveges menüt használjuk, mert azt mindenki látja és indexelheti. A tipográfiai kérdések egy külön fejezet volna, viszont a oldalon van egy nagyszerű cikk sorozat példákkal ebben a témakörben. Web Tipográfiai: Látogatók száma és komponensek optimalizálása Azért az ember ki tudja kalkulálni, milyen látogatottságra számíthat (jön-e a Google forgalma vagy sem.) a honlapján. Ha kis látogatószámról van szó (céges honlap havi 3, hacsak nem kezdőlap az irodában), akkor nem kell paranoid módon optimalizálni a képeket és fájlokat. Ellenben ha nagyobb látogatottságú honlap boldog tulajdonosai vagyunk, oda kell figyelni komolyan az betöltendő adatok nagyságára. Ehhez mérten a grafikai elemeket, stílust fájlokat, Szkript fájlokat, kódot kegyetlen módon optimalizálni, tömöríteni kell. Megjegyzem profizmusra törekvő, túlbuzgó webmaistró erre is figyelmet fordít, így a felhasználónak picit hamarabb gurul le az oldal. (Igen a mai sávszélleségnél sem árt ha gondolunk erre na meg a szerverre) A menteni kívánt képeket 75% tömörítéssel mentsük ki, ez elfogadható méretet és megjelenést ad. Ennél kisebb értékeknél már látható változásokra is számíthatunk. Ha lehet kisebb, ismétlődő képelemekből legozzuk össze az oldalunkat. Ezeknek a mérete minimális és kis módosítással többször felhasználhatjuk az oldalon (címsávok, dobozok, sávok, hátterek, ívek, stb..), akár esemény hatására cserélhetjük is őket. A legprofibb webfejlesztő is hajlamos ezeket elhanyagolni, mert lustaság fél egészség. Tekintsük célunknak azt, hogy az egész oldalunk megjelenését 64 K alá szorítjuk. (C=64-en milyen játékok voltak, most meg 1 MB alatt nincs grafika Egyéb kütyük alias csingilingi A csak ami fontos, és segíti a látogatót a honlap használatában. Nem biztos, hogy mindenki Combos gépezettel nézi a kliensoldali scriptekkel megpakolt oldalunkat. Ráadásul egy jól megírt Script is működhet meglepő módon IE-6-ban, hibásan (bocs, ez nem meglepő, sőt az oldal betöltése is sokszorosára nőhet emiatt. Ötletek: Van úgy hogy az embernél beáll az agyhalál és nincs semmilyen ötlete az új megjelenéssel kapcsolatban. Nagyon hasznos, ha ennél a résznél körülnézünk, mik a trendek, egy hasonló témakörű honlap milyen megoldásokat használ. Nem ötlet vagy design lopásra biztatnék senkit, sőt rendkívüli módon elítélem ezt, de kezdőként fontos hogy inspirációt kapjál és közben összeálljon a kép, mit is akarsz. Ha végleg nincs ötleted arra, hogyan legyen egy bonyolult menü, vagy oldal, site struktúra, akkor nézd meg a nagy cégek honlapját (SUN, IBM, stb..). Elmúlt már a lopkodós korszak, ha valamit fel szeretnénk használni, előtte kérdezünk meg az alkotót hogy lehetséges-e. Ez nem kerül semmibe és később rengeteg kellemetlenségtől kímélhetjük meg magunkat. Tiszteljük más munkáját annyira, hogy ha már felhasználtuk a produktumát, tegyük ki a linkjét az oldalunkra, ettől nem leszünk kevesebbek.

5 produktumát, tegyük ki a linkjét az oldalunkra, ettől nem leszünk kevesebbek. Opendir Linkségek 50 szép CSS sablon 2006-ból Néhány gyöngyörű design 2007-ből Felhasználói interfész design Szabadon felhasználható sablonok Web-Design Idea/ Web-design ötletek Error Megrendelői (M) és Tervezői (T) T: Az elkészített designt fizikai lehetetlenség összerakni CSS hekkerek előnyben T: Összerakja gondolkodás nélkül a felvázolt kéréseket Gyors Pénz T: Mr. ART, tesz a szabványokra és tervezési mintákra egyszerűen alkot Na össze tudod rakni? M: A megrendelő szava szent és sérthetetlen Ez igaz, de ismertesd a lehetőségeket M: Adminisztrálható honlap kell Van egy Új munkád M: az elkészült honlap népszerűsítésére se idő sem pénz nincs. Az utolsó frissítés IE. 400 M: Nem veszek design mikor XY Open Source rendszerhez egy csomó grafika letölthető És ez egyedi céges megjelenést biztosít? M: Nem akarom használni a cég zárt forráskódú rendszerét, helyette inkább telepítsenek fel egy XY nyílt forráskódú CMS rendszert. Ez nem baj, de ezeket frissíteni kell, ha ez elmarad, az a baj (törékennyé válhat a rendszer). M: A megrendelő átmegy profi web-designer-be és mivel Basic-ben Commodore-on már profi volt megbírkozik a webfejlesztéssel is Egy próbát megér M: Kész a site, de olyan üres A honlap az elcseszés fázisába került, jöhetnek a mozgó és zenélő alkatrészek Ha találkoztál hasonlóval kérlek írd bele a bejegyzésekbe, had nevessek. hasonló bejegyzés: 1. Weblap grafika tervezése Gimppel Téma: Webalkalmazás fejlesztés Forrás: Szerző: ArtH2O Erdeti URL: