ScholaMedica project

layout: true
class: animated, fadeIn

<div class="footer"><div class="title">Schola Medica - JUG 's Hertogenbosch</div><div class="tagline">Your direction is our challenge</div></div>

---
class: start

<table class="start">
	<tr>
		<td class="logo"> </td>
		<td class="titel">
			<h1>Schola Medica project</h1>
			<h2>JUG 's Hertogenbosch<br>4 december</h2>
			<h3>René Kreijveld</h3>
			.blue[<i class="fa fa-long-arrow-left" ></i>] vorige 
			.blue[<i class="fa fa-long-arrow-right" ></i>] volgende
		</td>
	</tr>
</table>

.hide[<a href="index4x3.php">4x3 versie</a>]

---
# René Kreijveld
- Werkt bij DSD Business Internet als Webdeveloper
- 200+ Joomla websites gerealiseerd
- ± 50 Joomla extensies (componenten,  modules, plugins)
- Spreker op Joomladagen / JandBeyond / JUGS
- Joomla 3 Certified Administrator

<i class="fa fa-share-square-o fa-fw"></i> https://www.dsd.nl  
<i class="fa fa-share-square-o fa-fw"></i> https://www.renekreijveld.nl  
<i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:rene@dsd.nl">rene@dsd.nl</a>  
<i class="fa fa-twitter fa-fw"></i> https://twitter.com/renekreijveld  
<i class="fa fa-facebook fa-fw"></i> https://www.facebook.com/rene.kreijveld  
<i class="fa fa-linkedin fa-fw"></i> https://nl.linkedin.com/in/renekreijveld  
<i class="fa fa-github fa-fw"></i> https://github.com/renekreijveld

---
# DSD Business Internet
<table>
	<tr>
		<td><img src="assets/zakelijk_internet.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
		<td><img src="assets/datacenter_diensten.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
	</tr>
	<tr>
		<td><img src="assets/managed_voice.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
		<td><img src="assets/web_development_s.jpg" style="width:190;height:200px;padding:0 10px 10px 0;"></td>
	</tr>
</table>

---
# DSD Webdevelopment
<br/>
<img src="assets/projecten.jpg" height="400" style="margin:0 auto">

---
# Schola Medica
- Opleider voor artsen in spoedzorg.
- Drie hoofddoelgroepen:
	- Specialisten
	- AIOS (Arts in opleiding tot specialist)
	- ANIOS (Arts niet in opleiding tot specialist)
- Hypermoderne onderwijsomgeving in Utrecht.
- Realistisch scenario-onderwijs met professionale simulatiepatienten.<br><br>

--
- Sinds 2008 klant van DSD, Publicanda G1 website.
- In 2013 migratie naar Publicanda G2 (Joomla 2.5).

---
class: center, top
<img src="assets/scholamedica_j25.jpg">

---
class: center, top
<img src="assets/scholamedica_j25_cursus.jpg">

---
# Doel nieuwe Schola Medica.nl
- In 2017 zelfstandige organisatie geworden, aanleiding voor een nieuwe website.
- De idealen en kernwaarden van Schola Medica uitdragen.
- Professionaliteit en kwaliteit uitstralen.
- Overzicht en service bieden.
- Informatie verstrekken over de aangeboden opleidingen.
- Online inschrijven op opleidingen.
- Online (geautoriseerd) aanbieden van cursusmateriaal en instructies voor cursisten en docenten.
- Versturen van nieuwsbrieven aan cursisten en docenten.

---
# Doel nieuwe Schola Medica.nl
- Nieuwste Joomla! versie (Joomla 3).
- Nieuw grafisch ontwerp.
- Alle content wordt herschreven.
- Responsive website.
- Verbeterde cursusagenda.
- Eenvoudiger contentbeheer.
- Een meer menselijk gezicht in de website.
- Promotie faciliteiten voor klanten die vergaderruimtes, praktijklokalen etc. willen huren.
- Betere opties voor zoekmachine optimalisatie.

