JOOMLA 2.5 TEMPLATESByg din egen template og lær om overrideswww.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
DAGENS PROGRAM   Velkommen   Om templates        Hvad er en template?        Hvordan det virker - design adskilt fra i...
KORT OM MIG OG TOOLMASTER.DKThomas Kampp 31 år København IT-uddannet Joomla! siden år 2003 Bl.a. udvikler af:       ...
Om Templates
HVAD ER EN TEMPLATE?Templaten er Sidens udseende/design Jeres identitet Forskellig fra andres siderTemplatetyper Unikt...
DESIGN ER ADSKILT FRA INDHOLD!Joomla er opbygget i ”MVC” (Model-View-Controller) ”Indhold” (fx artikler) er placeret i da...
EKSEMPLER PÅ TEMPLATES
SPECIALUDVIKLET VS. KØBE TEMPLATESSpecialudviklet template Fordele       Få det præcist som det ønskes       Lettere at...
INSPIRATION & TEMPLATE-OVERSIGT        www.templates.toolmaster.dk
VALG AF DEFAULT TEMPLATE I JOOMLA 2.5Efter installationen i ”Extension Manager” gøres følgende:                           ...
ASSIGNMENT AF TEMPLATE I JOOMLA 2.5Med ”assignment” kan forskellige templates bruges på forskellige undersider:           ...
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...
FIREBUG TIL FIREFOX1.   Højreklik på et element og vælg ”Inspicer element”2.   Se kildekoden for det valgte element3.   Mo...
EN TEMPLATE BESTÅR SOM MINIMUM AFFØLGENDE FILER OG MAPPER   Filen ”index.html”        Denne fil uden indhold, skal af si...
HVAD KAN EN TEMPLATE OGSÅ INDEHOLDE?   JavaScript (fx til en menu)   Fonte   Sprogfiler   Én 404-error page   Compone...
Implementering af template
PLANLÆGNING AF DESIGN, STRUKTUR SAMTTEMPLATENS MODULPOSITIONER   Der kan godt være flere aktive    moduler i en modulposi...
HTML TEMPLATES VS. CSS TEMPLATESFordele ved HTML template Lettere og hurtigere kodetFordele ved CSS templates Mindre kod...
SE TEMPLATENS MODULPOSITIONER                                    1                                3                    2Se...
TEMPLATE INDHOLDS INDSÆTTELSESTAGS   <jdoc:include type=”head” />      Indsætter output fra Joomla, som sidens titel, me...
MODULPOSITIONERS ”NAME” & ”STYLE”Udgangspunkt <jdoc:include type=”modules” name=”Y” style=”X” />Tagget ”name” (Y) Tagget...
VIGTIGSTE TEMPLATE JOOMLA PHP-TAGS   echo $this->baseurl;        Skriver den fulde URL/sti til Joomla installationen    ...
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 INSTALLATIONSå snart projektet er oprettet, og XML på plads kan man:                              ...
GENNEMGANG AF TEMPLATEKONFIGURATIONOm templatekonfigurationer   Konfigurationen er en del af XML installationsfilen!   D...
Template-overrides
HVAD ER ”OVERRIDES”?Templates bestemmer design   Sidens generelle design og udseende      Herunder formelementers og ind...
HVORDAN BRUGES OVERRIDES?   Joomla tjekker selv om der er overrides der skal vises. Intet skal aktiveres   Overrides kan...
Færdiggørelse
TEST ALTID TEMPLATEN I FLERE BROWSERE   Internet Explorer (IE)   Chrome   Firefox (FF)   Opera   Safari              ...
GODE TIPS OG RÅD   Kopier templatens filstruktur fra en anden template   Overvej stærkt at bruge den ekstra tid/udgift p...
Udvikling af egen template
ØVELSE - UDVIKLING AF EGEN TEMPLATE1.    Opret projektet direkte i Joomla mappen ”templates”:     A.     Kopier en eksiste...
GENNEMGANG AF DEFAULT TEMPLATE ”ATOMIC”   Lad os hurtigt gennemgå default templaten ”atomic”       Selve filstrukturen  ...
TAK FOR NU …                            Husk at tage et visitkort www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
Upcoming SlideShare
Loading in …5
×

Toolmaster.dk - Joomla templates basis kursus

1,798 views

Published on

