Schola Medica project

layout: true
class: animated, fadeIn

<div class="footer"><div class="title">Schola Medica project - #jug043</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 Maastricht 6 mei</h2>
			<h3>René Kreijveld</h3>
			<a class="nonwide" href="index4x3.php">4:3 versie</a><a class="wide" href="index.php">16:9 versie</a>
		</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

https://www.dsd.nl 
 https://www.renekreijveld.nl 
 <a href="mailto:rene@dsd.nl">rene@dsd.nl</a> 
 https://twitter.com/renekreijveld 
 https://nl.linkedin.com/in/renekreijveld 
 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
 
<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.

--
- 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.
- <a href="http://scholaoud.joomlademo.nl/" target="_blank">Responsive website</a>.
- Verbeterde <a href="http://scholaoud.joomlademo.nl/cursusagenda/cursusaanbod-2018" target="_blank">cursusagenda</a>.
- Eenvoudiger <a href="http://scholaoud.joomlademo.nl/cursussen/spoedzorg-algemeen" target="_blank">contentbeheer</a>.
- 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.

--
- 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

--
- 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 ...

---
# April 2018
- 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 leverancier levert het grafisch ontwerp op.

---
# Juli 2018: HTML versie
- Tot mijn verrassing levert de leverancier een *Joomla template* 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.

--
- 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.
	- <a href="html/index.html" target="_blank">Homepagina</a>
	- <a href="html/courses.html" target="_blank">Overzicht cursussen</a>
	- <a href="html/course.html" target="_blank">Cursus detail</a>

--
- Bootstrap 4.
- Font Awesome 5.
- Roboto Google Font.
- Responsive.

--
- 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>

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

---
# Templatebouw
- Lokale ontwikkelomgeving met <a href="http://127.0.0.1/index.php" 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 catch via <a href="http://127.0.0.1:8025" target="_blank">Mailhog</a>.

---
# Templatebouw
- Basis opzet met aantal <a href="http://scholamedica.test/administrator/index.php?option=com_advancedtemplates&view=styles" target="_blank">template parameters</a>.
- Bouw van een aantal maatwerk modules.

---
# ScholaMedica Beeld Call To Action module
<a href="http://scholamedica.test/administrator/index.php?option=com_advancedmodules&view=modules" target="_blank"><img src="assets/schola_beeld_call_to_action.jpg"></a>

---
# ScholaMedica Call To Action module
<a href="http://scholamedica.test/administrator/index.php?option=com_advancedmodules&view=modules" target="_blank"><img src="assets/schola_call_to_action.jpg"></a>

---
# ScholaMedica Contact module
<a href="http://scholamedica.test/administrator/index.php?option=com_advancedmodules&view=modules" target="_blank"><img src="assets/schola_contact.jpg"></a>

---
# 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
<a href="http://scholamedica.test/cursussen" target="_blank"><img src="assets/cursussen_frontend.jpg"></a>

---
# 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": 
<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: 
<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, blokje wordt met css verborgen.

---
# Detailweergave cursussen
<a href="http://scholamedica.test/cursussen/anios/188-de-abcde-cursus-voor-anios" target="_blank"><img src="assets/cursus_detail.jpg"></a>

---
# 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></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<th>Praktische info</th><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<th>Data</th><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<th>Reglement</th><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<th>Reader</th><td></td><td></td><td></td><td></td>
	</tr>
	<tr>
		<th>Docentinfo</th><td></td><td></td><td></td><td></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*

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

--
<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).

---
# Velden (Custom Fields)
- 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']);
```

---
# Velden
Tabs tonen op basis van groepensrechten:
```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.
- Opgelost met een SQL veld:
```sql
SELECT 0 AS `value`, "Geen inschrijflink" AS `text` FROM `d2lrv_menu` UNION
(SELECT `node`.`id` AS `value`,
IF(`node`.`level` = 1, `node`.`title`, CONCAT( '-- ', `node`.`title`)) AS `text`
FROM `d2lrv_menu` AS `node`, `d2lrv_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`);
```

---
# Koppelen van het inschrijfformulier
- Opgelost met een SQL veld.
- Het resultaat is de Item ID van het formulier menu-item.

--
- 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">

---
# Dropdownmenu cursussen
- 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 <a href="http://scholaoud.joomlademo.nl/cursusagenda/cursusaanbod-2018" target="_blank">één zeer onderhoudsgevoelig artikel</a>.
- Met NoNumber Sliders was het visueel enigszins aantrekkelijk gemaakt.
- Na elke cursus moest het artikel worden aangepast.

--
- 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.

---
#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
- <a href="http://scholamedica.test/cursus-op-maat" target="_blank">Cursus op maat</a>.
- <a href="http://scholamedica.test/over-ons" target="_blank">Over ons</a>.
- <a href="http://scholamedica.test/kwaliteit" target="_blank">Kwaliteit</a>.

--
## Afwijkende layouts:
- Over ons / <a href="http://scholamedica.test/over-ons/medewerkers" target="_blank">Medewerkers</a>: lay-out override Lijst contactpersonen in een categorie.
- Over ons / <a href="http://scholamedica.test/over-ons/partners" target="_blank">Partners</a>: lay-out override Categorie blog met velden.
- Over ons / <a href="http://scholamedica.test/over-ons/vacatures" target="_blank">Vacatures</a>: lay-out override Categorie blog met velden.
- <a href="http://scholamedica.test/contact" target="_blank">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 <a href="http://scholamedica.test/uw-bijeenkomst-bij-ons" target="_blank">template</a> een kopie van de standaard template met afwijkende kleurstelling.

--
- Het Uw bijeenkomst bij ons deel zit in een apart menu.
- <a href="http://scholamedica.test/uw-bijeenkomst-bij-ons/evenementen" target="_blank">Evenementen</a> en <a href="http://scholamedica.test/uw-bijeenkomst-bij-ons/zalen" target="_blank">Zalen</a> zijn weer layout overrides van de category blog met velden.
- <a href="http://scholamedica.test/uw-bijeenkomst-bij-ons/veelgestelde-vragen" target="_blank">Veelgestelde vragen</a> is een layout override van de category blog om FAQ artikelen in Schola Medica stijl te kunnen tonen.
- <a href="http://scholamedica.test/uw-bijeenkomst-bij-ons/contact-uw-bijeenkomst-bij-ons" target="_blank">Contact</a> 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) ?

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

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

--
- 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 het <a href="http://scholamedica.test/administrator" target="_blank">Joomla Controlepaneel</a>.

---
# 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?

--
 
# 120 uur

---
# Vervolgacties
- Migratie cursussen neer Eduframe Learning Management System omgeving, verrijking LMS content met Joomla content.
- Optimalisatie van de icon fontstack, migratie Font Awesome 5 naar <a href="https://icomoon.io/app/#/select" target="_blank">IcoMoon app</a>.
	- Reductie van meer dan 100 KB in CSS.
- Meer afbeeldingen bij zalen.
- Categorie-titels in dropdown aanklikbaar met link naar doelgroepinformatie.
- Opmaak tabellen verbeteren.

---
class: center, middle
#Vragen?

---
#Deze presentatie

Gebouwd met <a href="https://github.com/gnab/remark" target="_blank">remark </a>

Help:

.blue[ ] volgende 
.blue[ ] 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
 
© 2019, René Kreijveld, DSD Business Internet