---
# December 2017
- We hebben een presentatie gegeven over de nieuwe mogelijkheden van Joomla 3.
- Schola Medica heeft consultant ingehuurd voor herstructuren van de website en herindelen van de navigatiestructuur.
- Er is een plan bedacht voor het volledig herschrijven van **alle** webteksten.
- Er wordt een derde partij gevraagd voor een nieuwe grafisch ontwerp.
- Het is onbekend wanneer we kunnen starten met de herbouw.
- Schola Medica vraagt om een globale kosteninschatting.
- Eerste planning: maart 2018 live.<br><br>

--
- We geven aan dat de planning *wel heel erg ambitieus is* ...

---
# Januari 2018
- Eerste voorstel gestuurd voor nieuwbouw website.
	- Installatie en configuratie Joomla 3 met extensies
	- Implementatie nieuwe responsive vormgeving
	- Implementatie nieuwsbrieven component
	- Upgrade webhosting
	- Webmaster training
	- Overleguren en reiskosten<br><br>

--
- Begroting: 46 uur (onder voorbehoud)

---
# Februari - Maart 2018
- Schola Medica concludeert dat het meer werk is dan verwacht.
- Content herstructurering wordt heroverwogen.

---
# April 2018
- Goed nieuws voor DSD: Schola Medica wil met Joomla blijven werken.
- Gesprek bij Schola Medica met nieuwe leverancier voor content herstructurering en grafisch ontwerp.

--
- De nieuwe leverancier zet zwaar in:
	- Brainstormsessies voor de content
	- Ontwerp wireframes
	- Presentatie wireframes
	- Grafisch ontwerp responsive website
	- Presentatie grafisch ontwerp
	- HTML implementatie grafisch ontwerp

--
	- **Doorlooptijd: 3-4 maanden!**

--
	- En daarna komen onze werkzaamheden nog ...<br><br>

--
- Schola Medica besluit met 2 andere leveranciers te gaan praten.

---
# Mei 2018
- Schola Medica heeft een nieuwe leverancier gevonden voor content en grafisch ontwerp: De Communicatiemakers.
- Kleine ambitieuze club die een veel pragmatischer aanpak kiest.
- De leverancier krijgt als opdracht:
	- Content herstructurering
	- Responsive grafisch ontwerp
	- Aanlevering ontwerp in Bootstrap 4 HTML/CSS
- DSD blijft verantwoordelijk voor de technische realisatie en hosting van de website in Joomla 3.

--
- We verzorgen webmastertraining zodat Schola Medica de nieuwe mogelijkheden van Joomla 3 goed leert kennen.
- Schola Medica begint met het schrijven van content.

---
# Juni 2018
- Brainstormsessie door leverancier met directie, management, projectleider Schola Medica en DSD.
- We demonstreren aan leverancier de mogelijkheden van velden (custom fields).

--
- De leverancier gaat met de resultaten van de brainstormsessie aan de slag voor een contentstructuur en grafisch ontwerp.

---
# Juli 2018: Leverancier levert ontwerp
De volgende pagina's zijn in detail uitgewerkt:
<table class="dsd" style="width:100%;">
	<tr>
		<td style="width:33%;">
		Homepagina</td>
		<td style="width:33%;">Dropdown menu</td>
		<td style="width:33%;">Cursussen</td>
	</tr>
	<tr>
		<td>Cursus detail</td>
		<td>Medewerkers</td>
		<td>Vacatureoverzicht</td>
	</tr>
	<tr>
		<td>Vacature</td>
		<td>Partners</td>
		<td>FAQ</td>
	</tr>
	<tr>
		<td>Contact</td>
		<td>Cursusagenda</td>
		<td>Nieuws</td>
	</tr>
	<tr>
		<td>Nieuwsdetail</td>
		<td>Inloggen</td>
		<td>Inschrijven</td>
	</tr>
	<tr>
		<td>Home Vergaderen</td>
		<td>Content</td>
		<td>Mobiel</td>
	</tr>
	<tr>
		<td>Content Vergaderen</td>
		<td>Conceptboek</td>
		<td>Wireframes</td>
	</tr>
</table>

---
# Juli 2018: HTML versie
- Tot mijn verrassing levert de leverancier een *<b>Joomla template</b>* in plaats van een HTML/CSS versie.
- Het blijkt een aangepaste versie van de Protostar template, dus Bootstrap 2.
- Er zijn geen overrides toegepast (o.a. voor SEO).
- Er zijn geen modules meegeleverd.
- Er is geen voorbeeld (dummy) content geplaatst.<br><br>

