IFA, marts 2010/MSo OBS: Hele dette dokument viser screenshots fra backend i Typo3 i det gamle skin, mens du som redaktør arbejder i det nye skin. Introduktion til Typo3 Dette er en introduktion til de mest anvendte funktioner i Typo3, som benyttes til redigering af Institut for Fysik og Astronomis hjemmesider. Typo3 er et webbaseret CMS (Content Management System) og skal derfor ikke installeres hos den enkelte redaktør. Datalogisk Institut har ansvaret for backup og vedligeholdelse af Typo3. For at få adgang til hjemmesiderne logger man på med sit NFIT brugernavn og password (det som også benyttes til NFIT webmail og Oracle Calendar) hvis man er oprettet som webredaktør i Typo3. Hver webredaktør får adgang til en afgrænset del af hjemmesiden. Det er praktisk, for så har man det mindre at bekymre sig om. I Typo3 har hver webside et unikt ID og tilgås i en browser som fx http://physicswww.daimi.au.dk/?id=1551. En webside som er oprettet i Typo3 har ikke noget indhold, før man har sat et eller flere sideelementer (med indhold) ind på websiden. Meget mere nedenfor Gå til websiden Skriv /typo3/ efter webadressen, dvs. http://www.phys.au.dk/typo3/. Husk: Allow pop-up windows i din browser. Dette skærmbillede viser front-end : Login Benyt dit NFIT brugernavn og password for at logge ind. Nyttige links: http://cs.au.dk/services/web-department/faq/ http://typo3.org 1
Når du logger ind Hver gang du logger på, kommer du først til følgende skærmbillede. Du er nu logget på i back-end : Du logger ud øverst til højre, ved siden af dit navn. Første gang du logger ind del 1 Første gang du logger ind skal du indstille din brugerprofil, fx hvis du vil skifte Typo3 back-end til dansk. Klik på User settings under User tools til venstre i skærmbilledet. Vælg Language, og skriv dit navn og emailadresse, for god ordens skyld. Klik til sidst på Save Configuration nederst. Første gang du logger ind del 2 Klik først på liste modulet under Web til venstre. Nu ser du tre kolonner: Moduler til venstre, sidetræet med websiderne i midten, og arbejdsfeltet til højre. Klik evt. på det lille + for at træet folder sig ud. Første gang du logger ind del 3 Klik på en tilfældig side (på titlen til højre for det lille side-ikon ) i sidetræet i midterste kolonne. Sæt flueben/klik ud for Extended view og Localization View (Udvidet visning og Oversættelses visning). Dette sikrer, at du kan laver sider på to sprog. Alternativt kan du skrive enten engelsk eller dansk som default sprog. 2
Redigering af sideindhold på eksisterende side, find siden Klik på Side modulet til venstre og klik på den side, du vil redigere (dvs. klik på sidens titel i sidetræet). Klik evt. på det lille + for at åbne sidetræet. Til højre ser du nu sideelementet på den pågældende side. En side kan betså af mange sideelementer. Klik nu midt i teksten til højre eller på i sideelementet. Redigering af sideindhold på eksisterende side, rediger tekst Der dukker tre faneblade op til højre. Klik på det midterste faneblad Text. Editoren åbnes og du er nu klar til at redigere siden! Typo3 gemmer ikke ændringer automatisk, så klik fx på jævnligt. De mest anvendte ikoner i Typo3 er vist her: Side modulet bruges til redigering af sider + klik på sidetitel i sidetræet. (TV står for TemplaVoila.) Viser en webside i arbejdsområdet til højre i back-end. Bemærk, samme ikon benyttes ved søgning, øverst til højre i vinduet! Liste modulet bruges til at liste elementer på en webside. Filelist modulet bruges til upload af filer. Rediger tekst/indhold på webside, eller websidens egenskaber. Opret ny webside eller indsæt nyt sideelement på en webside. Luk vindue uden at gemme. Panik-knappen! Gem ændringer og vis resultatet i browser-tab eller vindue Gem ændringer, men hold vinduet åbent. Gem og luk. Du er klar til at gå videre med noget andet. Indsætter specielle karakterer på websiden. Sætter link til typo3-webside, fil/pdf, eksternt link eller fjerner link. Indsætter billede. Men, billedet skal først uploades via Filelist modulet. Full Screen Rich Editing (RTE). Giver stort arbejdsområde. Viser html-koden. Du kan rette i koden, men ikke ubegrænset. Typo3 vil evt. rette/overskrive dine ændringer, Klik på <>, når du vil retur til Text vinduet (wysiwyg). 3
Redigering af sideindhold i stort redigeringsvindue, trin 1 Inden du åbner til det store redigeringsvindue, så klik på Save! Ellers mister du dine ændringer. Klik på den lille grå pil (<) for at lukke midterste kolonne med sidetræet. Den lille grå pil ses i billederne på foregående side. Klik herefter på ikonet. Redigering af sideindhold i stort redigeringsvindue, trin 2 Nu opnår du et større arbejdsområde. Klik på den lille grå pil (>), når du vil åbne sidetræet. Huske at gemme først - hvis du vil gemme ændringer. 4
Indsæt link på webside til fil trin 1 Hvis du ønsker at linke til fx en pdf-fil (eller word eller excel), skal denne fil først uploades til Typo3. Filen skal allerede ligge lokalt på din PC. Først går du til File-list modulet. Find frem til den mappe du ønsker at uploade til eller opret en ny mappe til formålet. Klik på og vælg Upload files. Indsæt link på webside til fil trin 2 Efter filen er uploaded, kan du nu sætte link til den. Klik på Page modulet find websiden i sidetræet. Find det sted, hvor du ville linke til filen og klik på globen. Vælg fanebladet File og find frem til filen og klik på filens navn. og Klik Browse og find filen. Klik Upload files. Husk, gem ændringerne Typo3 gør det ikke automatisk. 5
Opret ny side trin 1 Først oprettes en webside i Typo3 (trin 1-4). Derefter sætter vi indhold ind på siden vha. indholdselementer! Så, højre-klik på sidens titel eller side-ikonet side, som du vil oprette en ny underside til. Vælg New.. ud for den Opret ny side trin 2 Det er en god ide at klikke på og følge den Guide/Wizard, som kommer op. Klik på den lille grønne pil dér, hvor du vil have din nye side skal ligge. 6
Opret ny side trin 3 Klik på AU s Default template som vist nedenfor. Opret ny side trin 4 Giv siden en meningsfuld titel! Og gem. 7
Indsæt indhold/tekst på websiden Find siden du vil sætte indhold ind på (klik på dens titel i sidetræet). Klik på, vælg type af indholdselement (fx text element øverst i listen). Hvis der skal flere sideelementer ind på siden, kan du vælge at give hvert enkelt element en overskrift. Bemærk, overskriften til et sideelement er valgfrit, mens en webside SKAL have en og kun én overskrift. Klik på fanebladet Text og skriv eller indsæt din tekst (ala copy/paste). Hvis du kopierer tekst ind og bliver spurgt, om det skal gemmes i udklipsholderen, så svar ja. Indsæt indhold/tekst på websiden både dansk og engelsk version Hvis du kun har brug for enten dansk eller engelsk på dine sider, så kan du godt nøjes med én sprogversion. Her vil vi oprette en side på både dansk og engelsk. Husk at gemme din side. Klik på sidens titel i sidetræet. Klik nu på Localizations view (Oversættelsesvisning) og vælg English. Giv siden en titel (den engelske webside SKAL have en titel) og klik gem/save. Mens du er i Oversættelsesvisning skal du nu klikke på Create a copy for translation (English). Klik på [Translate to English], fjern overskiften copy... Vælg fanebladet Text og skriv/indsæt din engelske tekst. Det skal du nu gøre for hvert sideelement, dvs. klik på Create og Translate og oversæt teksten og gem/save. Hvis du vælger IKKE at oprette en engelsk version, bliver den samme webside vist, hvad enten brugeren vælger dansk eller engelsk i frontend. Man kan jo vælge at indlede sin danske tekst med Only in Danish), eller Kun på engelsk, hvis alt er på engelsk. 8
Indsæt billeder trin 1 Indsæt billeder trin 2 Ligesom med filer, skal et billede uploades til Typo3, før man kan indsætte det på en webside. Derfor, to trin! Klik på Filelist modulet, find mappen, hvor billedet skal ligge eller opret ny mappe, klik på mappen og vælg Upload Files. Browse dig frem til dit billede og klik Upload files under stien til billedet. indsætte billedet, så klik på Hvis du har foretaget ændringer til et allerede uploaded billede, så sæt et flueben ved Overwrite existing files og klik så på Upload files. Så overskrives den gamle udgave, og du ser nu det opdaterede billede på hjemmesiden (fx efter Reload i browseren). Vi vil nu sætte billedet på websiden. Find websiden i sidetræet og klik på sidens titel, Klik på sideelementet, hvori du vil sætte billedet eller klik midt i teksten et sted og klik på fanebladet Text. Du er nu klar til at. Der dukker tre faneblade op prøv dig lidt frem. Start fx ud med Drag n Drop. Klik på billedet og træk det ind på websiden (fanebladet Text). Du kan nu højre-klikke på billedet og vælge Image Properties. Undgå at ændre billedets dimensioner dér, men sæt fx lidt luft omkring billedet med padding og sæt Titel og Alternativ tekst, som vises ved Mouse over. Klik opdater og gem Sørg for at dit billede har de optimale dimensioner FØR du uploader det til Typo3: Opløsning 72 DPI og max bredde fx 300. Eller vælg fanebladet New Magic Image, som sørger for den slags, i stedet for Drag n Drop.. 9
Egenskaber for siden/ page properties ændring af sidetitel dk/eng Hvis du vil ændre sidens titel, skal du finde frem til Page Properties (sidens egenskaber), Klik på sidens titel i sidetræet og klik lige over sidemodulerne. Ret i titlen og gem. Eller marker Hide page, mens der arbejdes! Eller hvis siden ikke må ses i menuen, så marker Hide in menu. Hvis titlen i navigationen skal være kortere end sidens titel, så udfyld Navigation titel. Og gem! Egenskaber for siden/ page properties indsæt forfatter og mail Nogle steder er forfatter allerede sat ind i sidens egenskaber. Ellers klik på fanebladet Metadata og tast dit navn og email ind. Og gem.. Hvis du har ændret sidens danske titel, skal den engelske muligvis også rettes til. Klik på Localization view og klik på Union Jack. 10
Egenskaber for siden flytte siden Har du placeret en side forkert, er det helt enkelt at flytte den. Klik på sideikonet til venstre for sidens titel i sidetræet. Vælg More options Du kan nu vælge, hvor du vil have siden sat ind i sidetræet (klik på den lille grønne pil). Og fx ændre sidens titel om nødvendigt. I Typo3 kan man også nemt indsætte tilmeldingsskemaer til fx en workshop. Det kommer med i næste udgave af denne lille vejledning! 11
Visning hvordan ser vi resultatet af vores arbejde? Vi kan vælge at klikke på blandt sidemodulerne i venstre kolonne. Vi kan også klikke på. Som du kan se nedenfor, har hver webside i Typo3 et ID, som kan tilgås direkte. Hold musen over et side-ikon i træet. Fx har bibliotekets forside ID = 1496. Visning hvorfor ser jeg ikke det, jeg forventer?? Er siden skjult? Tjek Hide page i Page properties, altså sidens egenskaber. Huskede du at gemme dine ændringer? Ellers gå tilbage i back-end og tjek, at ændringerne er der og klik så Gem. Det kan også nogen gange hjælpe at klikke Reload i browseren. Du kan søge på tekst eller fx en sides ID ved at klikke på arbejdsområdet: øverst til højre i Siden ses som http://physicswww.daimi.au.dk/?id=1496 En sides ID kan også ses ved at markere feltet lige efter brødkrummen. Her ses det, at siden Gymnasiekontakt har ID = 1516. 12
PURE data 1 Find ud af hvor jeres PURE data (fx publikationer eller liste over personer) skal ligge, Find siden, klik for at oprette et nyt sideelement. Sideelementet skal være af typen Plugins: PURE. PURE data 2 Klik på det midterste faneblad Plugin. Vælg fra listen Items de data du ønsker at vise (vælg én af de seks muligheder), fx List of Publications. Efter et par sekunder dukker et tredje faneblad op 1 List of publications. 13
PURE data 3 Klik på fanebladet 1 List of publications under Plugin for at oplyse detaljer. Indsæt mailadressen for de ansatte, som I ønsker at importere data fra. Hvis I vil vise publikationer årsvis, så opret en side for hvert år (dvs. et plugin for hvert år). Nedenfor er vist, hvordan man kan liste publikationer fra fx 2007-2009, Sæt Group by (primary) til Submitted year, hvis I vælger at benytte Submitted year. PURE data 4 En liste af ansatte kan vises på flere måder, bl.a. som en helt enkelt liste eller som visitkort. Prøv jer frem. Igen, indsæt mailadresser for de relevante personer. Husk, videnskabelige medarbejdere, ph.d.-studerende og tap-personale er listet i PURE, normalt ikke studerende. 14