Handy tools for Joomla

<section data-background="images/tools/handy-tools-for-joomla.jpg" data-state="frontpage">
<div class="atitle2">Handy<br>
    <div class="atitle" style="font-size:200% !important"><span class="db8orange">Tools for Joomla</span></div>
        <br><br><br><br>
        <span class="apage1">by Peter Martin / <a href="https://db8.nl" target="_blank">db8.nl</a></span>
        <br>
        <span class="apage1">slides: <a href="https://slides.db8.nl" target="_blank">https://slides.db8.nl</a></span>
        <style>.atitle{text-shadow: 2px 2px 2px #000;}
        .atitle2{text-shadow: 2px 2px 2px #000;}
        </style>
        <div style="margin: 0 auto;">
        <a href="https://db8.nl" title="Joomla Specialist db8 Nijmegen" target="_blank">
            <img height="50" style="border:0;background:transparent;margin-right:20px;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);" src="images/db8-logo.svg" alt="db8">
        </a>
    </div>
</div>

---

<div class="sheet">Technical development</div>

----

### Technical Development

- <span class="db8orange">IDE</span> (Integrated Development Environment)
  - PhpStorm + Xdebug
  - Visual Studio Code
- <span class="fragment"><span class="db8orange">Software Version Control</span>
  - Git + GitHub / GitLab</span>
- <span class="fragment"><span class="db8orange">Local web environment</span>
  - XAMPP / WAMP / MAMP
  - docker </span>
- <span class="fragment"><span class="db8orange">Dependency management</span>
  - Composer
  - npm</span>

---

<div class="sheet">Website development</div>

----

### Website Development

- <span class="db8orange">Template</span>
    - <a href="https://yootheme.com/" target="_blank">YOOtheme Pro</a> (templates with dynamic content)
- <span class="fragment"><span class="db8orange">Colors</span>
    - <a href="https://www.colourlovers.com/" target="_blank">Colorlovers</a></span>
    - <a href="https://thecolorpalettestudio.com/" target="_blank">Color Palette PRO</a>
- <span class="fragment"><span class="db8orange">Fonts</span>
    - <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>
    - <a href="https://fontawesome.com/" target="_blank">Fontawesome</a> Icons</span>
- <span class="fragment"><span class="db8orange">Backup/restore</span>
    - <a href="https://www.akeeba.com/products/akeeba-backup.html" target="_blank">Akeeba Backup</a> + kickstart</span>

---

<div class="sheet">Website Performance</div>

----

### Website Performance

- <span class="db8orange">Performance</span>
    - Google Lighthouse -> Google Chrome > Inspect
  - <a href="https://www.screamingfrog.co.uk/seo-spider/" target="_blank">Screaming Frog</a> SEO Spider
    - <a href="https://pagespeed.web.dev/" target="_blank">PageSpeed Insights</a>
    - <a href="https://gtmetrix.com/" target="_blank">GTmetrix</a> (less good these days)
    - <a href="https://www.webpagetest.org/" target="_blank">WebPageTest</a>

---

<div class="sheet">Search Engine Optimization</div>

----

### Search Engine Optimisation
- <span class="db8orange">SEO</span>
  - <a href="https://www.screamingfrog.co.uk/seo-spider/" target="_blank">Screaming Frog</a> SEO Spider
  - Google Lighthouse -> Google Chrome > Inspect
  - <a href="https://ahrefs.com/" target="_blank">Ahrefs</a>
- <span class="db8orange">Structure</span>
  - <a href="https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi" target="_blank">HeadingsMap</a>

---

----

### AI-optimisation (GEO / AEO / AIO)

- <span class="db8orange">AIO</span> (Artificial Intelligence Optimization)
  - <span class="db8orange">GEO</span> (Generative Engine Optimization)
    - <a href="https://search.google.com/test/rich-results" target="_blank">Schema.org validators</a>
  - <span class="db8orange">AEO</span> (Answer Engine Optimization)
    - <a href="https://google.com/ai" target="_blank">Google AI mode</a>

---

<div class="sheet">Security</div>

----

### Security

- <span class="db8orange">Website</span>
    - <a href="https://internet.nl" target="_blank">internet.nl</a>
    - <a href="https://www.immuniweb.com/websec/" target="_blank">Website Security Test</a>
    - <a href="https://themarkup.org/blacklight" target="_blank">Real-Time Website Privacy Inspector</a>
- <span class="db8orange">Connection</span>
  - <a href="https://www.ssllabs.com/ssltest/" target="_blank">SSL Server Test</a>
  - <a href="https://securityheaders.com" target="_blank">securityheaders.com</a>
- <span class="db8orange">Email</span>
  - <a href="https://www.appmaildev.com/" target="_blank">SPF/DKIM/DMARC</a>

---

<div class="sheet">Usabililty</div>

----

### Usabililty

- <span class="db8orange">Analytics</span>
  - <a href="https://matomo.org/" target="_blank">Matomo Analytics</a>

---

<div class="sheet">Accessibility</div>

----

### Accessibility (WCAG)

- <span class="db8orange">Accessibility Tools</span>
  - Google Lighthouse -> Google Chrome > Inspect
  - <a href="https://www.screamingfrog.co.uk/seo-spider/" target="_blank">Screaming Frog</a> SEO Spider
  - <a href="https://wave.webaim.org/" target="_blank">WAVE</a> Web Accessibility Evaluation Tools
  - <a href="https://wave.webaim.org/extension/" target="_blank">WAVE</a> Browser Extension

---

<div class="sheet">Mobile friendly</div>

----

###  Mobile friendly

- <span class="db8orange">Browser</span>
  - Google Lighthouse -> Google Chrome > Inspect
  - <a href="https://www.screamingfrog.co.uk/seo-spider/" target="_blank">Screaming Frog</a> SEO Spider
  - <a href="https://yootheme.com/" target="_blank">YOOtheme Pro</a> check different screens
- <span class="db8orange">Online Tools</span>
    - Bing <a href="https://www.bing.com/webmaster/tools/mobile-friendliness" target="_blank">Mobile Friendliness Test Tool</a>

---

<div class="sheet">Website Monitoring & Maintenance</div>

----

### Website Monitoring & Maintenance

- <span class="db8orange">Free reports</span>
  - <a href="https://search.google.com/search-console/about" target="_blank">Google Search Console</a>
- <span class="db8orange">Self Hosted</span>
  - <a href="https://www.yoursites.net/" target="_blank">Yoursites</a> (paid)
  - <a href="https://www.akeeba.com/products/panopticon.html" target="_blank">Akeeba Panopticon</a>
- <span class="db8orange">SaaS solutions</span>
  - <a href="https://watchful.net/" target="_blank">Watchful</a> (paid)
  - <a href="https://mysites.guru/" targer="_blank">Sitesguru</a> (paid)

---

<div class="sheet">Quick scan</div>

----

### Quick Scan
- <span class="db8orange">Besides Lighthouse + Screamin Frog</span>
    - Linux command line tool: dig
    - <a href="https://web-check.xyz/" target="_blank">web-check</a>

---

<div class="sheet">Questions?</div>

----

### Photos

- All photos
  - generated by me
  - using ChatGPT 5.2
  - and some good prompts