--
- We concluderen gezamenlijk dat dit niet bruikbaar is.
- De leverancier zal alsnog een aantal pagina's opleveren in HTML/CSS.

---
# Augustus 2018: HTML versie (2)
- We ontvangen de HTML/CSS versie van 3 pagina's.
	- Homepagina
	- Overzicht cursussen
	- Cursus detail

--
- Bootstrap 4.
- Font Awesome 5.
- Roboto Google Font.
- Responsive.<br><br>

--
- We beginnen met de websitebouw.

---
# Websitebouw
### Gebruikte extensies:
<table class="dsd" style="width:100%;">
	<tr>
		<td style="width:33%;"><a href="https://joomlacontenteditor.net/" target="_blank">JCE Pro</a></td>
		<td style="width:33%;"><a href="https://www.akeebabackup.com/products/akeeba-backup.html" target="_blank">Akeeba Backup Pro</a></td>
		<td style="width:33%;"><a href="https://www.akeebabackup.com/products/admin-tools.html" target="_blank">Admin Tools Pro</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://csvimproved.com/" target="_blank">CSV Improved</a></td>
		<td style="width:33%;"><a href="https://extensions.perfectwebteam.com/pwt-seo" target="_blank">PWT Seo</a></td>
		<td style="width:33%;"><a href="https://extensions.perfectwebteam.com/pwt-sitemap" target="_blank">PWT Sitemap</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/cachecleaner" target="_blank">Cache Cleaner</a></td>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/conditionalcontent" target="_blank">Conditional Content</a></td>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/modals" target="_blank">Modals</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/emailprotector" target="_blank">Email Protector</a></td>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/rereplacer" target="_blank">ReReplacer</a></td>
		<td style="width:33%;"><a href="https://www.regularlabs.com/extensions/articlesfield" target="_blank">Articles Field</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://www.rsjoomla.com/joomla-extensions/joomla-form.html" target="_blank">RSForm!Pro</a></td>
		<td style="width:33%;"><a href="https://www.acyba.com/" target="_blank">AcyMailing</a></td>
		<td style="width:33%;"><a href="https://www.raxo.org/raxo-all-mode-pro.html" target="_blank">Raxo Allmode Pro</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://www.jch-optimize.net/downloads.html" target="_blank">JCH Optimize Pro</a></td>
		<td style="width:33%;"><a href="https://www.joomlaworks.net/extensions/free/allvideos" target="_blank">AllVideos</a></td>
		<td style="width:33%;"><a href="https://github.com/renekreijveld/RKR-Cookie-Banner-module" target="_blank">Cookie Banner</a></td>
	</tr>
	<tr>
		<td style="width:33%;"><a href="https://github.com/renekreijveld/ConditionallySearchContent" target="_blank">Conditional Search</a></td>
		<td style="width:33%;">Maatwerk template</td>
		<td style="width:33%;">Standaard modules</td>
	</tr>
	<tr>
		<td style="width:33%;">Maatwerk modules</td>
		<td style="width:33%;">Velden</td>
		<td style="width:33%;">Layout overrides</td>
	</tr>
</table>

---
# Templatebouw
- Basis: <a href="https://github.com/sniggle/joomla-bootstrap4-template" target="_blank">Joomla Bootstrap 4 Template</a> van Sniggle.
	- Aangepast met eigen aanvullende template logic.
	- CSS vervangen door Sass.
	- Font Awesome 4 vervangen door <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Font Awesome 5 (free)</a>.
	- Sass compilatie naar CSS met <a href="https://prepros.io/" target="_blank">Prepros</a>.
- Codering met <a href="https://www.jetbrains.com/phpstorm/" target="_blank">PhpStorm</a> en <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>.

--
Alternatieven voor een Bootstrap 4 template:
- <a href="https://www.joomshaper.com/joomla-templates/helixultimate" target="_blank">Helix Ultimate</a>
- <a href="https://astroidframework.com/" target="_blank">Astroid framework</a>

Alternatieven voor Prepros:
- <a href="https://codekitapp.com/" target="_blank">Codekit</a>

