Post on 23-Dec-2014
description
JOOMLA 2.5 TEMPLATESByg din egen template og lær om overrides
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
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
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
Om Templates
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
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å
EKSEMPLER PÅ TEMPLATES
SPECIALUDVIKLET VS. KØBE TEMPLATESSpecialudviklet 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
VALG AF DEFAULT TEMPLATE I JOOMLA 2.5
1
2
3
Efter installationen i ”Extension Manager” gøres følgende:
ASSIGNMENT AF TEMPLATE I JOOMLA 2.5
Med ”assignment” kan forskellige templates bruges på forskellige undersider:
1
2
Værktøjer og struktur
TEKNOLOGIER DER SKAL BRUGES (PRIORITERET)
HTML CSS XML Joomla Framework
PHP JavaScript
VÆRKTØJER DER KAN BRUGESGratis 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
FIREBUG TIL FIREFOX1. Højreklik på et element og vælg ”Inspicer element”2. Se kildekoden for det valgte element3. Modificer CSS’en for valgte element på alle tænkelige måder og se resultatet. Se
linje-nr.
1
23
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”)
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
Implementering af template
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 moduleri en anden modulposition
Bredde på et modul kan automatiskafgø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
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
SE TEMPLATENS MODULPOSITIONER
Se modulpositioner i frontendved at tilføje tp=1som parameter i URL’en
Fx ”index.php?tp=1” eller
”www.domæne.dk/?tp=1”
1
2
3
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
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” />
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
SKAB FORBINDELSE TIL STYLESHEET (CSS)
Eksempel på brug af: echo $this->baseurl; echo $this->template;
Implementering af XML fil
GENNEMGANG AF XML INSTALLER
”DISCOVER” I STEDET FOR INSTALLATION
Så snart projektet er oprettet, og XML på plads kan man:
Det er fx nok at kopiere en template, ændre mappens navn,
samt ændre navnet på templaten i XML installer filen.
1
2 3
4
5
GENNEMGANG AF TEMPLATEKONFIGURATIONOm 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.
Template-overrides
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
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:
Herefter modificerer vi den kopieret template (i dette eksempel ”default.php”)
Designet vi ønsker at ændre Kopieres til template override mappen
Færdiggørelse
TEST ALTID TEMPLATEN I FLERE BROWSERE Internet Explorer (IE)
Chrome Firefox (FF) Opera
Safari
Forvent at bruge op mod 1/6 af udviklingstiden på at få templaten til at virke i ældre ”Internet Explorer” versioner
Danskernes browservalg 2012 - kilde www.fdim.dk
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
Udvikling af egen template
ØVELSE - UDVIKLING AF EGEN TEMPLATE1. Opret projektet direkte i Joomla mappen ”templates”:
A. Kopier en eksisterende template for at få filer og struktur medB. Omdøb den kopieret templatemappe til sigende navn uden mellemrumC. 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 templatesB. Indskriv de modulpositioner du regner med at have
3. Tag templaten i brugA. Brug Joomla ”Extension Manager” til at ”discover” din template, så vi kan se mens vi arbejder videre med
templatenB. Aktiver templaten som default så vi kan se ændringerne
4. Åben ”index.php” filenA. Ret <header> til, og skab forbindelse til stylesheetetB. Skab i HTML (og/eller CSS) skelettet du ønsker templaten skal haveC. Indsæt Joomla tags for komponent, systembeskeder, debug og modulerD. 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å headlinesB. Få styr afstande mellem elementerne og modulpositioner på pladsC. 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 farverB. Om en modulposition skal brugesC. Templatens bredde
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
TAK FOR NU …
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
Husk at tage et visitkort