In een lang artikel wordt het lezersgemak verhoogd door een duidelijke structuur, bijvoorbeeld door de tekst op te delen in stukken. Buiten het gebruik van de html header-tags kan men ook tabs, sliders, pagina-breaks en inhoudstafels gebruiken. We gaan hier dieper op in en lichten zaken toe waar je nog niet aan gedacht hebt.

Nut van de Joomla pagebreak oftewel "Nieuwe pagina"

Met tabs en sliders wordt de hele tekst ingeladen, terwijl met paginabreaks enkel de betreffende pagina opgeladen wordt. Dit kan voordelig uitvallen als de tekst veel afbeeldingen bevat. Afbeeldingen laden namelijk trager op dan tekst waardoor Google je zou kunnen penalizeren met een lagere ranking! Vroeger had dit niet zo'n grote impact, maar Google hecht sinds april 2015 veel belang aan mobielvriendelijk surfen en de pagina-load heeft daarin zijn aandeel (zie voetnoot 1 & 2).

Gebruik van de "Nieuwe Pagina" (Pagebreak)

Onderaan de editor is er een knop "Nieuwe pagina invoegen" die , na het klikken erop via een pop-up 2 inputvelden toont. NieuwePagina DefiniërenVoor auteurs is het misschien wat zoeken om te weten wat het verschil is tussen Paginatitel en Inhoudsopgave alias. De Paginatitel is steeds te zien op de pagina (als tab, slider of op de aparte pagina).NieuwePagina FrontEnd 1Op de plaatst van de kursor komt in de html-code een <system-pagebreak> tag zoals

<hr title="pagina vier" alt="4°hoofdstuk" class="system-pagebreak" />

In de editor is dit als een streep te zien.

NieuwePagina in Editor

Spijtig genoeg opent de TinyMCE tekstverwerker deze pagebreak niet om de Paginatitel of Inhoudsopgave te bekijken, enkel via de de code kan je de pagebrak wijzigen!

Hoe dergelijke pagebreak in de front-end gerenderd wordt, hangt af van de configuratie van de plug-in "Inhoud - Nieuwe pagina" (het element "pagebreak", een plugin van het type "content", niet het type "editors-xtd" dat enkel de knop voor de editor behelst).

NieuwePagina setting

De 3 settings "Toon websitetitel", "Koptekst artikelindex", "Aangepaste koptekst artikelindex" zijn in feite verwarrend. In Joomla! versie 3.4.3 werd in de front-end bovenaan de pagebreak-lijst van pagebreaks de titel "Artikelindex" geplaatst. In hoger versies blijkt dit niet meer zo te zijn. Hoe dan ook, wil je boven de pagebreak-lijst een titel, specificeer dan de gewenste titel (bijv. "Inhoudstafel") in het invulveld "Aangepaste koptekst artikelindex" en zet de settings "Toon websitetitel" én "Koptekst artikelindex" = "Toon".
Wil je aan de surfer de mogelijkheid geven om alle paginas van de pagebreaks op 1 pagina tesamen te zien, zet dan "Toon alles" ook op "Toon". Dan komt onderaan het lijstje "Alle pagina's" of "All pages" waarmee de surfer alle tekst op 1 pagina te zien krijgt.

Je kan de pagebreak plug-in anders instellen zodat de pagina-breaks zich voordoen als tabs of als sliders. Het voordeel van de gedifferentieerde pagina-load zoals bij Nieuwe pagina's is dan wel verloren. Deze setting geldt trouwens voor je hele site. Je kan dus met deze plugin tabs, sliders, pagina's niet door elkaar gebruiken, éénmaal ingesteld geldt dit voor de hele site. Hieronder een voorbeeld van de Tab-versie met de Prototstar-template:

NieuwePagina FrontEnd Tabs

Dus de HTML-code die je in de editor ziet

<hr title="pagina vier" alt="4°hoofdstuk" class="system-pagebreak" />

wordt in de frontend anders vertaald al naargelang van de pagebreak-plugin setting.
Zo heb je ondermeer volgende code voor de presentatiestijl Sliders:

<div class="panel">
<h3 class="pane-toggler title" id="article25-sliders3">
<a href="javascript:void(0);"><span>4°hoofdstuk</span></a>
</h3>
<div class="pane-slider content">

met op het einde van de tekst van de slider de overeenkomstige sluitende tags.

En voor presentatiestijl Tabs zul je per tab code zien zoals:

<dt class="tabs article25-tabs3">
  <span> <h3> <a href="javascript:void(0);">4°hoofdstuk</a> </h3> </span>
</dt>
<dd class="tabs">

met op het einde van de tekst van de tab de sluitende tags van de tabel.

Bij presentatiestijl Paginabreaks wordt er een heel pak meer code gegenereerd die er ongeveer zo uitziet:

<div class="pull-right article-index">
<h3>Article Index</h3>
  <ul class="nav nav-tabs nav-stacked">
     <li class="toclink"> <a href="/url com_content met een pagina-specificatie: &limitstart=" class="toclink">Hier de titel van het artikel</a></li>
     <li> <a href="/tweede url com_content met: &limitstart=1" class="toclink">2°hoofdstuk</a></li>
     <li> <a href="/tweede url com_content met: &limitstart=2&amp;lang=en" class="toclink">3°hoofdstuk</a></li>
     <li class="active"> <a href="/tweede url com_content met: &limitstart=3 " class="toclink active">4°hoofdstuk</a></li>
     <li> <a href="/tweede url com_content met: &showall=1&limitstart=" class="toclink"> All Pages</a></li>
  </ul>
</div>    
<div itemprop="articleBody">
<div class="pagenavcounter">Page 4 of 4</div> en hierachter de rest van de tekst


Extensies voor Tabs

Wil je meer vrijheid voor je tekstopdeling dan kan je een extenise voor tabs installeren terwijl je de Joomla pagebreak als secties laten werken.
Heb je geen fancy tabs nodig bekijk dan zeker Tabs van NoNumber van de ervaren Joomla-developer Peter van Westen. In de betalende versie kan je tabs beperken tot bepaalde usergroepen en heb je ook meerdere visualisatie-effects ter beschikking.
Wil je tabs én sliders gebruiken, bekijk dan ook Tabs & Sliders [for articles].
In tegenstelling met de standaard Joomla Tabs voor pagebreaks kan je bij extensies de tabs doen nesten. Dit bevordert evenwel niet de lezerservaring, noch de user-experience.

Hopelijk komen we in een ander artikel terug op tabs en sliders.


Inhoudstafel die blijft plakken

Ik ken geen extensie die toelaat om een inhoudstafel van 1 artikel te maken waarbij de inhoudstafel vlottend op de pagina blijft staan zodat de surfer , waar die ook in je tekst gescrold zit, de inhoudstafel ziet om daarmee naar een ander hoofdstuk te skippen.
Met enige kennis van CSS en Bootstrap (sinds Joomla! 3.* standaard aanwezig) kunnen we er misschien inslagen zonder enige extensie te installeren maar wel door in de HTML-code van het artikel enige code te plaatsen. We bespreken 2 voorbeelden.

Sowieso moeten we in het artikel interne ankers aanbrengen zodat de inhoudstafel ernaar verwijzen kan. Ga na of er bij je template op elke pagina niet standaard een anker aanwezig is om naar het bovenste van de pagina te gaan. In ons voorbeeld heeft het protostar-template geen anker bovenaan de pagina dus zetten we een anker "intro".

Voorbeeld 1: inhoudstafel links