---
# Templatebouw
- Lokale ontwikkelomgeving met <a href="http://devilbox.org/" target="_blank">Devilbox</a>.
- Docker gebaseerde ontwikkelomgeving.
- Multi PHP
	- 5.2/5.3/5.4/5.5/5.6/7.0/7.1/7.2/7.3
- Multi Webserver
	- Apache 2.2/Apache 2.4/Nginx
- Multi MySQL
	- MySQL 5.5/5.6/5.7/8.0 MariaDB 10.0/10.1/10.2/10.3
- Draait op Windows/MacOS/Linux
- SSL
- Mail afvangen via <a href="https://hub.docker.com/r/mailhog/mailhog/" target="_blank">Mailhog</a>.

---
# Templatebouw
- Basis opzet met aantal template parameters.
- Bouw van een aantal maatwerk modules.

---
# ScholaMedica Beeld Call To Action module
<img src="assets/schola_beeld_call_to_action.jpg">

---
# ScholaMedica Call To Action module
<img src="assets/schola_call_to_action.jpg">

---
# ScholaMedica Contact module
<img src="assets/schola_contact.jpg">

---
# Footer modules
<img src="assets/footer.jpg">

---
# Footer modules
<img src="assets/footer_locatie.jpg">

---
# Footer modules
<img src="assets/footer_contact.jpg">

---
# Footer modules
<img src="assets/footer_adres.jpg">

---
# Footer modules
<img src="assets/footer_calltoaction.jpg">

---
# Contentstructuur cursussen
<img src="assets/cursussen.jpg">
- Hoofdcategorie met subcategorieën per aandachtsgebied.
- Elke cursus is beschreven in 1 artikel.

---
# Specialisten Cursussen
<img src="assets/cursussen_in_cat.jpg">

---
# Frontend weergave cursussen
<img src="assets/cursussen_frontend.jpg">

---
# Frontend weergave cursussen
- Voor de weergave is een layout override gemaakt van de category blog.
- De override is hernoemd naar "Cursussen" en het parameter-deel is aangepast.
- De cursussen knop in het menu is van het type "Cursussen":<br><br>
<img src="assets/menutype_cursussen.jpg">

---
# Frontend weergave cursussen
- Door paramaters te hernoemen en weglaten is het voor een gebruiker veel duidelijker hoe een weergave ingesteld kan worden:<br><br>
<img src="assets/cursussen_menuitem_parameters.jpg">

---
# Cursussen filter
<img src="assets/cursussen_filter.jpg">
- Het cursussen filter zijn de submenu-items onder cursussen.
- Elk submenu item is een menu-item van het type "Cursussen" maar toont alleen cursussen van één specifieke categorie.
- Het Herstel filter is een menu-item alias naar Cursussen.
- Via CSS wordt het blokje ervoor verborgen ;-).

---
# Detailweergave cursussen
<img src="assets/cursus_detail.jpg">

---
# Detailweergave cursussen
- Eén artikel met alle informatie van die cursus:
	- Duur, kosten, accreditatiepunten
	- De highlights van de cursus
	- De cursusbeschrijving
	- Link naar inschrijfformulier
	- Link naar brochure
	- Inhoud van de cursus
	- Praktische informatie
	- Aankomende geplande cursusdata
	- Links naar reglementen
	- Lesstof voor de cursist (achter de login)
	- Instructies voor de docent (achter de login)

---
# Autorisatie-eisen cursussen
- Een cursus bestaat uit 6 tabs:
	- Inhoud
	- Praktische informatie
	- Data
	- Reglement
	- Reader
	- Docent informatie

---
# Wie mag wat zien:
<table class="dsd checks">
	<tr>
		<td></td><th>Publiek</th><th>Cursist</th><th>Docent</th><th>Contentbeheer</th>
	</tr>
	<tr>
		<th>Inhoud</th><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
	<tr>
		<th>Praktische info</th><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
	<tr>
		<th>Data</th><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
	<tr>
		<th>Reglement</th><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
	<tr>
		<th>Reader</th><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
	<tr>
		<th>Docentinfo</th><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#d9534f" class="fa fa-window-close"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td><td><i style="color:#5cb85c" class="fa fa-check-square"></i></td>
	</tr>
</table>

--
- Dit alles is vastgelegd in één artikel.
- Hoe zou **jij** dit inrichten?

