Kompiuteriai Svetainės kūrimas

Šablono kūrimas TVS'ui Joomla

        
Vartotojo avataras

worlon

Įsijaučiantis
 
Pranešimai: 52

 764.43 Lt

Standartinė » 2009 Lap 21, 23:02

Trumpa info kaip susikurti savo veikiantį šabloną turinio valdymo sistemai Jomla.

Pradžiai ko reikės
Joomla! 1.5 Template Toolbar - įrankis, padėsiantis gan greitai ir paprastai sukurti Joomla šabloną. Atsisiųskite, išarchyvuokite ir pasilikite tik .exe failą (na nebent jums pasiskaitymui įdomūs kiti). Jo instaliuoti nereikės, paspaudus ENTER iškart galima naudotis.
• Koks nors redaktorius, kad ir notepad++ ar bet kokia kita programa, skirta web kūrimui ir redagavimui.
• Jūsų jau sukurto statinio šablono (HTML, CSS). Iš jo trinat visus tekstus ir paliekat švarų šabloną.
Joomla 1.5x
• Serverio, kuriame bus talpinama

Kas sudaro Joomla šabloną?
1. index.php – tai yra jūsų šablono failas, kuris anksčiau galbūt vadinosi index.html.
2. templateDetails.xml – joje bus informacija apie jūsų šabloną.
3. index.htm – visiškai tuščias failas, jis šiek tiek apsaugos nuo smalsių akių.
4. params.ini – tuščias failas šablono nustatymams saugoti. Šablono nustatymai skirti pažengusiems kūrėjams, tad apie tai vėliau.
5. favicon.ico – tinklalapio ikona adreso lauke.
6. template_thumbnail.png – šablono paveiksliukas „printscreen“.
7. offline.php – failas, kurio turinys rodomas, kai tinklalapis laikinai išjungiamas. Šio failo nebūtina įtraukti į šabloną.
8. error.php – failas, rodomas įvykus klaidai, pvz. Neteisingai įvydus adresą. Šio failo nebūtina įtraukti į šabloną.
9. component.php – individualizuoja komponentų dizainą. Šio failo nebūtina įtraukti į šabloną.

Į šabloną taip pat įeina ir direktorijos css, images ir specifinė direktorija – html. Pastarojoje talpinami komponentų ir modulių šablonai, jei norima juos individualizuoti. Bet pradedančiajam jų nereikia.

