Weboldalkészítés sablonok segítségével Nyitrai Erika
2009.11.20.
Miről lesz szó? Mit tehetek, ha szeretnék egy saját honlapot
Nyitrai Erika ELTE IK Algoritmusok és Alkalmazásaik Tanszék
vagy blogot? Mik a főbb problémák? Milyen megoldások születhetnek? Mit találunk a weben?
WEBOLDALKÉSZÍTÉS SABLONOK SEGÍTSÉGÉVEL
Saját honlapot szeretnék…
Saját honlapot szeretnék…
Elkészítem Word-ben, elmentem HTML-ként Elkészítem valamilyen grafikus webfejlesztő
Választok egy barátságos CMS-t Előny
eszközzel, publikálom
Előny Hozzáférhető, könnyen előállítható az oldal Egyszerű design elkészítése nem okoz nehézséget Feltöltöm a tárhelyemre és készen van az oldalam
Hátrány Általában nem szabványos oldalak Nem kereső- és felhasználóbarát oldalak Programozni nehézkes, ha egyáltalán lehet
Megmarad a hozzáférhetőség, általában még mindig
ingyen, és kapok egy használható felületet Választhatok többféle design közül Sok olyan funkció meg van valósítva, amihez programozni,
„webfejleszteni” kellene A funkciók köre többé-kevésbé rugalmasan bővíthető
Hátrány Ha nem tudom kellőképpen testre szabni, tapasztaltabb
szemek gyorsan felismerik az alaprendszert Általában még mindig nem kapok szabványos oldalakat
Saját honlapot szeretnék…
Közös probléma
Megtanulom, hogy hogyan kell…
A webfejlesztés nem csak tanulható
… HTML, CSS, JS, PHP, Flash stb. kódokat szabványosan
előállítani …keresőbarát oldalszerkezetet kialakítani …a böngészők különbözőségéből adódó hibákat kikerülni Ezzel a programozási rész készen van. De a látogató nem ezt látja…
Megtanulom hogyan kell… … designt készíteni … a designt megvalósítani
Azaz egy komolyabb honlap fejlesztéséhez egy
kisebb cég ismereteit halmozom fel
Programozó(k), kreatív munkatárs, designer, grafikus, stb.
Info ÉRA 2009.
programozási technológia Minden esetben szükség van jó designra, ami jó ötletet igényel A design megvalósítása szakértelmet és sok tapasztalatot, türelmet szerteágazó területeken Céges keretek közt ezt mind külön-külön meg is kell fizetni, magáncélú oldalaknál „csak” a befektetett idő a költség
1
Weboldalkészítés sablonok segítségével Nyitrai Erika
2009.11.20.
Megoldási lehetőség
Megoldási lehetőség
A programozást – vagy valami ahhoz közel
A design kialakítására a web kiapaszthatatlan
állót – nem lehet teljesen megúszni, a tartalmakat valahogyan elő kell állítanunk Erre alkalmas lehet akár a szokásos
kódszerkesztőnk vagy egy CMS is Ez végre teljesen tanulható, laikusok számára is használható
forrás Számos különféle sablon érhető el végtelen
számú kategóriában és minőségben HTML-CSS, Flash, CMS-hez integrálható Ingyenesen letölthető, átszerkeszthető (akár
online is), olcsó, drága, akár az egyediség ígéretével A webes sablon mellé itt-ott teljes kisarculatot is találni, ha a cégünk arculatát tervezzük
Mit kell tenni?
HTML+CSS alapú sablon
El lehet dönteni, hogy milyen technológiát
Általában kapunk egy csomagot, benne az
használunk, de egyszerűbb tartalmak esetén a design kialakításának módja is lehet döntő Pl. CMS-t vagy plain HTML-t készítünk Pénztárcától függően ingyenes vagy fizetős megoldások között lehet kutatni Ha megtaláltuk a kiszemelt sablont, akkor jöhet a munka
Inflight
összes alkatrésszel Felhasználási feltételek, jogi nyilatkozat
Szabad felhasználás szerkesztés nélkül, átszerkeszthetően, bővíthetően, stb. Forrásmegjelölés módja, visszajelzés küldése stb. Alap HTML fájl(ok) CSS állomány a stílusokkal Néhány kép, amit a CSS-ben használunk
Sablonok Drupalhoz Itt is egy csomagot lehet letölteni A már telepített tartalomkezelőben meg kell
keresni a sminkek helyét …\themes
Forrás: www.freecsstemplates.org Tartalom szerkesztése például Notepad++
programmal lehetséges
Info ÉRA 2009.
Be kell másolni a letöltött csomagot Az admin felületen be kell állítani a sminket Adminisztráció Webhelyépítés Sminkek
2
Weboldalkészítés sablonok segítségével Nyitrai Erika
2009.11.20.
Mennyiért?
Open Source Web Design
Alap sablonok ingyen elérhetők
http://www.oswd.org/
Kidolgozottabb, részletesebb sablonok 30$-
Több, mint 2000 webes sablon
100$ közötti áron szerezhetők be Egyediséget általában 3000$ körüli áron lehet beszerezni
Prémium sablonok kb. 30$-ért Nem kereshető (csak elvileg)
Open Web Design http://www.openwebdesign.org/ Több, mint 5000 sablon Kereshető sok feltétellel Szabványosság (HTML, XHTML, CSS) Színvilág, alapszínek Üzleti vagy magán felhasználás
Info ÉRA 2009.
3
Weboldalkészítés sablonok segítségével Nyitrai Erika
Template Monster
2009.11.20.
100$-ból kisarculat
http://www.templatemonster.com/ HTML és Flash alapú sablonok is Sokféle kategória, sokféle keresési feltétel Üzleti megoldásokat keresőknek is hasznos A csomagok általában több layout tervet tartalmaznak, ill. kiegészítő elemek is találhatók az oldalon Galéria, webshop, stb. Az ismert portálrendszerekhez illeszthető csomagok Egyéb arculati elemeket is találhatunk, pl.
dokumentumsablonok
100$-ból kisarculat
Mire jó ez? Informatika órán Akinek kevesebb szépérzéke-kreativitása van, az
is sikeres lehet, hiszen igényes oldalt készít Egy az egyben felhasználhat egy sablont Akinek kreativitása lenne, annak könnyen elveszik
a kedvét a kompatibilitási problémák Kedvére alakíthatja a sablont, kicserélheti a képeket, színeket, a részletek alapos ismerete Az első sikerélmény jó alapja lehet a későbbi elmélyülésnek, a részletek elsajátításának
Mire jó ez?
Mire jó ez?
Magán honlapok készítésekor
Vállalati környezetben
A szerzőnek nem kell gondoskodni a technikai
részletekről A megjelenés szakértelem nélkül is lehetséges Kreativitás pótlására kevésbé ügyes/érdeklődő
informatikusok számára Időtakarékos megoldás azoknak is, akik
egyébként képesek lennének a design megtervezésére és kialakítására
Info ÉRA 2009.
Nem webdesignnal és webfejlesztéssel foglalkozó
cégek esetén is fellelhető általában egy rendszergazda, aki képes szövegszerkesztésre Teljes weboldal kialakítási megrendelések helyett csak a sablont kell letölteni és tartalommal ellátni Cégen belül megoldható a fejlesztés Költségtakarékos, gyors megoldás
4
Weboldalkészítés sablonok segítségével Nyitrai Erika
2009.11.20.
További helyek http://www.dreamtemplate.com/ http://www.templateworld.com/ http://www.webtemplatesgallery.com/ http://webdesign.about.com/ http://www.buytemplates.net/
Köszönöm a figyelmet!
[email protected]
Info ÉRA 2009.
5