Verslag JUG Utrecht 11 mei 2015: responsive Joomla templates bouwen

Het is lekker druk vanavond, en er zijn wat nieuwe gezichten. En dus is het tijd voor een voorstelrondje. Leuk, want dan leren ook de bestaande JUGgers elkaar wat beter kennen. Tijdens dit rondje blijkt dat het gezelschap nog steeds zeer divers is: van fulltime webbouwers tot developers en hobbyisten, en alles wat daar tussen zit. Het leuke aan de bijeenkomsten is dat iedereen er altijd wel iets van opsteekt.

Laatste versies

• Joomla! 1.5.26 (NIET MEER GEBRUIKEN VOOR NIEUWE INSTALLATIES)
• Joomla! 2.5.28
• Joomla! 3.4.1
• Akeeba Backup 4.2.0
• Admin Tools 3.5.1
• JCE 2.4.6

Nieuws

In de zomer gaan we door! 13 juli en 10 augustus.

11 juli is er Pizza, Bugs & Fun in Nijmegen, we gaan het hier ook doen in oktober bij ons.

Joomladagen zijn geëvalueerd. De reacties van de deelnemers waren positief, van de mensen die een evaluatie ingevuld hadden was maar liefst 30% nieuw! Een deel van de mensen die het organiseren wil het stokje doorgeven aan nieuwe mensen, dus er worden weer mensen gezocht.

Presentatie Joris Lange: zelf snelle responsive templates bouwen

