Verslag JUG Utrecht 10 november 2014: Helix e.a. frameworks en Dokter Joomla!

Aanwezig: 22 deelnemers, inclusief organisatoren Lex en Anja en Eric Tiggeler, die vanavond de presentatie verzorgt.

Voor januari hebben we nog geen thema/presentatie. Anja vraagt Niels voor een presentatie over Seblod.

Joyce heeft een collega die ook wel een keer iets wil komen vertellen over templates van RocketTheme. Ook interessant!

Geheimen, tips en trucs in Joomla!, zoals versiebeheer, taal overrides en andere handige dingen: Sander Potjer voor vragen.

Joomla! Nieuws

Jubileumeditie JoomlaDagen 2015 vinden plaats op 11 en 12 april 2015 in Woudschoten in Zeist.

Er gaat steeds minder in de Joomla!-core zitten. Een van de dingen die bijvoorbeeld gaan verdwijnen is weblinks. De core wordt er minder zwaar door, dus dat is alleen maar prettig. En de functionaliteit blijft beschikbaar, geleverd door het Joomla!-project, maar moet apart worden geïnstalleerd.

Presentatie Helix en andere frameworks – Eric Tiggeler

Eric heeft een achtergrond als tekstschrijver, hij werkt als tekstredacteur voor het Taalcentrum van de VU. Toen hij een website wilde maken (2006) ging hij zich bekwamen in Joomla!. Hij ontdekte dat overal informatie te vinden was, maar nergens handig bij elkaar. Dus ging hij er zelf boeken over schrijven. Basiscursus Joomla! 3, en Tips en tools voor Joomla! 3 bijvoorbeeld.

Bekijk je liever de presentatie? Die vind je hier: //www.slideshare.net/erictiggeler/templates-maken-met-helix-framework-joomla-user-group-utrecht-10-november-2014 (in de presentatie zit ook een handige installatiehandleiding, en heel veel duidelijke plaatjes).

Wat zijn frameworks? Hoe helpen ze je bij het maken van templates?

Als je een mooie website wilt, kun je natuurlijk een van de standaardtemplates aanpassen: andere header, andere kleurtjes… (zelfs in Protostar is al meer mogelijk dan je zou denken).

Tweede optie: een andere bestaande template aanpassen. Kijk wel uit met templates op verzamelsites: is het een legale versie en download je niet per ongeluk allerlei rotzooi mee?

Optie drie is vanaf 0 een template bouwen. Dat doe je op basis van wat er al in Joomla! zit. Via bootstrap wordt al heel veel opmaak geregeld met css-codes en stijlen. Daardoor is het in Joomla! 3 een stuk eenvoudiger geworden om zelf een template te maken. Maar je moet nog steeds wel je weg weten in html en css. Als je dat combineert met de Joomla!-codes die nodig zijn voor een template en met bootstrap, dan ben je er eigenlijk al. Dit is dus een optie die te doen is – maar wel heel bewerkelijk. En een zelfgemaakte template heeft wat minder mogelijkheden dan een template die door een professionele templatebouwer gemaakt is.

Je kunt er ook voor kiezen om een framework te gebruiken. Er zijn er heel veel. Eric was op zoek naar een laagdrempelig framework en kwam uit bij Helix.

Een framework is eigenlijk een gewone template, maar dan heel uitgebreid. De basisvormgeving is vaak kaal; via de template-interface in de backend krijg je toegang tot ingebouwde opties. Hij is dus – hoewel je hem wel ‘direct uit de doos’ kunt gebruiken – bedoeld om zelf op maat te maken. Een wit doek waar je je eigen stempel op kunt zetten.

Voordelen van frameworks:

• je hoeft niet vanaf nul te beginnen
• er zijn geavanceerde extra’s ingebouwd, zoals responsive layout, megamenu
• de basistemplate is eenvoudig aan te passen
• gebaseerd op bestaande codebibliotheken (vaak bootstrap als basis)
• gratis te gebruiken

Nadelen:

• er zijn er heel veel, welke moet je kiezen, welke werkt het beste, welke levert de beste resultaten, welke blijft bestaan?
• ze zijn gecompliceerd (templates + scripts + standaard meegeleverde extensies, bijvoorbeeld megamenu) dus het kost veel tijd om uit te vinden hoe ze werken
• systeem binnen systeem: elk framework heeft zijn eigen logica en eigen interface
• de documentatie is versnipperd, weinig stap-voor-stap tutorials
• ermee leren werken vergt tijd

Helix is van Joomshaper, een actieve templateontwikkelaar in Bangladesh. Ze maken mooie en eigentijdse templates en extensies. Er is een behoorlijk actief forum en er is support. Ze leveren zelf ook gratis templates gebaseerd op Helix.

Voordelen van Helix:

• veel ingebouwde opties, aan te passen zonder code
• visuele layout builder (ook voor bijvoorbeeld moduleposities)
• kleuren per layoutblok aan te passen
• responsive
• powered by bootstrap
• veel extra’s: megamenu, shortcodes
• css aan te passen, één bestand custom.css toevoegen
• ondersteunt Google Fonts en Google Analytics
• goede moderne code, lichtgewicht (zeggen ze zelf)

Wil je Helix gebruiken op een bestaande site, dan heb je alleen de template en system plugin nodig, wil je een complete Joomla!-demosite dan heb je het Quickstart Pack nodig. Voordeel daarvan is dat je meteen voorbeeldcontent krijgt, met voorbeelden van hoe alles eruit zou kunnen zien. Dat helpt.