Al deze interne anker-verwijzingen zetten we in een lijst van het type <ul> helemaal boven de tekst van het artikel.
Nu gaan we daarop CSS voor HTML 5 en Bootstrap toepassen. Let wel op dat je editor de extra tags toelaat (controleer in de Joomla Algemene setting de TekstFilters en zorg bij JCE dat het profiel HTML5 aanvaardt! ).
Hierbij gebruiken we de stijl nav die ook voor tabs en sliders wordt gebruikt, in ons voorbeeld wordt dit het type nav-pills: class="nav nav-pills" (op http://getbootstrap.com/components/ kan je alle mogelijkheden bekijken).
Om de inhoudstafel vlottend te houden splitsen we de pagina op in een deel voor de inhoudstafel en een deel voor de tekst-inhoud zelf. Zet dus zowel je inhoudstafel (de <ul>-lijst) als de daaronder komende artikeltekst elke in een aparte <div>. Voor deze twee <div> moet je nu een afmeting geven zodat ze naast elkaar op de pagina passen. Het vlotten gebeurt door de stijle float maar om die div op de juiste hoogte te brengen (in de artikle-body en niet bovenaan de pagina) is er voor ons voorbeeld een top:30 gespecificeerd.
De code:

<div style="float: left; position: fixed; top: 30; width: 10%;">
  <nav class="navbar navbar-default navbar-fixed-left">
     <a href="#deel1">Intro</a><br /> <a href="#deel1">Hoofdstuk 1</a><br />
     <a href="#deel2">Hoofdstuk 2</a><br /> <a href="#deel3">Hoofdstuk 3</a>
   </nav>
</div>
<div style="margin-left: 12%; width: 88%;">
   <p><a name="intro"></a>Introtekst. Lorem ipsum dolor sit amet, ......</p>
   <hr id="system-readmore" />
   <h2><a name="deel1"></a>Hoofdstuk 1</h2> <p>Lorem ipsum dolor sit amet, etc....

In de frontend met een protostar-template geeft dit:vlottende inhoudstafel links frontend

Dit ziet er mooit uit maar geeft wel enige problemen op een klein scherm (van ene mobiel device):
de "top: 30" is te groot waardoor de inhoudstafel te laag op het scherm komt.
Op de site ziet dit er in Protostar-template als volgt uit: vlottende inhoudstafel links kleinscherm

Voorbeeld 2: inhoudstafel bovenaan

Wil je de inhoudstafel niet links maar bovenaan, dan kan je die daar ook plakkend maken.

<p><a name="intro"></a>Introtekst. Lorem ipsum dolor sit amet, ......</p>
<hr id="system-readmore" />
<div class="pull article-index" style="position: fixed;">
  <nav class="nav nav-tabs nav-justified">
    <a href="#intro">Intro</a>&nbsp;&nbsp;
    <a href="#deel1">Hoofdstuk 1</a>&nbsp;
    <a href="#deel2">Hoofdstuk 2</a>&nbsp;
    <a href="#deel3">Hoofdstuk 3</a>
  </nav>
</div>
<div>
  <p>&nbsp;</p>
  <h2><a name="deel1">Hoofdstuk 1</a></h2>
     <p>Lorem ipsum dolor sit amet, .....
  <h2><a name="deel2">Hoofdstuk 2</a></h2>
     <p>Lorem ipsum dolor sit amet, ..... etc. met op t'einde de afsluitende div:
</div>

In front-end met Protostar-template geeft dit alvast een mooi resultaat:volttende inhoudstafel boven

Maar als je naar beneden scrolt, dan blijft die op het scherm ter plaatse terwijl de tekst eronderdoor scrolt, dus de tekst wrapt zich niet rond die zwevende titel zoals dat wel gebeurde met de pagebreaks.volttende inhoudstafel boven gescrold

Op een klein scherm is het resultaat wel meer aanvaardbaar dan in het eerste voorbeeld waarbij de titels links stonden:vlottende inhoudstafel boven kleinscherm

Merkwaardig is wel dat in beide stijlen de vlottende inhoudstafel bij sommige schermgroottes verdwijnt. Een verklaring heb ik daarvoor niet gevonden.


Voetnoten

1) over Google ranking: www.seolab.nl/seo/mobiel-vriendelijke-websites-krijgen-een-hogere-ranking
2) over Google ranking: www.frankwatching.com/archive/2015/04/02/googles-seo-update-is-je-site-al-mobile-friendly-checklist/
3) Bootstrap elementen: http://getbootstrap.com/components/