1. JOOMLA 2.5 TEMPLATES
Byg din egen template og lær om overrides
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
2. DAGENS PROGRAM
Velkommen
Om templates
Hvad er en template?
Hvordan det virker - design adskilt fra indhold
Forskel på købe og specialdesignet templates
Installation og assignment
Værktøjer og struktur
Teknologier der skal bruges
Værktøjer og links
Templatens opbygning
Hvad templatens også kan indeholde
Implementering af template
Planlægning af struktur og modulpositioner
HTML vs. CSS templates
Joomla! templatetags
Modulpositioner uddybet
PHP templatetags
Implementering af template XML fil
Gennemgang af XML installer
Brug af ”discover” installation
Gennemgang af templatekonfiguration
Template-overrides
Hvad er overrides?
Hvordan bruges overrides?
Færdiggørelse
Test af template i browsere
Gode tips og råd
Udvikling af egen template
3. KORT OM MIG OG TOOLMASTER.DK
Thomas Kampp
31 år
København
IT-uddannet
Joomla! siden år 2003
Bl.a. udvikler af:
CB plugin “Public Mail”
CB plugin “User IP logger”
Ejer af Toolmaster.dk
Startet i 2004
www.toolmaster.dk
www.facebook.com/toolmaster.dk
www.linkedin.com/in/kampp
5. HVAD ER EN TEMPLATE?
Templaten er
Sidens udseende/design
Jeres identitet
Forskellig fra andres sider
Templatetyper
Unikt udviklet
Genbrug eller indkøbt
Templateformål
Sikre ens undersider
Styres alt design fra et sted
Nemt kunne skifte design
6. DESIGN ER ADSKILT FRA INDHOLD!
Joomla er opbygget i ”MVC” (Model-View-Controller)
”Indhold” (fx artikler) er placeret i databasen
”Funktionalitet” er selve Joomla koden/systemet
”Design” er måden vi præsenterer ”indhold” på
8. SPECIALUDVIKLET VS. KØBE TEMPLATES
Specialudviklet template
Fordele
Få det præcist som det ønskes
Lettere at holde størrelsen på templaten nede
Få en målrettet template med jeres forretningsidentitet (herunder farver)
Ulemper
Udgiften og/eller tidsforbruget
Kræver ofte enten en udgift til en grafiker og/eller programmør
Købte templates (ofte 300 kr.)
Fordele
Der er ingen udviklingsudgift
Kom videre og i gang med det samme
Templaten bliver vedligeholdt af professionelle
Der følger ofte en mobil/tablet version af templaten med
Man får ofte mange ekstra funktioner, muligheder, moduler mm. med
Ulemper
Hacks bør dokumenteres
Mange andre bruger dette design
Ikke altid nemt at lave større ændringer, som fx tilføje en modulposition
Man skal ofte lave et nyt/unikt stylesheet der har farver efter ens identitet
13. TEKNOLOGIER DER SKAL BRUGES (PRIORITERET)
HTML
CSS
XML
Joomla Framework
PHP
JavaScript
14. VÆRKTØJER DER KAN BRUGES
Gratis programmer
Editor ”Notepad++”: http://notepad-plus-plus.org
Editor ”PsPad” (bedst til CSS): http://www.pspad.com
Foto-programmet ”Paint.net”: http://www.getpaint.net
Browseren Firefox: http://www.mozilla.org/da/firefox/
Udvidelsen ”Firebug” til Firefox: https://getfirebug.com
WAMPP server: http://www.wampserver.com/en/
Online services
Template inspiration: http://www.templates.toolmaster.dk
Joomla print, e-mail og pdf ikoner: http://www.ikoner.toolmaster.dk
Gratis Joomla templates: http://www.joomlaos.de/joomla_template_galerie.html
Favicon generator: http://favicon-generator.org
W3C, HTML: http://validator.w3.org
W3C, CSS: http://jigsaw.w3.org/css-validator/
Google Webmaster: https://www.google.com/webmasters/tools/
Sidens loadhastigheder: http://tools.pingdom.com/fpt/
Sidens loadhastigheder: http://www.webpagetest.org
Hvordan ser siden ud i andre browsere/OS: http://browsershots.org
Hvordan ser bots/søgemaskiner siden? I Google skrives:
cache:www.hjemmeside.dk
15. FIREBUG TIL FIREFOX
1. Højreklik på et element og vælg ”Inspicer element”
2. Se kildekoden for det valgte element
3. Modificer CSS’en for valgte element på alle tænkelige måder og se resultatet. Se linje-nr.
1
2
3
16. EN TEMPLATE BESTÅR SOM MINIMUM AF
FØLGENDE FILER OG MAPPER
Filen ”index.html”
Denne fil uden indhold, skal af sikkerhedsgrunde placeres i alle mapper (også images og css)
Filerne ”template_thumbnail.png” og ”template_preview.png”
To billeder (i forskellige størrelser) af hvordan den færdige template ser ud
Filen ”index.php”
Templatens struktur og opbygning, inkl. modulpositionerne
Filen ”template.css” (placeret i mappen ”css”)
Templatens design, farver, afstande, font, størrelser mm.
Filen ”templateDetails.xml”
Templatens installationsfil og konfiguration
Mappen ”images”
Alle templatens billeder og baggrunde placeres i denne mappe
Mappen ”css”
Alle templatens stylesheet(s) placeres i denne mappe (inkl. ”template.css”)
17. HVAD KAN EN TEMPLATE OGSÅ INDEHOLDE?
JavaScript (fx til en menu)
Fonte
Sprogfiler
Én 404-error page
Component.php som kun viser komponentet
”Overrides” (kan ændre visningen af udvidelser)
Joomla ikoner (print og e-mail)
Favicon
Kort sagt, samt indeholder templaten alle
elementer der bestemmer hvordan alt indhold ser ud
19. PLANLÆGNING AF DESIGN, STRUKTUR SAMT
TEMPLATENS MODULPOSITIONER
Der kan godt være flere aktive
moduler i en modulposition
Visning af en modulposition
kan godt afhænge af, om der er
aktive eller ikke aktive moduler
i en anden modulposition
Bredde på et modul kan automatisk
afgøres af antallet af moduler
i modulpositionen
Husk en menu, logo, breadcrumbs
og søg også er moduler
”System output” eller ”main content”
er komponentet
20. HTML TEMPLATES VS. CSS TEMPLATES
Fordele ved HTML template
Lettere og hurtigere kodet
Fordele ved CSS templates
Mindre kodemængde
Hurtigere load tid
Bedre brugeroplevelse
Bedre søgemaskineoptimering
Bedre browserkompatabilitet
21. SE TEMPLATENS MODULPOSITIONER
1
3
2
Se modulpositioner i frontend
ved at tilføje tp=1
som parameter i URL’en
Fx ”index.php?tp=1” eller
”www.domæne.dk/?tp=1”
22. TEMPLATE INDHOLDS INDSÆTTELSESTAGS
<jdoc:include type=”head” />
Indsætter output fra Joomla, som sidens titel, meta beskrivelse og tags
<jdoc:include type=”modules” name=”left” style=”xhtml” />
Indsætter modulpositionerne i templaten hvor i moduler kan placeres
Koden bruges som den eneste flere gange, alt efter antallet af modulpositioner
<jdoc:include type=”message” />
Indsætter output beskeder fra Joomla til brugeren (fx ”Tak for din mail”)
<jdoc:include type=”component” />
Indsætter komponenten i templaten (fx nyheder, artikel, eller kontaktform)
<jdoc:include type=”modules” name=”debug” />
Indsætter output fra debugsystemet i Joomla (hvis aktiveret).
Placeres blot helt i bunden af templaten
23. MODULPOSITIONERS ”NAME” & ”STYLE”
Udgangspunkt
<jdoc:include type=”modules” name=”Y” style=”X” />
Tagget ”name” (Y)
Tagget ”name” er navnet på modulpositionen. Man kan helt selv vælge navnet!
Dette kunne fx være ”user3”, ”search”, ”topmenu”, ”breadcrumb”, ”left”, ”right”.
Tagget ”style” (X)
”table” – Opretter HTML tabeller rundt om modulpositionen og modultitel
”horiz” – Opretter HTML horisontal tabel rundt om modulpositionen og modultitel
”xhtml” – Opretter et div-baseret layout rundt om modulpositionen og modultitel
”rounded” – Opretter divs rundt om modulpositionen, så der kan laves runde hjørner
”outline” – Opretter et simpelt layout brugt til preview/udvilking
”none” – Fjerner så mange tags så muligt, samt selve modulets titel
Man kan lade være med at definere en ”style” og helt fjerne tagget
Man kan definere ens helt egen ”style” i et stylesheet (CSS), ofte kaldt ”chrome”.
Færdigt eksempel
<jdoc:include type=”modules” name=”left” style=”xhtml” />
24. VIGTIGSTE TEMPLATE JOOMLA PHP-TAGS
echo $this->baseurl;
Skriver den fulde URL/sti til Joomla installationen
For at templaten kan bruges på alle hjemmesider bør dette tag altid bruges
echo $this->template;
Skriver navnet på templaten, defineret i XML’en
For at templaten nemt kan kopieres bør dette tag altid bruges
echo $this->_charset;
Skriver sidens charset (fx UTF8), så søgemaskiner og browser læser siden korrekt
echo $this->language;
Skriver sidens sprog, så søgemaskiner læser siden korrekt
echo $this->direction;
Skriver sidens læseretning (”rtl” eller ”ltr”), til hvis siden understøtter begge
$var = $this->params->get('templatecolor');
Henter variabel ”templatecolor” fra template-konfigurationen og placerer den i $var
if ($this->countModules(‘right'))
Tester at der er aktive moduler i modulpositionen
if ($this->countModules(‘left')==0)
Tester at der ikke er nogle aktive moduler i modulpositionen
25. SKAB FORBINDELSE TIL STYLESHEET (CSS)
Eksempel på brug af:
echo $this->baseurl;
echo $this->template;
28. ”DISCOVER” I STEDET FOR INSTALLATION
Så snart projektet er oprettet, og XML på plads kan man:
1
2 5 3
4
Det er fx nok at kopiere en template, ændre mappens navn,
samt ændre navnet på templaten i XML installer filen.
29. GENNEMGANG AF TEMPLATEKONFIGURATION
Om templatekonfigurationer
Konfigurationen er en del af XML installationsfilen!
Det er ikke påkrævet at have en konfiguration!
Man behøver ikke at bruge en sprogfil!
Der kan bruges text, textarea, media, dropdown (list), radiobuttons (radio) mm.
31. HVAD ER ”OVERRIDES”?
Templates bestemmer design
Sidens generelle design og udseende
Herunder formelementers og indholds design,
farver, størrelser og udseende
Overrides bestemmer struktur og indhold
Enten sprog, modul eller komponents struktur
Herunder formelementernes og indholds
orden, stuktur og individuel placering
Kan ændre, fjerne eller tilføje information
Forudsætter modul eller komponent bruger MVC
Hvorfor bruge overrides?
Man kan ændre udvidelserne radikalt
Der ændres kun i en kopi af originalfilen
Man kan helt undgå hacks af udvidelser
Gør opdatering og vedligeholdelse lettere
Overrides kan følge din template så udvidelser altid matcher templaten
32. HVORDAN BRUGES OVERRIDES?
Joomla tjekker selv om der er overrides der skal vises. Intet skal aktiveres
Overrides kan bruges på komponenter, sprog og moduler
Oprettelse af override sker ved at kopiere standard udseendet over i templatens
override-mappe. Fx:
Designet vi ønsker at ændre Kopieres til template override mappen
Herefter modificerer vi den kopieret template (i dette eksempel ”default.php”)
34. TEST ALTID TEMPLATEN I FLERE BROWSERE
Internet Explorer (IE)
Chrome
Firefox (FF)
Opera
Safari
Danskernes browservalg 2012 - kilde www.fdim.dk
Forvent at bruge op mod 1/6 af udviklingstiden på at få
templaten til at virke i ældre ”Internet Explorer” versioner
35. GODE TIPS OG RÅD
Kopier templatens filstruktur fra en anden template
Overvej stærkt at bruge den ekstra tid/udgift på at lave
templaten ”table-less” (dvs. i CSS og ikke HTML)
Der er tidspunkter hvor det bedre kan betale sig at modificere en
eksisterende template end lave en ny
Undgå at bruge flash og frames
Tøm ud i <header>
Overhold W3C standarden (kun 4,37 % gør dette)
Sikre at søgemaskinerne læser templaten korrekt
Sikre templaten virker i forskellige browsere
Hastighedstest siden, for at se om billeder er for store
For super søgemaskineoptimering, bør tags og billeder
navngives fornuftigt
37. ØVELSE - UDVIKLING AF EGEN TEMPLATE
1. Opret projektet direkte i Joomla mappen ”templates”:
A. Kopier en eksisterende template for at få filer og struktur med
B. Omdøb den kopieret templatemappe til sigende navn uden mellemrum
C. Fjern herefter elementer og filer du ved ikke skal bruges
2. Åben XML installationsfilen ”templateDetails.xml”
A. Ret så meget til du kan, herunder <name> så vi kan kende den fra de andre templates
B. Indskriv de modulpositioner du regner med at have
3. Tag templaten i brug
A. Brug Joomla ”Extension Manager” til at ”discover” din template, så vi kan se mens vi arbejder videre med templaten
B. Aktiver templaten som default så vi kan se ændringerne
4. Åben ”index.php” filen
A. Ret <header> til, og skab forbindelse til stylesheetet
B. Skab i HTML (og/eller CSS) skelettet du ønsker templaten skal have
C. Indsæt Joomla tags for komponent, systembeskeder, debug og moduler
D. Sikre at templaten er uafhængig af navn og server med tags vi så tidligere
5. Åben stylesheet i mappen ”css” (ofte kaldt ”template.css”)
A. Sæt baggrunden, centrer siden, bestem farver på links, størrelser på headlines
B. Få styr afstande mellem elementerne og modulpositioner på plads
C. Lav ændringer til modulerne, og definer menuen
6. Opret en konfiguration i XML installationsfilen til at styre fx:
A. Hvilket af to stylesheets der skal bruges med forskellige farver
B. Om en modulposition skal bruges
C. Templatens bredde
38. GENNEMGANG AF DEFAULT TEMPLATE ”ATOMIC”
Lad os hurtigt gennemgå default templaten ”atomic”
Selve filstrukturen
De to preview billeder af templaten
XML installationsfilen
Selve templaten i index.php
Stylesheets i mappen ”css”
Selve stylesheetet i template.css
Overrides mappen ”html”, samt enkelt override
Simple ændringer på storskærmen
Tilføjelse af modulposition til templaten
Oprettelse af konfiguration der styrer modulpositionen
39. TAK FOR NU …
Husk at tage et visitkort
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224