Joomla improved

De hoofdpresentatie van vanavond werd verzorgd door Roland Dalmulder.

Browser tools

FireBug is reuze handig voor het live bekijken en bewerken van webpagina's. Zo zie je in een oogopslag wat er mis gaat in je pagina of waarom bepaalde onderdelen langzaam laden. Een must voor webdevelopers in combinatie met de Web Developer Tool.

Bij het opstarten van Firebug

De console:

  • als de tekst in rood staat dan is iets fout in de code string.
  • Als de tekst zwart is dan is de codestring goed.  
  • Alle teksten daarachter staan zijn submeldingen

De Html tab:

dat is de broncode van de website hier kan je door rechts te klikken op de mus op inspect klikken. Aan de rechterkant staat tekst doordat deze een kleur  heft kan je zien welke CSS hieraan gekoppeld is.

Net Tab:

  • hier kan je zien, hoelang het duurt om de pagina of de website te laden.  
  • Hoelang de server nodig heeft om deze pagina te maken.
  • De URL persist Status (timeline) kan je zien hoeveel tijd er gebruikt wordt)

Hij laat niet zien als er niets getoond wordt als je eroverheen gaat.

Cookies:

Remove Cookies, worden door websites die u bezoekt op uw computer opgeslagen en bevatten bepaalde informatie, zoals websitevoorkeuren of aanmeldingsstatus. Je kun took de cookies in Firefox verwijderen.

Pagespeed moet je zelf aanzetten, hiermee kan je de website pagina’s sneller maken.  

Pixel perfect Pixel Perfect is een Firefox / Firebug extensie die het mogelijk maakt web-ontwikkelaars en ontwerpers om een web samenstelling gemakkelijk overlay over bovenkant van de ontwikkelde HTML

Het is heel lastig om de Element.style terug te vinden.

Streep op de pagina, rechtesklikken (inspect Element (debugger van firefox)
Je kan een gedeelte selecteren en van onder naar boven zoeken

Deze tag background (custum css) veranderen en kan je veranderen in

Wat niet kan in firebug is je CSS aanpassen en saven van je aangepaste CSS file

Firefox kan je wel je wel (shift F7) in de webdeveloper met de style editor een CSS lokaal opslaan.  Door op rechts te klikken:  kan je copy rule declaration en/of  Copy style regulation opslaan

Klik op de CSS TAB dan op elements klikken en die springt dan direct naar de HTML toe.

Expand shorthand properties.

Firebug rechtsklikken. View pageinfo (media )

Installeren van (webkit-transition)

Ze staan wel in d CSS maar niet in het rechter gedeelte.

In de Style is het wel handig om :hover, :Active:  Focus: aan te vinken.

Ook in de HTML tab kan je zoekterm invullen, die wordt dan als kleur code op gegeven van de term in de html code.

Webdeveloper Tool Bar

CSS balk → Disable styles  (pagina zonder opmaak) Je kan ook tijdelijk de website pagina’s op disable zetten.

Forms (Display form details)
Wat hij laat zien, alle verborgen velden en waar hij naar toe gestuurd wordt. Zodat je de waarde kan zien, (dat makkelijk met debuggen)
Display passwords  (forms)
Enable form fields

Bij de optie “View all images”: kan je alle plaatjes zien die in de website worden gebruikt.

Miscellaneous: Clear Cache,   Clear History.  (Cache op je eigen computer)
CTLR + F5
Het gebruik van de Ruler is ook een handige optie.   
Resizer: View Responsive layout, wordt ook vaak gebruikt.
Je kan op de locale computer  een paar extra schermen toevoegen  zodat je b.v. de kleiner Ipad scherm kan testen.

Optimalisatie

Er is ook aandacht besteed aan verschillende mogelijkheden om de website te optimaliseren. Zo wordt getoond hoe je de snelheid van je website kan meten, wat er eventueel aangepast kan worden en hoe je dat dan implementeert. Verschillende caching opties om de snelheid van de website te verbeteren worden besproken.

.htaccess code om caching in te stellen op de site. Dit is ook nodig om de GZIP paginacompressie binnen Joomla Globale configuratie te kunnen gebruiken.

 


# Expiration
<IfModule mod_expires.c>
   ExpiresActive On
   <FilesMatch \.(css|js|bmp|png|gif|jpe?g|ico|eot|ttf|otf|svg|flv|wmv|asf|asx|wma|wax|wmx|wm|swf|pdf|doc|rtf|xls|ppt)$>
      ExpiresDefault "access plus 7 days"
   </FilesMatch>
</IfModule>
# End Expiration

 

# Deflate
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    #Do not deflate images
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    #Do not deflate executable and archived files
    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
    #Do not deflate media - there are known issues with plug-ins dealing with deflated media
    SetEnvIfNoCase Request_URI \.(pdf|avi|mov|mp3|mp4|rm)$ no-gzip dont-vary
</IfModule>
# End Deflate


Page Speed

 

Op de website van google staat de locatie voor het downloaden van de tool.
Leverage browser caching. Access plus 7 days. (komt op de site te staan)

Enable compression

Serve scaled images (kleine plaatjes)
Caching aanzetten: aanzetten in joomla, zorgt voor meer snelheid.

  • Conservative caching  (cached de pagina voor iedereen)
  • Progressive caching ( cached paginas individueel voor bezoekers)
  • (die kan je op 15 minuten zetten) dan krijg je weer nieuwe  pagina’s

Joomla debug

Joomla heeft ingebouwde debug informatie die van pas kan komen om problemen te analyseren, de debug informatie wordt uitgelegd en waar je op kan letten.

Debug system: Syteem, Taalbestanden
Je kan bij profile informatie kijken wat de resultaten zijn.
Als er een grote tijdsprong in zit kan je een probleem vinden in joomla.

Hier kan je ook het geheugen gebruik inzien.

Database Quaries worden in 3 delen uitgevoerd, waarbij twee Queries op type
Worden uitgevoerd.

Parsing errors  in Language files
In taalbestanden kan je ook direct de fout zien.
De Taalbestanden moeten uiteraard wel geladen zijn

Bij alle niet vertaalde strings staan (twee vraagtekens voor)

“Language files Loaded”   Untranslated   Er is System information maar ook PHP Information te checken.  

Joomla NL sites
Websites automatisch installeren.  Watchful.li  (one dashboard)

Tijdens het testen kan je beter de cache uitzetten
Ook kan je beter de Sef cache uitzetten tijdens testen.
Systeem cach opschonen ( kan  je in de configuratie van Joomla doen)

Elke Hosting provider geeft cache mogelijkheden die zijn provider gerelateerd.

Joomla globale configuratie

Firebug, Website optimalisatie, Joomla debug

  • Aangemaakt op .
  • Hits: 1862