Slides fra foredrag af Toolmaster.dk, om at lave sin egen Joomla CMS template, i forbindelse med Joomladay Danmark 2012. jd12dk

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,798
On SlideShare
0
From Embeds
0
Number of Embeds
388
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Afholdelsestid: 2 x 50 minutter
  • 30 min her til
  • 43 min her til
  • 43 min her til
  • Kilde: fdim.dk – fra oktober 2012
  • Toolmaster.dk - Joomla templates basis kursus

    1. 1. JOOMLA 2.5 TEMPLATESByg din egen template og lær om overrideswww.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224
    2. 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. 3. KORT OM MIG OG TOOLMASTER.DKThomas 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
    4. 4. Om Templates
    5. 5. HVAD ER EN TEMPLATE?Templaten er Sidens udseende/design Jeres identitet Forskellig fra andres siderTemplatetyper Unikt udviklet Genbrug eller indkøbtTemplateformål Sikre ens undersider Styres alt design fra et sted Nemt kunne skifte design
    6. 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å
    7. 7. EKSEMPLER PÅ TEMPLATES
    8. 8. 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ørKø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
    9. 9. INSPIRATION & TEMPLATE-OVERSIGT www.templates.toolmaster.dk
    10. 10. VALG AF DEFAULT TEMPLATE I JOOMLA 2.5Efter installationen i ”Extension Manager” gøres følgende: 1 3 2
    11. 11. ASSIGNMENT AF TEMPLATE I JOOMLA 2.5Med ”assignment” kan forskellige templates bruges på forskellige undersider: 2 1
    12. 12. Værktøjer og struktur
    13. 13. TEKNOLOGIER DER SKAL BRUGES (PRIORITERET) HTML CSS XML Joomla Framework PHP JavaScript
    14. 14. 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
    15. 15. 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 2 3
    16. 16. EN TEMPLATE BESTÅR SOM MINIMUM AFFØ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. 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) FaviconKort sagt, samt indeholder templaten alleelementer der bestemmer hvordan alt indhold ser ud
    18. 18. Implementering af template
    19. 19. PLANLÆGNING AF DESIGN, STRUKTUR SAMTTEMPLATENS 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. 20. HTML TEMPLATES VS. CSS TEMPLATESFordele ved HTML template Lettere og hurtigere kodetFordele ved CSS templates Mindre kodemængde Hurtigere load tid  Bedre brugeroplevelse Bedre søgemaskineoptimering Bedre browserkompatabilitet
    21. 21. SE TEMPLATENS MODULPOSITIONER 1 3 2Se modulpositioner i frontendved at tilføje tp=1som parameter i URL’enFx ”index.php?tp=1” eller”www.domæne.dk/?tp=1”
    22. 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. 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. 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. 25. SKAB FORBINDELSE TIL STYLESHEET (CSS)Eksempel på brug af: echo $this->baseurl; echo $this->template;
    26. 26. Implementering af XML fil
    27. 27. GENNEMGANG AF XML INSTALLER
    28. 28. ”DISCOVER” I STEDET FOR INSTALLATIONSå snart projektet er oprettet, og XML på plads kan man: 1 2 5 34Det er fx nok at kopiere en template, ændre mappens navn,samt ændre navnet på templaten i XML installer filen.
    29. 29. 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.
    30. 30. Template-overrides
    31. 31. HVAD ER ”OVERRIDES”?Templates bestemmer design Sidens generelle design og udseende  Herunder formelementers og indholds design, farver, størrelser og udseendeOverrides 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 MVCHvorfor 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. 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”)
    33. 33. Færdiggørelse
    34. 34. TEST ALTID TEMPLATEN I FLERE BROWSERE Internet Explorer (IE) Chrome Firefox (FF) Opera Safari Danskernes browservalg 2012 - kilde www.fdim.dkForvent at bruge op mod 1/6 af udviklingstiden på at fåtemplaten til at virke i ældre ”Internet Explorer” versioner
    35. 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
    36. 36. Udvikling af egen template
    37. 37. ØVELSE - UDVIKLING AF EGEN TEMPLATE1. 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 bruges2. Å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 have3. 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 ændringerne4. Å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å tidligere5. Å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 menuen6. 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. 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. 39. TAK FOR NU … Husk at tage et visitkort www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224

    ×