De basistemplate pas je aan zoals je elke template aanpast: via stijlen – Helix – standaard. Maar vervolgens ziet het er wel even anders uit dan bij je standaardtemplate, er zijn 9 tabbladen waarachter allerlei opties zitten. Je kunt makkelijk het logo vervangen, de footer aanpassen (je kunt alles verbergen wat er standaard in zit), een Google Font uitkiezen, de homepage een afwijkende layout meegeven, kleuren aanpassen (nou ja... er zijn drie presets die eigenlijk alledrie niet zo heel mooi zijn). Het geheime wapen van Helix is de layout builder onder de tab layout. Die laat alle templateblokken (header met bijvoorbeeld logo, menu, search; feature waar een slider in zou kunnen; user1 t/m 4 voor moduleblokken...) en moduleposities zien. Als je daar iets aan verandert, dan verandert het systeem de code. Je kunt moduleposities verslepen (handig!). Je kunt ook het hele blok header verslepen naar een andere plaats.

Helix gebruikt het bootstrap-grid (bootstrap 2), 12 kolommen waarmee je de breedte van de contentblokken bepaalt. De som van die blokken naast elkaar is altijd 12. Maak je zelf een blok breder of smaller, dan moet je zelf de rest ook aanpassen. Je kunt zelf extra kolommen (= moduleposities) toevoegen; daar is wel code voor nodig. Er zitten al heel veel moduleposities in, dus die kun je ook aanpassen. Rijen toevoegen kan ook.

Via die layout builder kun je ook de kleuren van je vaste layout aanpassen, en de marges, padding. In die layout builder verander je niet de layout van modules, dat doe je met een module class suffix. Er zijn er een paar standaard ingebouwd, die vind je op de demosite van Helix. Met het achtervoegsel van die module kun je meteen de kleur van de module veranderen.

Per sectie en module kun je ook de zichtbaarheid bij responsive weergave aanpassen: aangeven wat je wilt laten zien op welk apparaat (phone, tablet, desktop).

Wat je niet kunt aanpassen met de ingebouwde opties, pas je aan met css. Je maakt een bestand custom.css aan in templates -> naam template -> details and files, en dat wordt meteen gebruikt. Kijk met met Firebug of Inspecteer Element hoe het nu gedefinieerd is, pas dat stukje css-code aan en plak het in custom.css. en dan het stukje css-code aanpassen en in custom.css plakken.

Een meegeleverde extensie is het megamenu. Dat maakt het mogelijk om heel uitgebreide menu’s te maken waar je ook nog allerlei extra opties in kunt zetten (zoals een module). In de menu manager zit na installatie van Helix een tab Mega Menu Options waar je allerlei dingen kunt instellen.

Ook handig: shortcodes: extra’s die je kunt toepassen binnen artikelen bijvoorbeeld: accordion, carrousel, tab-weergave, gallery... er is een plugin die onder artikelen een knop zet waar je de shortcodes mee oproept.

Andere frameworks

Er zijn veel andere frameworks die vergelijkbare features bieden.

Warp van YooTheme wordt sterk ondersteund, YooTheme is een zeer actieve ontwikkelaar die prachtige templates maakt. Heeft ook een eigen interface en verder vergelijkbare functionaliteiten. De Customizer lijkt erg op de layout builder van Helix. Warp is responsive, met een off-canvas menu (content gaat naar rechts, menu verschijnt links). De layout aanpassen is minder intuïtief, en niet visueel maar tekstueel. Dat is wel pittig.

T3 van JoomlArt is ook een van de grotere. Werkt met de ingebouwde customizer ThemeMagic, met allerlei uitvouwopties waarbij je – net als bij Warp – aan de rechterkant kunt zien wat er gebeurt. Wel bootstrap 3.

Updaten van T3 was ingewikkeld, en je eigen aanpassingen bleven niet bewaard. Het is simpeler geworden en tegenwoordig kun je het zo aanpakken dat al je aanpassingen wel bewaard blijven.

Wil je een framework-template hergebruiken in een andere site, dan vind je daarover niet zo veel informatie. Wel bij JoomShaper: //www.joomshaper.com/forums/how-to-package-template#reply-26818

Het advies van Eric:

• kijk rond op de demosites van de verschillende frameworks
• kies een framework dat bij je wensenlijstje past
• probeer het uit: staat de manier van werken je aan?

Het werken met een framework bespaart je heel veel tijd: je kunt in een paar uur tijd een aardige site maken.

Dr. Joomla

Case: Ik ben een paar artikelen kwijtgeraakt, die heb ik teruggevonden in mijn database, maar dat bleek een kopie te zijn. Kan ik die artikelen vanuit de database weer ergens anders heen kopiëren of is dat gevaarlijk?

Antwoord: wel eerst een backup maken :-). Content kopiëren en in een nieuw artikel plakken is wel een redelijk veilige manier. Als je wilt weten wat er gebeurt als je in de database dingen verandert: maak een backup en restore die lokaal. Dan kun je zo veel experimenteren als je wilt.

Case: waarschuwing! Bij het installeren van Filezilla moet je goed opletten welke vinkjes je aanzet, want je kunt rommel mee installeren. Op het moment dat je akkoord gaat met de voorwaarden wordt die rotzooi geïnstalleerd.

Aanvulling: Filezilla versleutelt ook je wachtwoorden niet, dus wees er sowieso voorzichtig mee.