CS TYPO3 Manual TYPO3 CMS Opbygning...2 Log ind...2 Backend...3 Frontend...5 Hvor skal jeg klikke?...6 Gem, gem og vis, gem og luk og luk...7 Håndtering af sider og menuer...8 Sammenhæng mellem sider og menuer...8 Oprettelse af sider...8 Flytte/kopiere sider... 11 Slette sider... 12 Skjule sider... 13 Sideegenskaber... 14 Sideskabeloner (templates)... 15 Redigering af indhold...16 Indsætte nyt element... 16 Slette og gendanne element... 17 Redigere element... 18 Flytte element... 19 Reference elementer henvisninger mellem elementer... 19 Typer af elementer... 20 Sproghåndtering...22 Oversættelse af sider... 22 Oversættelse af sideindhold... 23 Slette sprogoversættelser... 26 Filhåndtering...28 Nyhedsmodul...29 Versionering...30 Udarbejdet af klaus@cs.aau.dk Side 1 af 30
TYPO3 CMS Opbygning TYPO3 er ét ud af mange Content Management Systemer (CMS) på det danske marked. TYPO3 er specielt, da det er Open Source og gratis. Man skal dog ikke skue hunden på hårene. TYPO3 s udbredelse er nærmest eksploderet i Europa, specielt Tyskland, og med en stor brugerbase og mange udviklere bag systemet er TYPO3 godt på vej til at blive et Enterprise CMS, som helt store organisationer kan anvende og i denne klasse koster CMS er let flere hundrede tusinde i licenser. Et CMS grundlæggende formål er, at give websideredaktører mulighed for let at redigere et website uden at skulle kunne designe eller programmer. De mest simple redigeringsmuligheder kan læres på et par timer og så er man i gang. Log ind I TYPO3 redigerer du på nettet direkte i din browser f.eks. i Internet Explorer. For at kunne opdatere indholdet i et CMS system, skal man logge ind i administrationsdelen også kaldet backend. Du logger ind ved at åbne din browser, og åbne jeres website, og tilføje /typo3 efter domænenavnet. F.eks. http://www.cs.aau.dk/typo3/, hvorved følgende dialogboks kommer frem: Indtast dit brugernavn i feltet username, og din adgangskode i feltet password. Klik på knappen log in. Udarbejdet af klaus@cs.aau.dk Side 2 af 30
Skærmbillede 1: Backend login Har du indtastet korrekt brugernavn og adgangskode, og alligevel ikke kan logge ind i backend, kan det være fordi din browser ikke understøtter/accepterer cookies og JavaScript. Backend Backend er der, hvor du logger på som redaktør for at redigere i websitet. Herfra kan du redigere sider, uploade filer, oprette nyheder osv. alt efter hvad der er sat op på dit website. Udarbejdet af klaus@cs.aau.dk Side 3 af 30
Skærmbillede 2: TYPO3 Backenden (administrationssystemet) 1. I kolonne 1 foregår navigering mellem hovedgrupperne i Typo3 eller retter de forskellige administrationsmoduler, der er til rådighed. Eksempelvis foregår sideredigering i page modulet, men upload af filer bl.a. foregår i fillistemodulet, Filelist. 2. Alt efter hvilket punkt der er valgt i kolonne 1, navigerer man her inden for den valgte kategori. I eksemplet ovenover, er hovedkategorien page valgt (i kolonne 1). I kolonne 2, navigerer man herefter mellem de sider der er på websitet. Dette kaldes også sidetræet. 3. Kolonne 3 er selve arbejdsområdet. Her bliver alt input indtastet det kunne f.eks. være en ny sides navn eller indholdet på selve siden. Udarbejdet af klaus@cs.aau.dk Side 4 af 30
OBS: TYPO3 er et stort system. I ovenstående skærmbillede vises der kun et begrænset antal menupunkter. Hvis man loggede på som administrator, ville der være endnu flere administrationsmoduler til rådighed. Det er administratoren, som kan oprette redaktørprofiler og administratoren kan ned til mindste detalje bestemme, hvilke moduler og felter en redaktør skal have adgang til. Du kan derfor ikke regne med at skærmbilleder i denne vejledning præcis svarer til dit eget websites skærmbilleder. Frontend Frontend er websitet, som dine brugere (de studerende og undervisere osv.) kan se fra Internettet. Det er det du sidder og redigerer med TYPO3. Skærmbillede 3: TYPO3 Frontend (websitet) med Frontend redigering aktiveret I TYPO3 er der faktisk det, der hedder Frontend redigering, hvilket betyder at man også kan redigere direkte fra visningen af websitet hvis man vel og mærke er logget på som redaktør og din administrator har slået Frontend redigering til. I ovenstående billede kan det ses med blyanterne, hvor du kan klikke direkte på blyanten og redigere indholdet. Let og fikst og til simpel redigering er man faktisk ikke nød til at bevæge sig rundt i backend, selv om det sikkert vil vise sig mere praktisk jo dygtigere du bliver som redaktør. Udarbejdet af klaus@cs.aau.dk Side 5 af 30
Hvor skal jeg klikke? I Typo3 er der meget stor forskel på, hvor man skal klikke! Klikkes der på f.eks. på ikonet ud for en side i site-træet, fremkommer en klikmenu med valgmuligheder. Det gælder rigtig mange steder, hvor du ser et ikon ud for en tekst. Klikkes der i stedet på sidens navn, vælges siden, og den bliver vist i 3. kolonne, som vises på billedet nedenunder (forudsat at page modulet er valgt). OBS: Læg i øvrigt mærke til linien øverst i toppen til højre, her findes yderligere muligheder bl.a. translation, non-used elements og advanced functions. Trykker du eksempelvis på sidst nævnte, fremkommer en checkboks show hidden elements. Slår du den til, kan du se skjulte elementer (men de vises stadig ikke på websitet, som din bruger navigerer på). TYPO3 vil fremover huske at du har valgt at vise skjulte elementer og knytte det til din profil. Show hidden elements er et eksempel på at visninger kan slås til og fra i TYPO3 og det skal man lige vænne sig til. For det kan være svært at forstå, hvorfor naboen kan se noget, du ikke kan. Forklaringerne kan være flere. Måske har din nabo fået flere rettigheder af administratoren eller også har du ikke slået en visning til. Det kan være lidt frustrerende at vænne sig til i starten, men hvis alle skulle se alt i TYPO3, ville ingen kunne lære TYPO3 på en Udarbejdet af klaus@cs.aau.dk Side 6 af 30
overskuelig tid. TYPO3 er et meget stort system og det er en klar fordel, at det kan tilpasses til lige præcis den opgave du skal løse og ikke mere. Gem, gem og vis, gem og luk og luk I TYPO3 vil du altid sidde og redigere og når du skal gemme vil du have flere muligheder. Øverst og nederst i det du redigerer, vil der typisk være følgende ikoner: Skærmbillede 4: Muligheder for at gemme Disse ikoner har henholdsvis følgende funktioner: Gemmer siden og forbliver i redigering Gemmer og viser siden i et nyt vindue, så du kan se resultatet. Gemmer og lukker siden og du er klar til en ny opgave. Lukker uden at gemme. Udarbejdet af klaus@cs.aau.dk Side 7 af 30
Håndtering af sider og menuer Sammenhæng mellem sider og menuer I TYPO3 er der sammenhæng mellem de sider og menuer du ser i frontend (selve websitet, som er tilgængeligt for alle) og hvad du ser i backend (der, hvor du som redaktør redigerer tekst og billeder). Se nedenfor. Når du opretter en almindelig side, vil den derfor blive vist som et nyt punkt menuen. Når det er sagt, er det det også naturligt, at man kan oprette andre sidetyper, eksempelvis en side, der ikke vises i menuen. Oprettelse af sider Når du skal oprette en ny side, gør du som følger: 1. Vælg page modulet i venstre kolonne. Udarbejdet af klaus@cs.aau.dk Side 8 af 30
2. I sidetræet klikker du på den sides ikon, hvor du ønsker at oprette en ny side. Der kommer en klikmenu frem. 3. Klik New i klikmenuen. Du får nu mulighed for at vælge, hvor du ønsker at placere den nye side. Du kan vælge om du vil oprette en ny side inden i den valgte, eller vælge om du vil benytte en guide. 4. Vælg Click here for wizard! under page (inside). En ny oversigt over dit sidetræ vises, men denne gang med pile. Den pil du peger på, bliver den Udarbejdet af klaus@cs.aau.dk Side 9 af 30
nye sides placering. 5. Klik på den pil, hvor du vil placere den nye side. 6. Vælg en skabelon for din nye side. Antallet af skabeloner afhænger 100% af, hvad der er udviklet til lige præcis dit website. Typiske sideskabeloner vil være en sideskabelon til forsiden, alle undersider. Standardskabelonen er sandsynligvis det du vil vælge i de fleste Udarbejdet af klaus@cs.aau.dk Side 10 af 30
af tilfældene og dette vil normalt være almindelige undersider på websitet. Du kan altid ændre skabelon senere i Edit page properties, som findes ved at højreklikke på den pågældende side i sidetræet. 7. Vælg Default template og giv den nye side en titel. Er der et flueben ved Hide page, skal du lige tage stilling til om dine brugere må se siden. Det må de nok ikke inden du er færdig med indholdet. Så lad siden være skjult, mens du redigerer. 8. Klik på en af gem mulighederne efter ønske Du har nu oprettet en side og et nyt menupunkt (forment skjult for omverdenen indtil du vælger at synliggøre siden). Flytte/kopiere sider Når du skal flytte en side, kan du gøre det ved hjælp af træk og slip i sidetræet. 1. Tryk ned på med museknappen på den side du ønsker at flytte, og hold knappen nede. 2. Træk den ned på den side, hvor du ønsker at placere siden. 3. Herefter kommer en klikmenu frem, som vist herunder Udarbejdet af klaus@cs.aau.dk Side 11 af 30
4. Vælg mulighed efter ønske, som det ses er det også muligt at kopiere vha. denne metode. OBS: Ovenstående er bare en af mulighederne for at flytte eller kopiere side i sidetræet, en anden er at højre klikke på en side i sidetræet, og vælge copy eller cut i klikmenuen. Vælg herefter den position, hvor du ønsker at kopiere siden til og højreklik. Her vil vælge mulighederne paste into og paste after. Slette sider I TYPO3 kan du slette sider. 1. Vælg sidemodulet i venstre kolonne. 2. I sidetræet klikker du på den sides ikon, som skal slettes. Der kommer en klikmenu frem. 3. Klik Delete i klikmenuen Du får nu en advarsel om, hvorvidt du ønsker at slette siden. 4. Klik ok for at slette TIP: I stedet for at slette sider, kan man også flytte sider til affaldsspanden i bunden af sidetræet. Herefter er det også let at trække et element ind i sidetræet igen. Udarbejdet af klaus@cs.aau.dk Side 12 af 30
OBS: Det afhænger af dine rettigheder om du har lov til at slette sider, dog vil du altid kunne slette sider, du selv har oprettet. Skjule sider I TYPO3 kan du også skjule sider. 1. Vælg sidemodulet i venstre kolonne. 2. I sidetræet klikker du på den sides ikon, som skal skjules. Der kommer en klikmenu frem. 3. Klik Hide i klikmenuen og siden vil være skjult i frontend, der hvor dine brugere surfer rundt på dit website. Sideikonet vil derefter skifte, så man kan se siden er skjult: Udarbejdet af klaus@cs.aau.dk Side 13 af 30
4. Herefter kan du trykke på ikonet igen og vælge Unhide, for at får siden vist på websitet igen. Sideegenskaber Til en side i TYPO3, kan der knyttes en række egenskaber f.eks. skjult side, login beskyttet side og mange andre egenskaber. Dette kan du redigere i sidens sidehoved (hvis altså din administrator har givet dig rettigheder til dette i din redaktørprofil). Du kan redigere sidehovedet ved at klikke på ikonet ud for siden og vælge Edit page properties herefter kommer følgende side frem: Skærmbillede 5: Edit page properties (med få informationer) Skærmbilledet indeholder mange informationer og er helt sikkert ikke præcis magen til det du vil se, men de vigtigste felter er: Gem knapperne øverst og nederst Udarbejdet af klaus@cs.aau.dk Side 14 af 30
Skjul side fjern fluebenet, hvis brugere skal kunne se din side Type (Standard side, skjul i menu, genvejsside m.flere) Sidetitel obligatorisk. Er det der stå i menuen og typisk også som Sideskabeloner (templates) I skærmbilledet Edit page properties vil du også finde mulighed for at ændre skabelon for visningen af din side: Lige præcis denne funktion er ikke helt hensigtsmæssig og kæver sin egen lille forklaring. For at vælge hvilken skabelon din side skal være baseret på, skal du gøre følgende: 1. Vælg en Page Template Structure (skabelon) i dropdown menuen 2. Hvis systemet ikke selv foreslår det, skal der klikkes save, og først herefter vil der være tilgængelige skabeloner under Use Template Design, som er det layout siden skal vises i. 3. Vælg det ønskede skabelon design 4. Klik gem. Du kan gentage samme rutine for subages (undersider), hvorefter alle sider under denne side vil vises med den skabelon du vælger (med mindre der aktivt er valgt en anden skabelon længere ned i sidetræet). Udarbejdet af klaus@cs.aau.dk Side 15 af 30
Redigering af indhold TYPO3 er et elementbaseret CMS-system. Dette betyder at du på siderne kan indsætte elementer og at du for det enkelte element kan styre rettigheder ligesom for sider. Hvornår skal et element være aktivt, hvem må se det?, skal det skjules? osv Indsætte nyt element 1. For at indsætte indholdselementer på en side, skal du stå i page-modulet og vælge den side, du vil indsætte indhold på: 2. Klik på Opret nyt element (Læg mærke til at dette ikon er over, under og mellem alle indholdselementer, så du kan vælge hvor du vil placere dit nye element) Udarbejdet af klaus@cs.aau.dk Side 16 af 30
Dialogboksen Vælg Type Af indholdselement kommer frem: 3. Vælg den type element du vil indsætte f.eks. Regular text element 4. Indtast det indhold, som det valgte element kræver. 5. Klik gem for at gemme elementet eller Gem og vis for at se hvordan det ser ud op websitet Slette og gendanne element At slette et element er simpelt. Klik på papirkurven ud for elementet. Udarbejdet af klaus@cs.aau.dk Side 17 af 30
Elementet er herefter slettet. Men du kan faktisk finde elementet under Non-used elements. Herfra kan du vælge create reference, og der vil komme indsætningsikoner, hvor du kan vælge at indsætte det udklippede element. Redigere element 1. Klik på blyanten ud for elementet 2. Rediger elementet og klik gem Udarbejdet af klaus@cs.aau.dk Side 18 af 30
Flytte element 1. Klik på saksen ud for det element, du vil flytte: Der kommen nu indsætningsikoner ind alle de steder, hvor du kan flytte elementet til. 2. Klik på det indsætningsikon, hvor du vil have elementet flyttet hen. TIP: Du kan også vælge en anden side og sætte elementet ind der. Reference elementer henvisninger mellem elementer TYPO3 giver også mulighed for at lade et element referere til et andet element. Fordelen er, at du kan havde det samme element på flere sider, men hvis du redigere i en af dem, bliver begge elementer redigeret samtidigt! Teknikken er lige så simpel som at flytte elementer. Klik på et elements henvisningsikon mellem saksen og papirkurven. Der vil herefter være indsætningsikoner, som giver dig mulighed for at indsætte en reference. Vil du senere ophæve referencen, vil du se at det nye element med en henvisning har et nyt ikon til højre for saksen Create local copy Udarbejdet af klaus@cs.aau.dk Side 19 af 30
Typer af elementer Tekstelementet er nok det hyppigst brugte og er i bund og grund en overskrift og et tekstfelt. Det væsentligste felt her er tekstfeltet og i dette felt har du adgang til en editor med en masse redigering muligheder som i fx Microsoft Word: Skærmbillede 6: Regular text element TYPO3 har længe haft meget stærk billede håndtering. Dette er en af de store fordele ved Open Source projekter man kan bare bruge de andre systemer og det har TYPO3 gjort ved at bruge billedbehandlingsprogrammet ImageMagick m.fl. til at håndtere billeder. I nedenstående er valgt et tekstbilledeelement. Tekstdelen er den samme som ovenfor, men her vises nogle af indstillingsmulighederne for billedet (billederne): Udarbejdet af klaus@cs.aau.dk Side 20 af 30
Skærmbillede 7: Text with image Billeder (images): Her kan du vælge et allerede uploadet billede via fillistemodulet eller du kan uploade et billede direkte fra din egen computer ved at klikke gennemse og udpege den fil, du vil uploade. TYPO3 kan efterfølgende konvertere billedet til GIF og JPG, så det optimerer filstørrelse. Position: Billedets position ift. teksten. Hvis der er valgt flere billeder, kan man vælge antal kolonner de skal vises i. Bredde (width): Indtast bredde i pixels og billedet skaleres/beskæres automatisk. Link: Link på billedet, f.eks. til en anden side. Foruden de nævnte er der også menuer, hvor du kan vælge format på billedet, sort/hvid, gråtoner, rotering af billede m.m. Udarbejdet af klaus@cs.aau.dk Side 21 af 30
Sproghåndtering TYPO3 kan håndtere at sider og sideindhold laves i flere sprog, dvs. at der kan laves mulighed for at brugere, som navigerer rundt på frontenden/websiden, gives mulighed for at vælge hvilket sprog, de ønsker at se siden på: Der kan således sættes et standard sprog samt en række alternative sprog. TYPO3 kan naturligvis ikke selv oversætte siderne og deres indhold, det er derfor en opgave for redaktørerne af websiden. Oversættelse af sider Efter en side er oprette i standard sproget, er det muligt, at lave en oversættelse af siden. (Der skal laves en oversættelse af siden, før det er muligt at lave oversættelser af sidens indhold) Fremgangsmåden er: 1. Vælg page-modulet i venstre side 2. Vælg den side i sidetræet, som endnu ikke er oversat, og som du ønsker at lave en oversættelse af. 3. I toppen af kolonnen i højre side trykkes på translations, hvorunder følgende mulighed vil optræde: Udarbejdet af klaus@cs.aau.dk Side 22 af 30
Her er det muligt, at vælge mellem de alternative sprog, som er oprettet i systemet. I dette tilfælde er engelsk det alternative sprog. 4. Når sproget er valgt, er det muligt at give siden en ny titel oversat til eksempelvis engelsk, samt muligheden for at lave siden at være skjult: 5. Efter dette er udført, er selve sidens oversættelse oprettet. Oversættelse af sideindhold Efter der er oprette en oversættelse af en siden, er det muligt at lave oversættelser af en sides indholdselementer. Hvilket kan gøres på følgende måde: 1. Når en side er oversat, vil der komme en ekstra mulighed for hvert oprettet sideelement, nemlig at oprette en kopi til oversættelse: Udarbejdet af klaus@cs.aau.dk Side 23 af 30
NB: Øverst ses valgmuligheden Show page language version, denne skal aldrig benyttes, når der, som det ses under Page localization mode står Inheritance of values / 1:1. Dette skyldes at TYPO3 har 2 metoder til at understøtte oversættelse af indhold, og den anden metode vil ikke blive gennemgået i denne manual. 2. Det samme ses, hvis man i modsætning til ovenstående, hvor page-modulet er valgt, vælger listevisning på siden i sidetræet: Hvor der nu er en mulighed for oversættelse af elementer under Localize to:. Det er vigtig lige at nævne at Localization view nedrest i vinduet skal tjekket af, for at se ovenstående. 3. Vælges en af de to ovenstående muligheder oprettes en kopi til oversættelse, som er mulig at redigere: Udarbejdet af klaus@cs.aau.dk Side 24 af 30
Her laves den egentlige oversættelse at et indholdselement, som det ses er det muligt at ændre elementtypen, dvs. at et oversat element ikke nødvendigvis behøver være samme type, som standard sproget. Det kunne evt. være man ønskede et billede på oversættelsen, som ikke ellers skal vises. Yderligere er det muligt at skifte mellem elementets sprogoversættelser øverst til højre. TIP: Hvis en side er oversat, vil det være muligt for brugere at vælge sproget i frontenden/websiden. Er et element imidlertid kun oprettet for standard sproget, vil dette blive vist. Det vil sige at der kan blive vist dansk indhold, selvom en bruger har valgt engelsk som sprog. Det er op til den enkelte backend-bruger, at administrere oversættelserne fornuftigt, da der ikke er noget der hindre for at skrive på dansk i en engelsk oversættelse og omvendt. Udarbejdet af klaus@cs.aau.dk Side 25 af 30
Hvis man ønsker at elementer på en given side ikke skal optræde på standard sproget, eksempelvis dansk, kan man vælge at skrive på engelsk i en dansk oversættelse. Det er dog ikke særlig praktisk. Her forelægger en anden mulighed i systemet, når man har oprettet et element i standard sproget, går man ind og redigere elementet. Her tjekkes Show secondary options af: Herefter vil følgende valgmulighed blive synlig: Vælges der her all, vil element blive vist uafhængig af en frontend-brugers valg af sprog. Yderligere ses dette også markeret med et multi-flag i page-modulet: Slette sprogoversættelser Hvis man ønsker at slette sprogoversættelse, forgår det ved at vælge list i venstre kolonne og finde den aktuelle side. Igen skal man sikre sig, at Localization view i bunden er tjekket af. Sletning forgår i sin enkelhed ved at klikke på affaldsspandene. Udarbejdet af klaus@cs.aau.dk Side 26 af 30
Udarbejdet af klaus@cs.aau.dk Side 27 af 30
Filhåndtering TODO Udarbejdet af klaus@cs.aau.dk Side 28 af 30
Nyhedsmodul TODO Udarbejdet af klaus@cs.aau.dk Side 29 af 30
Versionering TODO Udarbejdet af klaus@cs.aau.dk Side 30 af 30