Joomla Templates 1.5 – Wat heb je nodig? (1)

Na een uitgebreide serie geschreven te hebben over Joomla Templates 1.0.x is het tijd voor een nieuwe serie overr Joomla Templates 1.5! Veel plezier!

Als je zelf een site wilt maken en onderhouden, dan is Joomla een heel handig (en gratis) pakket. Byte is helemaal ingespeeld op de hosting van Joomla, dus vandaar dat we je graag verder op weg helpen met aanvullende informatie.

Nieuw in Joomla 1.5 – meer mogelijkheden voor ontwerpers
Met Joomla 1.5 is het pakket een stuk verbeterd – het ontwerp is volwassener geworden en daardoor prettiger in het gebruik. Ook onder de motorkap is er heel wat veranderd. Niet alleen voor beheerders, maar ook voor ontwerpers! Vandaar dat we starten met een aantal artikelen over Joomla Templates 1.5. Je zult zien dat hierin meer mogelijk is dan voorheen. Installeer altijd de laatste versie. Deze vindt je op de Joomla community website. Joomla komt met drie kant en klare templates: 'beez', 'JA_Purity' en 'rhuk_milkyway'. Deze zullen we gebruiken als vertrekpunt.

De juiste bagage
Voordat je start met het maken van een eigen template is het goed om bij jezelf na te gaan of je de juiste bagage in huis hebt om zelf templates te maken. Als je creatief genoeg bent neem ik aan dat je een mooi ontwerp hebt gemaakt dat je in Joomla zou willen gebruiken. Zo niet, dan zijn er genoeg gratis of commerciële templates te vinden (overzicht van Joomla template adressen). Zo ja, lees dan vooral verder om te zien welke 5 zaken je nog extra nodig hebt.

1) Hosting en een geïnstalleerde versie van Joomla
In de eerste plaats is het natuurlijk belangrijk een goede en betrouwbare hostingpartij te vinden die is ingespeeld op Joomla. Bij Byte ben je dan aan het goede adres.
Een installatie van Joomla is natuurlijk ook essentieel. Afhankelijk van de uitbreidingen die je op het pakket gebruikt moet je kijken of je de nieuwste versie kunt (laten) installeren. Via de beheeromgeving van Joomla kun je templates installeren, maar enige kennis van FTP (File Transfer Protocol) heb je wel nodig om bestanden over te zetten van je eigen computer naar de hostingserver. Een gratis FTP-pakket is FileZilla.

2) Een ontwikkelpakket en ontwikkelomgeving
Als je hosting in orde hebt is het goed om een ontwikkelpakket te vinden dat je prettig vindt. Ben je een ontwerper, dan zal je een pakket willen dat goed laat zien wat je krijgt (WYSIWYG - What You See Is What You Get). Denk dan bijvoorbeeld aan een pakket als Dreamweaver van Adobe. Bijkomend voordeel is dat Dreamweaver tot de Adobe familie hoort en je – zeker als je ontwerpt met andere producten als InDesign of Photoshop – de werkwijze van het pakket gewend zult zijn. Ook zijn er handige extensies waarmee je snel Joomla code kunt maken. Dreamweaver heeft overigens ingebouwde FTP mogelijkheden, dus in dat geval zou je geen FTP programma meer nodig hebben.

Ben je meer op code gericht, overweeg dan een gratis Open Source alternatief: Eclipse. Dit gebruik ik zelf. Installeer daarbij de PHP extensie zodat je snel PHP projecten kunt opzetten. Voordeel hiervan is dat Eclipse controleert of je PHP code fouten bevat – dit scheelt veel tijd bij het oplossen van problemen. Daarnaast gebruik ik de Aptana extensie om HTML en CSS te controleren. Ook heeft Aptana heel wat Javascript bibliotheken die gebruikt kunnen worden. Kortom: een heel mooie combi.

Zorg er verder voor dat je op je eigen computer een versie van Joomla hebt draaien. Installeer hiervoor eerst een eigen server (dit kan heel eenvoudig met XAMPP). Download hierna de laatste versie van Joomla en installeer dit ook. Als je dit hebt gedaan kan je je ontwerp uitproberen op je eigen computer en als het klaar is het op de live server installeren. Ga zo min mogelijk ontwikkelen op een live server! Als je het niet op je eigen computer kunt of wilt installeren, maak dan gebruik van een externe ontwikkelserver.

3) De juiste browsers
Je zou het bijna vergeten, maar het is ook nog eens handig om van tevoren te bepalen welke browsers je wilt gaan ondersteunen. FireFox, Internet Explorer – natuurlijk. Maar ondersteun je ook Safari? Ik ontwikkel graag op FireFox, aangezien deze browser veel hulpmiddelen heeft voor het inzien van de onderliggende code. Ook fouten zijn eenvoudiger op te sporen. Daarna 'repareer' ik het voor Internet Explorer (en eventueel Safari). In deze serie zullen we het bij deze twee browsers houden (de nieuwste versies).

Een klein probleem hierin is nog eens dat je als ontwerper vaak werkt met een Mac, maar ontwikkelaars meestal met een PC werken. Dit kan ertoe leiden dat wat je iets ontwerpt, de ontwikkelaar het precies zo implementeert en het er toch anders uitziet. Als je als ontwerper een externe ontwikkelaar inhuurt, maak hier dan van tevoren afspraken over.

4) Kennis van HTML en van CSS
Ik ga er vanuit dat je HTML kent; zo niet, dan zul je je dit eerst eigen moeten maken.

Met Joomla 1.5 wordt het veel eenvoudiger om CSS (Cascading Style Sheets) te gebruiken. Hierdoor kan je veel meer realiseren in je ontwerpen. Een aantal pakketten (waaronder Dreamweaver) maakt CSS automatisch aan. Toch is het goed om zelf kennis van CSS te hebben, zodat je hierin eenvoudig aanpassingen kan maken. Een website die je alles leert over CSS is www.w3schools.com. Ook kan ik je CSS Zen garden aanbevelen om te zien wat er zoal mogelijk is.

5) Kennis van PHP
Tja, dit is een lastig punt. Waarom zou je als ontwerper PHP moeten leren? Je zult zien dat Joomla templates doorspekt zijn met PHP code. Op die manier worden gegevens uit de Joomla database in je ontwerpen ingevuld. In deze serie zal ik die code bespreken en toelichten. Dus als je nog geen PHP kent hoeft dat geen probleem te zijn. Mocht je er toch meer over willen leren, start dan bij de officiele website van PHP. (Van origine stond PHP overigens voor Personal Home Page, maar inmiddels betekent het Hypertext Preprocessor PHP.)

Hoe nu verder?
Controleer voor jezelf of je al het bovenstaande in huis hebt en zo ja, dan kun je van start! In het volgende artikel in deze serie meer over de plek van Joomla Templates in Joomla en de basisopbouw van templates.

Stem / Bookmark [?]