Ir iškart [prie praktikos. Teoriją pasistengsiu paaiškinti jos metu.

Šablono kūrimas

1. Pirmiausia reikia susikurti vietą, kur viskas bus laikoma, t.y. forderį/direktoriją. Pas mane ji vadinasi „demo“, jūs galite pavadinti kaip norite.

2. reikia susikurti statinį šabloną. Kaip jis atrodys yra tik jūsų reikalas, bet aš kaip demo padarysiu visai paprastą:
Paveikslėlis

3. Atsidarome atsisiųtą Joomla Toolbar ir: jame matome 4 mygtukus:
• pirmas yra „Insert Module“. Paspaudę ant jo pamatysite, kad šis suskirstytas dar į 3 dalis. Pirma dalis talpinama į index‘o headerį.
Antra dalis skirta atvaizduoti paveikslams, laikui ir t..t šablone.
Trečia dalis yra modulių pozicijos. Šiame įrankyje pateiktos standartinės pozicijos, bet jų gali būti kokių tik norite.
Apie viską plačiau ir kiek aiškiau bus paaiškinta vėliau.
• Antras mygtukas „Insert CSS“ iškart nukopijuoja į atmintį standartinį Joomla CSS, telieka tai įklijuoti/past į naują failą ir jį išsaugoti kaip css. Pas mane jis išsaugomas demo/css/template.css.
• XML Editor atidaro naują langą, kuriame užpildote pateiktą formą. Lango dešonėje spauskite ant „Add files“ ir susiraskite direktoriją, kurioje talpinami jūsų failai. Suradę jį pažymėkite ir spauskite OK. Tai atlikė spauskite CREATE ir išsaugokite failą pagrindiniame folderyje, pas mene: demo/templateDetails.xml. Vėliau šį failą bus galima dar pakoreguoti.
• 4 mygtukas yra nustatymai ir mums tai neįdomu, tad tai praleisime.

4. Pradeda redaguoti index.php:
• Atsidarome „Joomla Toolbar“ ir spaudžiame INSERT MODULE. Išsiskleidžia sąrašas ir spaudžiame HEADER. Iškart nusikopijuoja info į atmintį.
• Atsidarome index.php taip, kad matytume patį skriptą ir ištriname viską kas yra headeryje su juo pačiu ir jo vietoje įklijuojame/paste tai kas buvo išsaugota atminty.
• Kad nebūtų viskas labai išsiplėte index‘e, kur įdėjome nukopintą kodą, galime pratrinti komentarus esančius tarp /* ir */. Tai nėra būtina, bet vaizdas bus geresnis, ne taip ištempta.

5. Jau kaip ir įpusėjome tvarkyti index‘ą, teliko sudėti modulių pozicijas:
• Toolbar‘e spaudžiame INSERT MODULE ir pasirenkame LEFT (SIMPLE).
• Kaip galima spėti iš pavadinimo, tai turėtų būti susiję su kaire, tad dedam/įklijuojam/paste tai kur nors kairėje. Pas mane tai bus antra eilutė, pirmas stulpelis – geltonas laukas.
• Kartojame tą patį veiksmą, tik šį kartą pasirenkame RIGHT (SIMPLE) ir tai įklijuojame/paste dešinėje.. Pas mane tai atsidurs raudoname lauke.
• Kartojame tą patį veiksmą, tik pasirenkame TOP (SIMPLE). Jis pas mane atsidurs žydrojoje zonoje.
• Ir dar kartą kartojame veiksmą, tik šįkart renkamės BOTTOM (SIMPLE). Jis pas mane bus orandžiniame lauke.
• O dabar įdėsime svarbiausią dalyką MAIN BODY. Priešingai nei LEFT ar RIGHT, kurie tūno kažkur šonuose, mažai vietos užimančiuose laukuose, MAIN BODY turi būti talpinamas ten, kur turėtų atsirast pagrindinis turinys, tekstai, forumai ir visa kita. Pas mane tai žalias laukas
• Joomla Toolbar‘e nėra vieno labai svarbaus dalyko, klaidų lauko kodo. Pvz. Kai norite prisijungti ir įvedate neteigingą slaptažodį logiška būtų, kad pasirodytų kažkoks pranešimas, va būtent jan ir reikia šio kodo:
<jdoc:include type="message" />
Jį įdėkite virš MAIN BODY kodo.

6. Tvarkome CSS šablone
• Jau įkeliant HEADER su juo buvo įjkelta nuoroda į CSS. Ją gali tekti pakoreguoti.
• Jei pas jus CSS talpionami ne css direktorijoje, kaip parašyta kode:
templates/<?php echo $this->template ?>/css/template.css
arba failas vadinasi kitaip, pakeiskiite šią info, kad atitiktų jūsų failų ir forlderių pavadinimus.
• Jei jums reikia daugiau CSS failų, tiesiog nukopijuokite css eilutę ir pakeiskite failo pavadinimą.

7. Atrodo viskas kaip ir baigta su index.php, tad išsaugokite jį ir galite jau uždaryti. Tik kelios pastabos:
• Šablone nereikia rašyti tinklalapio pavadinimo < title > ar dėti ikonos skriptus, viską už jus padarys Joomla ir vėliau tai galėsite keisti per adminke.

8. CSS failo kūrimas:
• Toolbar‘e spauskite INSERT CSS ir įklijuokite/paste į jau sukurtą CSS failą, arba jį sukurkite ir pavadinkite template.css (arba kaip jūs norite:)
• Atsidarykite demo/css/template.css ir užpildykite jį.
• Naujokai tikrai nežinos ką dauguma CSS atitinka. Yra keli būdai kaip tai išsiaiškinti: padarykite ryškų back‘ą ir dideles raides (tada ta vieta aiškiai turėtų būti matoma naršant po tinklalapį) arba (geresnis variantas) naršant HTML folderyje (žiūrink konkrečius failus ir juose naudojamus CSS)
• Šiaip, tik mokantis galima pamiršt CSS. Tuo užsiimti bus galima pranokus.

9. sukuriame naują tuščią failą ir jį išsaugome demo/params.ini

10. template_thumbnail.png – tai turėtų būti mažas ~200x150 printscreen paveiksliukas. Tačiau nesukūrę pačio šablono jo turėti negalime, tad pasidarom belekokį tokio dydžio paveikslą ir išsaugome. Žinoma, jei kuriate ne nuo pačių pradžio, o pritaikote statinį šabloną prie Joomla, galite naudoti statinio šablono screen‘ą.

11. Įsitinkite, kad pas jus yra visi šie failai:
index.php – šablono failas
params.ini - tuščias failas parametrams saugoti
templateDetails.xml – Toolbar‘o sugeneruotas šablono info failas
template_thumbnail.png – šablono screen‘as
css/template.css – šablono CSS

12. suzipinkite viską ir galite jau instaliuoti savo pirmą šabloną.


Instaliacija

Atsisiųskite Joomla paketą, jį išarchyvuokite, įkelkite jį į serverį, įveskite jo adresą ir sekite instrukcijas. Baigę instaliaciją prisijunkite prie adminkės ir:
1. spauskite EXTENSIONS >> INSTALL/UNINSTALL
2. susiraskite vietą kur yra jūsų šablono zip, jį pažymėkite ir spauskite UPLOAD FILE& INSTALL.
3. eikite į EXTENSIONS >> TEMPLATE MANAGER ir susiraskite savo šablono pavadinimą. Radę pažymėkite jį ir viršuje spauskite DEFAULT
4. spauskite ant jūsų šablono pavadinimo ir pažymėkite YEA. Viską išsaugokite ir eikite pasižiūrėt kas gavos.

Paveikslėlis
Mano zip‘as -> http://failai.in/F5FAFBD321/demo.zip

pė.es.: tai ką sakiau paaiškinsiu vėliau, paaiškinsiu tada/kai/jei būsiu to paklaustas :)

