Verslag JUG 's-Hertogenbosch 2 juli

Maandagavond 2 juli. Voor de voetballiefhebbers een interessante avond, want België speelt in de achtste finale tegen Japan. De winnaar gaat door naar de volgende ronde. Buiten is het 27ºc en wij zitten in de koele ruimte boven de voetbalkijkers. Zo kunnen we aan het gejuich de voortgang van de webstrijd volgen. Deze bijeenkomst worden de vragen van de vaste bezoekers beantwoord.

Hoe schoon ik gecontroleerd mijn backend op / hoe verwijder ik componenten?

• start met het maken van een backup
• zet deze backup op in je lokale ontwikkelomgeving
• test op deze ontwikkelomgeving, voordat je wijzigingen gaat uitvoeren op live.

Het is beter dat je ontwikkelomgeving onderuit gaat, dan je live website.

Een standaard Joomla website bevat vele extensies. Een aantal daarvan zul je nooit gebruiken. Zo worden de extensies Advertenties, Nieuwsfeeds een Weblinks door maar weinig websites ingezet. Zo weinig dat de laatstgenoemde extensie niet eens meer meegeleverd wordt met Joomla. Dit is te controleren via de Github repository Joomla/Joomla-CMS. De extensie weblinks heeft een eigen plekje gevonden in de Github repository Joomla-Extensions/Weblinks.

Bij het verwijderen van extensies kun je als volgt te werk gaan:

• Ga naar Extensies > Beheren > Beheren
• Zoek via de zoekbalk naar de extensie weblinks
• Selecteer de items weblinks
• Klik op uitschakelen om de werking van deze extensie uit te schakelen
• Controleer de werking van de website en indien alles ok, dan kun je de extensie verwijderen
• Selecteer nogmaals de items weblinks
• Klik op deïnstalleren om de geselecteerde items te deïnstalleren

Herhaal deze stap op de live website.

Zo kun je ook modules, die je niet meer gebruikt, deïnstalleren. Kijk daarvoor eerst bij Extensie > Modulebeheer of je de module ook daadwerkelijk niet meer toepast noch kunt vervangen door mod_custom.

hoe verwijder/voorkom ik overbodige html?

Dit is een beetje een vak apart, maar kan al beginnen bij het aanmaken van artikelen. Daar zie je vaak dat er tekst vanuit een extern document gekopieerd en geplakt wordt. Dit zorgt vaak voor overbodige code. Gebruik daarom het klembord icoontje met de letter T er op. Deze zal alleen platte tekst plakken. Het gevolg is echter wel dat je alle html opnieuw moet aanbrengen. Dat is vaak minder werk dan overbodige html handmatig verwijderen.

Hetzelfde geldt voor tabellen... die bevatten ook vaak extra codes om de weergave van de tabel netjes te maken. Dat is niet de bedoeling. Het is niet de bedoeling dat jij als tekstschrijver zelf opmaakcodes gaat toevoegen aan tabellen. Als er iets veranderd moet worden aan de weergave van een tabel, dan moet dat overgelaten worden aan de beheerder van de template. Die moet in de css een wijziging opnemen, zodat de weergave van de tabel overeenkomt met het design.

Maak daarom zo kaal mogelijke tabellen. Middels de JCE editor kunnen mooie lege tabellen geplaatst worden. Indien je template opgebouwd is met Bootstrap 3.x dan kun je de tabel stylen zoals beschreven is in de documentatie tabellen van Bootstrap 3. Werkend met Bootstrap 3 kun je je tabel ook responsive maken. Pak de tabel in met een div en voeg aan die div de class table-responsive toe.

<div class="table-responsive"> <table class="table"> ... </table> </div>

De bijbehorende css voor de responsive table is:

.table-responsive {
   min-height: .01%;
   overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
}

 Al pratend over schone HTML kwamen we ook voorbij accessibility. Men wordt meer en meer bewust dat dit onderdeel ook aandacht behoeft. Mocht je nog niet overtuigd zijn, dan kan het Alfabet van toegankelijkheid je vast en zeker de goede kant op duwen. Handige links met HTML voorbeelden hierbij zijn:

• https://a11yproject.com/patterns (deze leidt je naar codevoorbeelden op codepen)
• //a11y-style-guide.com/style-guide/
• https://inclusive-components.design/ (lange pagina's met goede uitleg over kleine items)

Template overrides

agenda

Dit zijn krachtige onderdelen van je Joomla website. Tijdens de JoomlaDagen heeft Hans Kuijpers laten zien dat je veel kunt doen met alleen maar Joomla. Op de vraag of er een agenda gemaakt kan worden met Joomla kunnen de volgende voorbeelden gebruikt worden. Het zijn allemaal template overrides van de Category Blog weergave:

• https://schijndelfilm.nl/
• https://www.oeteldonk.org/agenda
• https://centrumvoormindfulness.nl/agenda

Bij alle drie de pagina's worden de introteksten van artikelen uit een bepaalde categorie getoond. Deze worden gesorteerd op aanmaakdatum en ze verdwijnen de dag na de activiteit. Let er bij het maken van de items op dat de aanmaakdatum gelijk gezet wordt aan de datum van de activiteit en de datum "beëindig publiceren" op de dag na de activiteit. Een template override zorgt er bij de laatste twee genoemde items voor dat maanden en dagen geclusterd worden. 

responsive video

Standaard zorgt de iframe van een youtube video voor kopzorgen, omdat de breedte en hoogte ingevoerd zijn. Bij het verkleinen van het scherm blijft de iframe zijn ingestelde formaat houden en valt buiten het beeld. Jakkie bah. Met een div wrapper en een beetje css kun je er voor zorgen dat de Youtube film netjes responsive is.

<div class="media-container">
  <iframe allowtransparency="true" scrolling="no" width="560" height="315" src="//www.youtube-nocookie.com/embed/Xe4fcNRjP_Q" frameborder="0" allowfullscreen=""></iframe>
</div>

De bijbehorende css voor de responsive video is:

.media-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.media-container:before {
  display: block;
  float: left;
  content: " ";
  padding-top: 56.25%;
}

.media-container:after {
  content: " ";
  clear: left;
  display: table;
}

.media-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Dit stukje css zorgt er in combinatie met de HTML voor dat de video netjes reponsive is. Daarnaast kun je de aparte Youtube url zien. youtube-nocookie.com Dit domein is door YouTube in 2009 geregistreerd en plaatst initieel geen cookies.

De volgende keer

Dinsdag 7 augustus is de volgende bijeenkomst van Joomla Gebruikersgroep 's-Hertogenbosch. Die avond zal voornamelijk gericht zijn op de optimalisatie van websites.

Eindstand België 3 - Japan 2, België gaat door naar de kwartfinale