---
# Autorisatie-eisen cursussen
De autorisatie is opgezet via een mix van:
- Gebruikersgroepen (géén toegangsniveau's).
- Velden.
- Regular Labs Conditional Content plugin.
	- {show usergrouplevels="groep1,groep2,..."} ... {/show}

---
# Gebruikersgroepen
- Voor elke cursus worden 2 gebruikersgroepen gemaakt:

--
	- *cursus naam cursisten*
	- *cursus naam docenten*<br><br>

--
<img src="assets/cursus_artikel.jpg"><br>

--
<img src="assets/cursus_gebruikersgroepen.jpg">

---
# Velden (Custom Fields)
Voor de cursusssen zijn 4 veldgroepen met velden gemaakt:
- Cursusinfo (algemene extra publieken velden).
- Cursistinfo (velden met content exclusief voor cursisten).
- Docentinfo (velden met content exclusief voor docenten).
- Sliders (velden om in een bepaakde tab sliders te kunnen tonen).

--
- Alle velden worden niet automatisch weergegeven.
- Er is een artikel layout override gemaakt van het type "cursus".

--
- In de artikel layout worden de velden geladen.
```php
$userFields = $this->item->jcfields;
$velden = [];
foreach ($userFields as $userField)
{
      $velden[$userField->name] = $userField->rawvalue;
}
echo $velden['duur'];
```

---
# Velden
Tabs tonen op basis van groepensrechten:
```php
if ($velden['cursistengroep'] && count($velden['cursistengroep']) > 1)
    $velden['cursistengroep'] = implode(",", $velden['cursistengroep']);
if ($velden['docentengroep'] && count($velden['docentengroep']) > 1)
    $velden['docentengroep'] = implode(",", $velden['docentengroep']);
```

--
```php
<?php if ($velden['reglement']) : ?>
	{hide usergrouplevels="<?php echo $velden['docentengroep']; ?>"}
		// HTML code voor de reglementen tab
		<?php echo JHtml::_('content.prepare', $velden['reglement']); ?>
	{/hide}
<?php endif; ?>
<?php if ($velden['reader']) : ?>
	{show usergrouplevels="<?php echo $velden['cursistengroep']; ?>,7,8"}
		// HTML code voor de reader tab
		<?php echo JHtml::_('content.prepare', $velden['reader']); ?>
	{/show}
<?php endif; ?>
```

---
# Koppelen van het inschrijfformulier
- Per cursus is er een RSForm!Pro inschrijfformulier.
- Elk formulier is geplaatst in het formulieren menu.
- We wilden een via een veld aan een cursus de inschrijflink koppelen, er is echter geen veld van het type menu-item.
- Dus opgelost met SQL veld:
```sql
SELECT 0 AS `value`, "Geen inschrijflink" AS `text` FROM `ha5l9_menu` UNION
(SELECT `node`.`id` AS `value`,
IF(`node`.`level` = 1, `node`.`title`, CONCAT( '-- ', `node`.`title`)) AS `text`
FROM `ha5l9_menu` AS `node`, `ha5l9_menu` AS `parent`
WHERE `node`.`lft` BETWEEN `parent`.`lft` AND `parent`.`rgt`
AND `node`.`published` = 1
AND `parent`.`level` = 1
AND `node`.`menutype` = 'formulieren'
ORDER BY `node`.`lft`);
```

--
- Het resultaat is de Item ID van het formulier menu-item.

---
# Koppelen van het inschrijfformulier
- In de override ziet de inschrijflink er dan zo uit:

```html
<?php if ($velden['inschrijflink'] > 0) : ?>
<a href="index.php?Itemid=<?php echo $velden['inschrijflink']; ?>"> ... </a>
<?php endif; ?>
```

---
# Dropdownmenu cursussen
<img src="assets/mega_submenu.jpg">

--
- Maatwerk module die als content 1 - 4 kolommen toont.
- Elke kolom bevat een module van het type Artikelen - Categorie.
	- Toont een lijst met artikelen uit één of meer categorieën.
- In de backend kies je per kolom de Artikelcategorie.
- Via Modules Anywhere met parameter override worden artikelen getoond.

---
# Dropdownmenu cursussen
Hoe verschijnt het submenu ?
- In de HTML versie van de website is het dropdownmenu geplaatst in een div na de a tag:
```html
<ul>
		<li>
			<a href="/cursussen">Cursussen</a>
			<div class="submenu"> ... </div>
		</li>
</ul>
```
--
- De submenu div is standaard verborgen met CSS.
- Het submenu verschijnt na hover over de bovenliggende a href met CSS.
- In Joomla plaatsen we submenu module in het hoofdmenu met ReReplacer en Modules Anywhere.

---
# Dropdownmenu cursussen
<img src="assets/submenu_rereplacer.jpg">

---
# De cursuskalender
- De cursuskalender op de oude website was één artikel.
- Bij elke wijziging in welke cursus dan ook moest dit artikel worden aangepast.
- Dus zeer onderhoudsgevoelig.
- Met NoNumber Sliders was het visueel enigszins aantrekkelijk gemaakt.
- Na elke cursus moest het artikel worden aangepast.<br><br>

--
- Voor de nieuwe site kregen we opdracht een onderhoudsvriendelijker systeem te bedenken.
- We wilden daarbij geen gebruik maken van een extra extensie, maar zoveel mogelijk met core content oplossen.

---
# Uitwerking cursuskalender idee
- Elke cursus is beschreven in één artikel.
- Categorie "cursuskalender" met daarin subcategorieeën per aandachtsgebied (Anois, Specialisten, Aios, Profclass).
- Daaronder per cursus een categorie.
- Daarin voor elke geplande cursus één artikel.

---
# Uitwerking cursuskalender idee
<img src="assets/cursusagenda_1.jpg">

---
# Uitwerking cursuskalender idee
<img src="assets/cursusagenda_2.jpg">

---
# Uitwerking cursuskalender idee
<img src="assets/cursusagenda_3.jpg">

---
# Uitwerking cursuskalender idee
<img src="assets/cursusagenda_4.jpg">

---
# Uitwerking cursuskalender idee
- Eén artikel vertegenwoordigt één vermelding in de agenda.

--
- Aanmaakdatum artikel = datum waarop de cursus start.
- Einddatum publicatie = datum waarop cursus niet meer in agenda moet staan.
- Per agendavermelding via velden extra gegevens mogelijk:
	- Datumaanduiding
	- Extra tekst
	- Opleidingsinstituten

--
- De categorie voor de agenda items bevat een veld met link naar het cursus-artikel.
- Daarmee kun je bij elke agendavermelding cursusgegevens tonen.

--
- De cursusagenda zelf is een layout override van de category blog, sortering: aanmaakdatum oplopend.
- Filteren gaat op dezelfde wijzen als cursussen.

---
# Uitwerking cursuskalender idee
- Na einde cursus verdwijnt de cursus vanzelf uit de cursusagenda.
- Het toevoegen van een cursus in de agenda gebeurt op een veel logischere plek.<br>

---
#Hoe tonen we de cursusdata bij het cursusartikel?

- SQL veld bij het artikel waar de cursusdata categorie gekozen kan worden. Het veld geeft category id terug.
```sql
SELECT `id` AS `value`, `path` AS `text`
FROM `#__categories`
WHERE `extension` = 'com_content'
ORDER BY `path`
```
- De categorie id gebruiken we in een module die datums van de artikelen van de cursuscategorie ophaalt.
- Resultaat: veel beter up-to-date cursusdata informatie.

---
# Aantal eenvoudigere content pagina's
- Cursus op maat.
- Over ons.
- Kwaliteit.

--
## Afwijkende layouts:
- Over ons / Medewerkers: lay-out override Lijst contactpersonen in een categorie.
- Over ons / Partners: lay-out override Categorie blog met velden.
- Over ons / Vacatures: lay-out override Categorie blog met velden.
- Contact</a>: artikel met velden en layout override.

---
# Uw bijeenkomst bij ons
- Nieuw website-onderdeel waarbij Schola Medica hun faciliteiten wil promoten voor klanten die vergaderruimtes, praktijklokalen etc. willen huren.
- In de basis is de template een kopie van de standaard template met afwijkende kleurstelling.

--
- Het Uw bijeenkomst bij ons deel zit in een apart menu.
- Evenementen en Zalen zijn weer layout overrides van de category blog met velden.
- Veelgestelde vragen is een layout override van de category blog om FAQ artikelen in Schola Medica stijl te kunnen tonen.
- Contact is hetzelfde artikel met velden en layout override als voor de cursus deel pagina.

---
# SEO verbeteringen
- Voor de verbetering van de vindbaarheid hebben we binnen artikelen overrides toegepast zodat bij een artikel view de titel als H1 wordt getoond.
- Daarnaast de extensie <a href="https://extensions.perfectwebteam.com/pwt-seo" target="_blank">PWT SEO</a> geïnstalleerd.

---
# Mobiele weergave
- De website is volledig responsive, dus geen aparte template voor mobiele weergave.
- Er wordt op de mobiele versie gebruik gemaakt van een afwijkende menustructuur.

--
- Dus voor het cursusdeel en het uw bijeenkomst bij ons deel twee extra menu's:
	- Schola Medica Mobiel menu
	- Uw Bijeenkomst Mobiel menu
- Deze menu's bevatten alleen maar aliassen.

---
# Nieuwsbrieven
- Voor de nieuwsbrieven in huisstijl hebben de Communicatiemakers een HTML nieuwsbrief layout gemaakt.
- De layout was gebouwd om vooral in Mailchimp te gebruiken.
- De nieuwsbrief layout bleek lastig te integreren in AcyMailing.
- Na aanpassing en hier-en-daar wat consessies werkbaar in AcyMailing en goed toonbaar in met name Outlook en Gmail.

---
# Gebruikersimport
- Voor de gebruikersimport maken we gebruik van <a href="https://csvimproved.com/" target="_blank">CSV Improved</a>.
- Waarom CSV Improved (er zijn veel specifieke gebruikers import/export extensies) ?<br><br>

--
- Voor Schola Medica is er een specifieke behoefte om bestaande gebruikers te kunnen (her)importeren in nieuwe gebruikersgroepen waarbij bestaande groepstoewijzigen gehandhaafd blijven.<br><br>

--
- Voorbeeld: cursist volgt *STARtclass Huisartsgeneeskunde jaar 1*
- En jaar later: *STARtclass Huisartsgeneeskunde jaar 2*<br><br>

--
- Cursisten houden 'levenslang' toegang tot de readers.

---
# Documentatie
- Voor Schola Medica hebben we twee gebruikershandleidingen geschreven:
	- Algemene handleiding Schola Medica website (gericht op contentbeheer)
	- Handleiding PWT SEO
- Handleidingen zijn gepubliceerd in een module in het Joomla Controlepaneel in de backend.
- Hiermee hebben de contentbeheerders altijd makkelijk toegang tot de handleiding.

---
# Gepresteerde uren
- Voor de realistie van de website zijn (zoals verwacht) meer uren gepresteerd dan initieel begroot (46 uur).
- Hoeveel uren denk jij dat we gepresteerd hebben?

--
<br><br>
# 120 uur

---
# Vervolgacties
- Optimalisatie van de icon fontstack, migratie Font Awesome 5 naar <a href="https://icomoon.io/app/#/select" target="_blank">Icoon app</a>.
	- Reductie van meer dan 100 KB in CSS.
- Meer filters in de cursusagenda.
- Meer afbeeldingen bij zalen.
- Categorie-titels in dropdown aanklikbaar met link naar doelgroepinformatie.
- Opmaak tabellen verbeteren.
- Koppeling van de website via een API aan een Learning Managemant System.

---
class: center, middle
#Vragen?

---
#Deze presentatie

Gebouwd met <a href="https://github.com/gnab/remark" target="_blank">remark <i class="fa fa-external-link"></i></a>

Help:

.blue[<i class="fa fa-long-arrow-right" ></i> <i class="fa fa-long-arrow-down" ></i>] volgende  
.blue[<i class="fa fa-long-arrow-up" ></i> <i class="fa fa-long-arrow-left" ></i>] vorige  
.blue[Home] naar eerste slide  
.blue[End] naar laatste slide  
.blue[b] / .blue[m] / .blue[f] wissel blank / spiegel / fullscreen  
.blue[p] presentatie mode
<br><br><br><br>
© René Kreijveld, DSD Business Internet 2018