--------------------------------------


THa KeinuX

Forumo gyventojas
 
Pranešimai: 1200
Sun-City

 0.00 Lt

Standartinė » 2009 Lap 22, 15:25

Dėkoju už straipsnį, tik parašyčiau surašyti visą informacija. Reikės joomlai kurti templates :)


Lauksiu kitos info (kurią žadėjei :) )

Vartotojo avataras

worlon

Įsijaučiantis
 
Pranešimai: 52

 764.43 Lt

Standartinė » 2009 Lap 22, 16:31

Na na, konkurentų sau prisigaminsiu :D
Jei turit konkrečių klausimų, žinoma, galiu padėt, bet viso gido tikrai nerašysiu :P
Jei reikia galiu už šimtą-kitą sukurt šabloną ir nereikės patiems vargti, nors pačiam pasidaryt įdomiau :)

-------

Modulių pozicijos

Kas yra moduliai? Tai mini programėlės, dažniausiai didesnių dalis. Pvz.: balsavimo forma, kurioje pasirinkus punktą spaudžiate BALSUOTI ir esate nukreipiamas į pagrindinę balsavimo programą. Moduliai taip pat yra įvairūs baneriai, slideshow, grotuvai, logino forma ir dar be galo daug įvairių dalykų gali būti atvaizduojama moduliuose.

Kuriant šabloną visada pažymimos vietos, pozicijos moduliams:

Kodas: Pasirinkti visus
<jdoc:include type="modules" name="left" style="" />


arba
Kodas: Pasirinkti visus
<?php if($this->countModules('left')) : ?>
   <jdoc:include type="modules" name="left" style="" />
<?php endif; ?>


Tad panagrinėjam ką tai reiškia:
• <jdoc:include type="modules" ... – ši dalis nurodo, kad į šią vietą turi būti įterpiamas pasirinktas modulis. Koks modulis/moduliai atsiras pasirinksite jau adminkėje EXTENSIONS >> MODULE MANAGER. Išsirenkate modulį, spaudžiate ant jo pavadinimo ir ties POSITION pasirenkate vietą/vietos vardą, kur jis turi atsirasti.
• ... name="left" ... – ši dalis nurodo šios vietos/pozicijos pavadinimą. Visus galimus tokius vardus vėliau matysite peržiūrint modulį adminkėje, ties POSITION, ten bus jų sąrašas. Jei pasirinksite LEFT, jis atsiras toje šablono vietoje, kurios pavadinimas yra LEFT.