Joris (www.smartjoomlawebsites.nl) is al van vóór Mambo met websites bezig. Met www.streamteamvideo.nl streamt hij (meestal) lezingen, vandaag geeft hij voor het eerst zelf een lezing. (Dit verslag is trouwens een weergave daarvan; wil je de complete presentatie zien kijk dan hier: //www.smartjoomlawebsites.nl/sjtemplate)

Van bestaande templates en framework wordt Joris niet vrolijk. Er wordt namelijk nogal veel geladen bij standaard templates, heel vaak dingen die je niet nodig hebt. Veel overbodige code, veel server calls en veel bestanden. Bestaande templates zijn vaak complex, kunnen conflicten veroorzaken en problemen geven bij updates (van Joomla en van extensies), ze creëren afhankelijkheid van de bouwer en vaak een hoop gepuzzel bij aanpassingen.

Niet alle frameworks en templates zijn per definitie slecht; je kunt net iets tegenkomen dat kant en klaar past en schone code heeft, dan kan het natuurlijk wel werken. Het dichtst in de buurt daarvan komt T3. Nadeel daarvan is dat het framework niet parallel loopt met de ontwikkeling van Joomla, het duurt altijd een tijdje voor je kunt updaten.

Joris doet het dus liever zelf. Want:

• alles in eigen hand
• alleen de code die je nodig hebt
• je kent de weg in je eigen code
• wordt veel wijzer op vele terreinen
• tijdrovend maar leuk en leerzaam
• en op den duur bespaart het tijd.

Je maakt je eigen template als je het volgende wilt:

• compacte code
• gebundeld, gecompileerd en geminificeerd
• betrouwbaar
• functioneel op vele devices, platforms, browsers
• responsive raamwerk
• herbruikbaar in volgende projecten

Middelen voor je eigen templates

• Bootstrap 3 (of 2)
• jQuery
• Less
• FontAwesome vanwege de iconen library
• Systeem voor aanzetten/inschakelen onderdelen
• Basis module raamwerk

In Joomla is Bootstrap 2 geïntegreerd. Maar Bootstrap 3 heeft heel veel voordelen:

• van de grond af aan responsive opgebouwd
• mobiel als vertrekpunt
• code compacter

Omdat Joomla zelf met Bootstrap 2 werkt, kun je de mist ingaan met extensies, de meeste extensies zijn gebaseerd op Bootstrap 2. Hikashop is bijvoorbeeld lastig met Bootstrap 3. Zolang je allerlei carrousel-achtige dingen vermijdt, gaat het nog wel.

Joris heeft veel gehad aan //blank.vc van Alexander Schmidt. In Nederland bouw(d)en met name Hans Kuijpers, Henk Rijneveld en Sander Potjer Bootstrap templates.

Als je begint met Bootstrap zijn de tutorials van Erik Flowers superhandig: //www.helloerik.com/bootstrap-3-grid-introduction is er eentje die het grid uitlegt.

Bootply is handig voor het stoeien met code en code weghalen: www.bootply.com.

Bestanden en mappen

Het belangrijkste is je templateDetails.xml. Daarin zet je bovenin wat algemene informatie, daarna een opsomming van folders en filenames, dan een config waar je dingen aan of uit kunt zetten en daarna de moduleposities (positions).

Modules

Het Bootstrap Grid heeft twaalf kolommen. Als je je modules drie kolommen breed maakt, kun je er dus vier neerzetten, en dus heb je al die moduleposities niet meer nodig. In de modulemanager kun je opgeven welke class je eraan wilt hangen. Bijvoorbeeld: col XS12 zorgt dat hij op een smal scherm over de volle breedte komt.

Joris zet de moduleposities (de <jdoc:include>-regeltjes) niet in index.php maar in een framework documentje. Om iedere module zet hij een php code die checkt of de module er moet staan; zo nee, dan komt de module niet in je pagina terecht (die code vind je ook in bestaande templates).

Het meest lastige was het maken van een menu. Bootstrap heeft daar prachtige code voor, maar er was heel lang geen Joomla module waar het mee kon. Joris zet het liggende menu gewoon keihard in de code. Nadeel is dat je een aantal classes mist, daar is dan dus een override voor nodig. Hover op mobieltjes is altijd lastig. 

In de index.php staat bij Joris niet meer zo veel, alleen de standaard dingetjes die erin moeten staan. Body waarin hij vast wat dingetjes aanroept, en de debug.

Logic.php voor de functionaliteit

Joris gebruikt een bestand logic.php om functionaliteiten aan of uit te zetten. Daarin worden een paar standaard variabelen aangeroepen en andere variabelen die Joris bij elkaar gezocht heeft. Metadata: viewport, browsers, generator uitzetten.

Om te voorkomen dat er in de head heel veel code zit, kun je dingen uitzetten in logic.php. Van functies die normaal worden aangeroepen kun je met “unset” voorkomen dat het geladen wordt.

Daarna moet je nog wel wat scripts toevoegen: dat er jQuery geladen moet worden, en de noconflict (niet nodig als er nergens Mootools geladen wordt; dat is meestal niet het geval want er zijn nog heel veel extensies die het gebruiken), en Bootstrap. Verder nog een pakketje om dingen in IE te laten werken, heeft Joris zo gecodeerd dat het alleen geladen wordt als je daarmee te maken hebt.

Met een defer commando kun je script libraries aan het eind laten laden. Dat zet je ertussen als een attribuut. Je kunt ook async gebruiken, dan voert-ie uit als het geladen wordt.

JCE Editor wil bijvoorbeeld dat core.js geladen wordt; dat is best een groot bestand. Je kunt een override maken die core.js alleen laadt als er sprake is van JCE Editor.

In de ontwikkelfase werkt Joris met een template.css en een extra.css: in die extra test hij dingen uit die hij, als ze werken, naar template.less verplaatst.

De template.css van Joris komt van less. Hij werkt in template.less en laat template.css genereren via een online compiler, aangeroepen in logic.php. In template.less hoeft niet zo veel, het meeste komt uit Bootstrap. Je kunt erin werken alsof het css is. Je kunt mixins gebruiken, variabelen die door de hele template terugkomen, geneste selectors en rekenen met waarden. Variabelen definiëren is goud waard. Een variabele die je overal kunt aanroepen, bijvoorbeeld een kleurvariabele, die je vervolgens bijvoorbeeld overal 16% donkerder kunt laten zijn. Toch niet mooi? Eén stringetje aanpassen en door de hele site is het aangepast.

Joris heeft in de template een optie zitten om te kiezen of hij online wil compileren. Als je dat doet, genereert hij steeds een nieuwe template.css. Als je met een online compiler less compileert, hoef je je er niet eens zo heel erg in te verdiepen.

HTML override files

Voor Bootstrap 3 zijn veel aanpassingen nodig. Hier een rijtje: //www.bootply.com/bootstrap-3-migration-guide

Veel standaard aanpassingen zijn te regelen met javascipt of NoNumber ReReplacer. Maar niet alle. Joris is nog echt op zoek naar overrides, meebouwers zijn welkom.

Je hebt een applicatie die heet uncss: daar kun je je css laten uitkleden; wat je niet nodig had wordt eruit gehaald en je kunt de code kopiëren. In Bootstrap kun je trouwens ook met een customize functie dingen uit en aan zetten. Dan krijg je een nieuwe bootstrap.min.js die je kunt gebruiken.

Waar moet je beginnen?

Je kan Joris’ template downloaden (zie link bovenin) en ermee gaan spelen. Of een van die blanco templates om mee te beginnen. Maar Joris adviseert iedereen om eerst zelf iets te bouwen. Je leert er veel van en in je volgende project hoef je alle struikelblokken die je tijdens het bouwen tegenkomt niet opnieuw door te maken.

Dokter Joomla

Case 1: als je een nieuwe website bouwt kun je zoekmachinevriendelijke urls aanmaken. Ik heb ooit SEF404 in mijn website gehad, maar daar wil ik wel vanaf. Als ik die deïnstalleer, hoe moet dat dan?

Antwoord: dan worden de urls gebruikt zoals Joomla ze zelf opbouwt. Misschien is het een idee om een nieuw menu te maken? Als de site niet zo groot is kan dat. Als SEF404 eenmaal ergens in zit en het functioneert goed: laten zitten. Het nestelt zich behoorlijk diep dus deïnstalleren heeft tot gevolg dat je alles moet gaan redirecten.

Case 2: bij een tweetalige website had ik ingesteld: Nederlandse browser is Nederlands. Maar als iemand directe urls intikte of vanuit Google wisselde hij “en” en “nl” om, maar de rest liet hij staan, en dan kreeg ik een 404 error.

Antwoord: Klinkt als een bug!

Case 3: ik heb een verouderde site opgenomen, maar op de een of andere manier zoeken mensen naar een mediadirectory met allemaal foto's erin. Ik heb geprobeerd te redirecten in de htaccess, maar ik heb het idee dat dat niet op een hele map kan.

Antwoord: jawel hoor! //coolestguidesontheplanet.com/redirecting-a-web-folder-directory-to-another-in-htaccess/