Beje, labai svarbus dalykas! Joomla leidžia pozicijas vadinti beveik kaip norite, tačiau nenaudokite lietuviškų ir kitų specifinių simbolių. Pavadinimą turi sudaryti lotyniškos raidės ir/ar arabiški skaičiai. Tad jūs galime pavadinti poziciją „manosuperdupernesamone“, bet ne „mano super sduper nesąmonė“. Tarpų irgi neturėtų būtio.
Ši galimybė yra didelis privalumas, jums nebūtina rašyt kažkokių nesąmonių angliškai, o galite rašyti lietuviškai, bet lotyniškais rašmenimis. Taip pat galite pozicijas pavadinti taip, kad pavadinimas atspindėtų vietą ar dar ką nors, kad būtų l;engviau gaudytis.

Tačiau! Joomla turi savo standartinius pozicijų vardus, kuriuos dalite rasti atsidarę failą demo/ templateDetails.xml. Pirmus keturis labai rekomenduoju naudoti savo šablone, nes juos naudoja modulių kūrėjai. Tad bus mažiau vargo vėliau tvarkant modulių nustatymus.

Ir žinoma... Jei susikūrėte savo pozicijų vardus ir juos panaudojote šablone, juos būtina įrašyti faile templateDetails.xml.
Atsidarykite šį failą, susiraskite <positions> ir po juo esantį ilgoką sąrašą pozicijų vardų. Nusikopijuokite vieną kurią eilutę, kad ir <position>left</position>, padarykite naują eilutę ir įklijuokite/paste tai. Dabar pakeiskite LEFT į jūsų sukurtą pozicijos pavadinimą. Pas mane gausis: <position>manosuperdupernesamone </position>. Tą patį veiksmą kartokite kiek reikia kartų. O galiausiai išsaugote failą ir uždarote.

• ... style="" /> - leidžia modulį individualizuoti, bet prieš kalbant apie tai, reik išsiaiškinti apie šablono HTML folderį ir jo turinį, tad kol kas tai praleidžiam,.


Beje, jei dar kartą tokio paties šablono Joomla neleis instaliuoti, tad, jei norite vėl instaliuoti turėsite pašalinti seną šabloną ar pakoreguoti šablono templateDetails.xml failą, ties eilute <name>demo</name>, pakeiskite į <name>demo2</name> ir Joomla manys, kad tai kitas šablonas.

THa KeinuX

Forumo gyventojas
 
Pranešimai: 1200
Sun-City

 0.00 Lt

Standartinė » 2009 Lap 22, 16:35

Worlon, konkurentas aš jaunas, o tik domiuosi šiais reikalais, tai jei gali parašyk į pm gidą, neplatinsiu jo :) Pasinaudosiu ir tiek :)

Vartotojo avataras

worlon

Įsijaučiantis
 
Pranešimai: 52

 764.43 Lt

Standartinė » 2009 Lap 22, 16:38

THa KeinuX rašė:Worlon, konkurentas aš jaunas, o tik domiuosi šiais reikalais, tai jei gali parašyk į pm gidą, neplatinsiu jo :) Pasinaudosiu ir tiek :)


Tai šaunu. Aš ir noriu, kad kuo daugiau žmogų naudotųsi Joomla, juk tada turėsiu darbo :D
O gidas yra mano smegeninėje, dėja jos atiduoti negaliu :)

ugniesdebesys

Lankytojas
 
Pranešimai: 13

 263.00 Lt

Standartinė » 2010 Gru 20, 16:26

Geriausiai nukopijuoti joomla template i koki dreamviewer ir rankiniu budu editinti :).
Arba isidiegti xampp, sinchronizuoti apache su dreamviewer ir bus labai geras templeito editorius.

Vartotojo avataras

Iive

Apšilinėjantis
 
Pranešimai: 46

 968.00 Lt

Standartinė » 2016 Geg 26, 12:40

Teko kartą rasti puslapį su tokių įspūdingu dizainu, kad dominančios informacijos ieškojau 10 kartų ilgiau, nei įprastai. Tad tokio dizaino pati tikrai nesirinkčiau, tik įdomu pasidarė kokia tokių interneto puslapių dizaino kaina yra?



Kompiuteriai Svetainės kūrimas





 
Dabar prisijungę

Šiuo metu prisijungę 0 narių :: 0 registruotų, 0 slaptų ir 0 svečių
Daugiausia vartotojų (812) buvo 2020 Bal 28, 22:08

Vartotojai naršantys šį forumą: Registruotų vartotojų nėra ir 0 svečių