1 Training voor Editors Bewerkt door Ing. Hans A. Olthoff, Meer informatie: Ing. Hans A. Olthoff AlterNET Internet B.V. Archimedesstraat AB Dordrecht ...
Training voor Editors Bewerkt door Ing. Hans A. Olthoff,
Meer informatie: Ing. Hans A. Olthoff AlterNET Internet B.V. Archimedesstraat 2 3316 AB Dordrecht T (078) 635 1200 F (078) 635 2010 www.alternet.nl
Dit document wordt gepubliceerd onder de voorwaarden van Open Content License, beschikbaar op http://www.opencontent.org/opl.shtml De inhoud van dit document heeft betrekking op TYPO3 - een GNU/GPL CMS/Framework beschikbaar opwww.typo3.com
Training voor Editors - 1
Inhoudsopgave Training voor Editors................................................................................................................. 1 Inhoudsopgave...................................................................................................................................................................... 2 Introductie.............................................................................................................................................................................. 4 Wat is Typo3?.................................................................................................................................................................... 4 Screenshot........................................................................................................................................................................ 4 Met dank aan:.................................................................................................................................................................... 5 Browser Instellingen ............................................................................................................................................................ 6 De juiste browser instellingen .......................................................................................................................................... 6 Microsoft Explorer 5.x, 6.x.................................................................................................................................................... 6 Netscape Navigator 6.x, 7.x................................................................................................................................................ 10 Het Inloggen.................................................................................................................................................................... 11 Controleer de installatie .................................................................................................................................................. 12 Controleer de frontend........................................................................................................................................................ 12 Controleer de backend........................................................................................................................................................ 12 Inloggen................................................................................................................................................................................ 13 Algemene beginselen.......................................................................................................................................................... 15 Backend en frontend....................................................................................................................................................... 15 Backend modules................................................................................................................................................................ 15 Paginaboom.................................................................................................................................................................... 15 Iconen en paginanamen aanklikken ................................................................................................................................. 15 De technische implementatie van bovenliggende en onderliggende pagina's............................................................. 17 Speciale pagina’s............................................................................................................................................................ 18 Niet in menu......................................................................................................................................................................... 18 Pagina met beperkte toegankelijkheid.............................................................................................................................. 19 sysFolders – wat zijn dat?.................................................................................................................................................. 19 Shortcuts.............................................................................................................................................................................. 19 Even klikken en je hebt hulp! ............................................................................................................................................ 21 Pagina content ............................................................................................................................................................... 22 Terzijde: TYPO3 – een op elementen gebaseerde CMS................................................................................................... 23 Volgorde content elementen .............................................................................................................................................. 23 Pagina’s en content bewerken en aanmaken................................................................................................................... 26 Pagina’s bewerken.......................................................................................................................................................... 26 Tip: Nog een manier om pagina bewerken te activeren................................................................................................... 27 Tip: QuickEdit – bespaar een muisklik.............................................................................................................................. 28 Nieuwe pagina................................................................................................................................................................. 28 Pagina content elementen maken...................................................................................................................................... 29 Nog een content element invoegen................................................................................................................................... 31 Onderhoud van content elementen.................................................................................................................................... 33 Pagina verplaatsen ......................................................................................................................................................... 33 Het gebruik van “cut'n'paste” om een pagina te verplaatsen......................................................................................... 34 Achtergrond: Let op – consistente concepten aanwezig!................................................................................................ 35 Zichtbaarheidinstellingen– pagina’s verbergen, de tijd van verschijning bepalen enz................................................... 35 Een pagina verbergen......................................................................................................................................................... 36 Tijdsinstellingen voor pagina’s en content elementen.................................................................................................... 37 Rich Text Editing: Vet, Cursief, Opsommingstekens, Afbeeldingen invoegen............................................................... 37 Opsommingstekens gebruiken........................................................................................................................................... 38 Overwegingen bij "rich content"........................................................................................................................................ 39 Links maken.................................................................................................................................................................... 39 Achter de schermen............................................................................................................................................................ 39 Andere soorten links?......................................................................................................................................................... 40 Content element types.................................................................................................................................................... 41 Wizards................................................................................................................................................................................. 41 Secundaire opties - "Paletten"........................................................................................................................................... 42 Het bewerken van de frontend........................................................................................................................................ 44 Kan dus iedereen mijn pagina’s bewerken?..................................................................................................................... 45 Meer informatie.................................................................................................................................................................... 46 Afbeeldingenarchieven....................................................................................................................................................... 47 Bestandsonderhoud in TYPO3........................................................................................................................................ 47 In je content elementen bestanden uit het archief gebruiken......................................................................................... 47 Bladeren door het afbeeldingenarchief........................................................................................................................... 49 Het uploaden van afbeeldingen naar het archief.............................................................................................................50 Nawoord............................................................................................................................................................................... 52 Training voor Editors - 2
Introductie Wat is Typo3? TYPO3 is een onderhoudssysteem voor websites, ook wel een content management systeem of cms genoemd. Door een strikte scheiding van inhoud (content), grafische vormgeving en onderliggende techniek (PHP programmeertaal en MySQL database) wordt het onderhouden van een of meer websites sterk vereenvoudigd. In deze training leer je de basis principes van TYPO3. De training is hands-on en je gaat direct beginnen met je eerste website in TYPO3. Na het volgen van deze training heb je een idee van de mogelijkheden van TYPO3 en de daaraan ten grondslag liggende concepten. Voor deze training heb je nodig: het adres van de oefenwebsite van AlterNET en een inlogcode om jezelf toegang te verschaffen. De docent zal je deze informatie verstrekken. De creatie van templates en het ontwikkelen van websites in TYPO3 komen in deze cursus niet aan de orde! Deze onderwerpen worden behandeld in de vervolgcursus Modern Template Building , deel 1.
Screenshot De oefenwebsite in deze training is van een voetbalclub met de naam "FC Bigfeet". De website ziet er zo uit:
Met behulp van deze eenvoudige website zul je leren: •
Pagina's en
•
inhoud op pagina's te bewerken en aan te maken,
•
afbeeldingen, tabellen, opsommingstekens, links enz. in te voegen.
•
Hoe TYPO3 pagina's verdeeld over een boomstructuur en inhoud opslaat.
Training voor Editors - 3
Met dank aan: Dankbaar heb ik uitgebreid gebruik gemaakt van de volgende brondocumenten: •
Getting Started, Engelstalige handleiding geschreven door Kasper Skårhøj
•
Handbuch für Redakteure, Duitstalige handleiding geschreven door Werner Altmann
•
MTB/1, Engelstalige handleiding geschreven door Kasper Skårhøj
Deze documenten zijn gepubliceerd onder de voorwaarden van de Open Content License. Meer informatie hierover is te vinden op http://www.opencontent.org/opl.shtml De inhoud van deze training is gerelateerd aan TYPO3, een GNU/GPL gelicenseerd CMS/Framework, beschikbaar gesteld op www.typo3.com De hoofdstukken uit de brondocumenten zijn opnieuw gerangschikt, zodat ze beter aansluiten bij de opleidingsbehoeften van mensen die aan de slag willen met TYPO3. Op basis van de brondocumenten is door AlterNET een drietal Nederlandstalige TYPO3 Trainingen beschikbaar gesteld om de kennis op het gebied van TYPO3 te vergroten. Dit zijn: TYPO3 Training voor Editors (dit document) TYPO3 Training voor Webmasters TYPO3 Training voor Ontwikkelaars Veel leesplezier! Ing. Hans A. Olthoff [email protected]
Training voor Editors - 4
Browser Instellingen De juiste browser instellingen TYPO3 is een online onderhoudssysteem en gebruikt als client slechts een gewone webbrowser, zoals Internet Explorer. Aangezien het content management systeem op de hosting van AlterNET is geplaatst, is het mogelijk op elke plaats en op elk tijdstip veranderingen door te voeren, mits er op die plaats internet toegang aanwezig is. Om Typo3 probleemloos te laten functioneren, worden de volgende instellingen in de browser aangeraden. Hierbij gaat het met name om het activeren van "JavaScript", de juiste instellingen voor de "Browser-Cache" en de instellingen voor het accepteren van "Cookies". In dit hoofdstuk wordt uitgelegd hoe de instellingen gemaakt kunnen worden in recente versies van de browsers Internet Explorer en Netscape.
Microsoft Explorer 5.x, 6.x Start Microsoft Internet Explorer und kies in het bovenste menu voor de optie "Extra". Er wordt een popup-menu geopend. Kies hier voor "Internet opties...".
Er wordt een venster geopend met tabbladen aan de bovenkant. Kies hier het tabblad "Algemeen" en zoek de optie “Instellingen” op. Klik erop. Nu wordt het venster "Instellingen" geopend.
Activeer onder "Wanneer moet er op nieuwe versies van pagina's worden gecontroleerd?" de optie: "Bij elk bezoek aan een pagina". Training voor Editors - 5
Klik op "OK". Hiermee worden de Cache-instellingen van de browser ingesteld.
Open nu het tabblad "Beveiliging" en kies "Internet" Klik op de knop "Aangepast niveau...".
Het venster "Beveiligingsinstellingen" wordt geopend. Scrol naar beneden tot aan de instellingen voor "Cookies". Controleer of de optie "Cookies accepteren, die opgeslagen zijn" en de optie "Cookies per sessie accepteren (niet opgeslagen)" geactiveerd zijn. De instellingen voor Cookies zoals hierboven beschreven gelden voor Internet Explorer 5.x. Voor de opvolger 6.x worden de instellingen voor Cookies aansluitend behandeld.
Training voor Editors - 6
Scrol naar beneden in hetzelfde venster "Beveiligingsinstellingen" tot aan "Uitvoeren van scripts". "Uitvoeren van scripts", "Actief uitvoeren van scripts" moet geactiveerd zijn. Klik op OK. Het venster "Beveiligingsinstellingen" wordt gesloten. Klik op het nog openstaande venster "Internet opties" op OK. Hiermee worden de instellingen opgeslagen.
Explorer 6.x Om in Internet Explorer 6.x de instellingen voor Cookies te controleren, klik dan op het tabblad "Privacy" en klik daarbinnen vervolgens op de knop "Geavanceerd...".
Training voor Editors - 7
Explorer 6.x In het geopende venster “Geavanceerde Privacyinstellingen” dient de optie "Automatische Cookieverwerking opheffen" aangevinkt te worden. Vervolgens dienen de beide opties "Directe cookies" en "Indirecte cookies" ingesteld te worden op "accepteren". Explorer 6.x Wanneer dit gedaan is, klik dan op "OK". Het venster "Instellingen" wordt gesloten. Zijn de instellingen voor "Uitvoeren van scripts" en "Cache" ook reeds aangepast, bevestig dan de gemaakte instellingen met een druk op de knop "OK" in het nog geopende venster "Internet opties. Hiermee worden de instellingen opgeslagen.
Training voor Editors - 8
Netscape Navigator 6.x, 7.x Start Netscape Navigator en klik in het bovenste menu op "Bewerken" (Edit). Kies “Instellingen” (Preferences) in het geopende pop-up menu.
Om de cache-instellingen te controleren, klik je op het plusteken voor de optie "Geavanceerd" (Advanced) in het menu aan de linkerkant van het scherm. Er klapt een menu uit. Kies daar voor de optie "Cache". Daarmee worden in de rechterzijde van het scherm de cacheinstellingen getoond. Kies bij het punt "Vergelijk de cache met de inhoud van de pagina op het netwerk" (Compare de page in de cache with de page on de network) de optie "Altijd bij het openen van een pagina" (Every time I view de page).
De instellingen voor "Javascript" worden getoond, wanneer je op de optie "Geavanceerd" (Advanced) klikt (en dus niet op het plusteken, maar op de tekst zelf). In het rechterdeel van het scherm worden nu de Java en Javascript opties zichtbaar. In sommige versies dient echter de optie “Scripts en Plugins” aangeklikt te worden. Controleer of de optie "JavaScript voor Navigator activeren" aangevinkt is in de checkbox. Wanneer alle instellingen doorgevoerd zijn, klik dan op "OK". De instellingen worden nu opgeslagen.
Training voor Editors - 9
De browser is nu goed ingesteld en we kunnen beginnen met de training van TYPO3.
Het Inloggen Om met Typo3 te kunnen werken, hebben we voor deze training een oefenwebsite geïnstalleerd. Om veiligheidsredenen is deze website afgeschermd. Wat hebben we nodig? Het webadres (URL) van de server, een gebruikersnaam (Username) en het daarbij behorende wachtwoord.
Open de webbrowser en ga naar het volgende webadres: http://demo1.alternetinternet.com/quickstart/). Vul in het veld "Username" de gebruikersnaam in die je van de docent hebt gekregen. Vul in het veld "Password" het bijbehorende wachtwoord in. Klik vervolgens op de knop OK.
Als alles goed is verlopen, ben je ingelogd en zie je de frontend van TYPO3. Open een tweede browser venster en ga naar het volgende webadres: http://demo1.alternetinternet.com/quickstart/typo3/. Je bent nu ingelogd op de backend. Training voor Editors - 10
Controleer de installatie Controleer de frontend De frontend is de term voor de door TYPO3 gegenereerde website. Dit is wat je bezoekers zullen zien – dit is het product dat TYPO3 voor je aanmaakt! De frontend zou nu moeten worden weergegeven op de URL, die je oorspronkelijk hebt opgegeven (in ons geval was dat http://demo1.alternetinternet.com/quickstart/). Na één seconde verschijnt het volgende scherm als het goed is:
Je kunt de links in het menu aan de linkerkant aanklikken om de pagina’s van de website te bekijken.
Controleer de backend De backend is een term voor de “administration interface” [beheer interface], die je gebruikt om de website content in de frontend te beheren. In de backend bewerk je pagina’s en content en maak je ze aan. Normaliter kun je de backend vinden achter het pad "typo3/" van de installatie. Probeer dus "typo3/" in te typen achter ".../quickstart/":
Training voor Editors - 11
Inloggen Typ nu “admin” in onder “username” en daaronder het wachtwoord "password":
TIP: Controleer of cookies worden geaccepteerd door je webbrowser! Als je de acceptatie van cookies niet toelaat, kun je niet inloggen!
Als je de juiste gebruikersnaam en het wachtwoord hebt ingetypt, zie je het volgende op je scherm:
Training voor Editors - 12
Training voor Editors - 13
Algemene beginselen Backend en frontend Van de installatie heb je geleerd dat TYPO3 uit twee gedeeltes bestaat - de backend en de frontend. De frontend hiervan is bedoeld voor iedereen die surft op het web - het is de website die TYPO3 produceert, maar alléén jij en je content leveraars hebben toegang tot de backend – waar de website wordt onderhouden. Hiervoor is altijd een gebruikersnaam en een wachtwoord vereist.
Backend modules De backend heeft veel modules in het menu aan de linkerkant. Als je pagina's wilt bewerken en aanmaken, kies je de "Page" module:
Elke module heeft een eigen content weergave. Omdat jij de beheerder bent, kun je bij alle modules. Maar er zijn ook andere “normale” gebruikers – die hebben alleen maar toegang tot de modules die jij voor hen hebt geselecteerd! Klik maar eens op de verschillende modules in het menu en zie hoe het content venster verandert.
Paginaboom Het kopje "Web" in het menu wordt een "hoofdmodule" genoemd en alle andere modules die er onder staan zijn "submodules". Voor alle modules onder de "Web" hoofdmodule is de weergave in het content scherm verdeeld in twee delen - de paginaboom (links #1) en de module content gerelateerd aan een pagina van de paginaboom (rechts #2). De paginaboom kan worden uitgevouwen door op de plus/minus icoontjes klikken (#3). Dit werkt precies hetzelfde als bij mappen op je eigen computer. In feite kun je een paginaboom zien als een "directory structure", waarin webpagina’s worden geplaatst in een hiërarchie met hoofdpagina’s, onderpagina’s en onder-onderpagina’s enz.
Iconen en paginanamen aanklikken Het volgende belangrijke punt om te weten over de paginaboom is dat je zowel het pagina icoon als de paginatitel kunt aanklikken - en dat dit een verschillend effect heeft! Als je op de paginatitel klikt, zul je zien dat de desbetreffende module content in het rechter venster toont:
Training voor Editors - 14
In dit geval is de Page module geactiveerd en dan zul je de content van de pagina zien in het rechter venster. Vanaf hier kun je deze bewerken, enz. Dat wordt zo behandeld. Als je op het pagina icoon klikt in plaats van op de titel, verschijnt er een klein “contexthelpmenu”. Dit wordt soms een klikmenu genoemd:
NB: Als je een oudere browser gebruikt, zal het menu niet dichtbij het icoon verschijnen, maar in plaats daarvan in het bovenste venster van de backend. Wees ook geduldig – het kan een paar seconden duren tot het menu verschijnt! In het contextmenu kun je opties selecteren die gerelateerd zijn aan deze pagina! Bij de meeste is het duidelijk waarvoor ze zijn – als je wilt, kun je er wat uitproberen. Voor dit voorbeeld heb ik “Show” geselecteerd, dat betekent dat ik een ander venster in de browser laat openen, en in de frontend zal precies deze pagina worden getoond:
Training voor Editors - 15
Je ziet dat deze pagina in het nieuwe venster wordt getoond door het aanroepen van het script ".../quickstart/index.php?id=13" (#1). In TYPO3 wordt iedere pagina in de database opgeslagen (in een tabel die "pages" heet) en elke pagina "record" heeft een uniek nummer (uid). Hier werd de parameter met de naam "id" ingesteld op de waarde "13" – en kennelijk moet dit het uid-nummer van de pagina met de titel "This week" in de paginaboom zijn geweest! Bovendien zie je dat de pagina content (#2) hetzelfde is als wat je zag (als het je opgevallen is) in het linker venster van de Page module toen je op de titel klikte! We komen hier later op terug. Bekijk vervolgens de pagina header (#3) - deze laat de titel zien van de pagina die we zagen ("This week"), maar de bovenliggende pagina in de paginaboom - "Results" - wordt ook getoond. Hier zie je de logica van de paginaboom - de "This week" pagina is een subpagina (onderliggende pagina) van de "Results" pagina (bovenliggende pagina). Bekijk tenslotte het menu in het linker venster. Hierin tref je duidelijk de hiërarchie aan die we ook in de paginaboom zagen:
De technische implementatie van bovenliggende en onderliggende pagina's Dit is voor mensen die de technische aspecten van de boomstructuur in de database willen begrijpen: Training voor Editors - 16
Het technische verband tussen een pagina en een subpagina wordt tot stand gebracht door het veld dat "pid" genoemd wordt (bovenliggende pagina id/page id) in de paginatabel in de database - het "pid" veld van de "This week" pagina zal de "uid" waarde van de pagina met de titel "Results" hebben. Door de muis even op het pagina icoon van de "Results" pagina te houden, zul je de volgende titeltekst zien verschijnen:
Dit vertelt ons dat de pagina "Results" het uid-nummer "4" heeft. We weten dat de "This week" pagina de uid "13" heeft (en de pagina's "Last week" en "Report results" hebben uid's 12 en 11). Je hebt nu geleerd dat •
Pagina's (en trouwens alle andere records!) een unieke identificatie hebben door hun "uid" veldnummer – soms kortweg "id"
•
Pagina's (en alle andere records!) naar hun bovenliggende pagina verwijzen met hun "pid" veldnummer.
Speciale pagina’s Heb je misschien gezien dat sommige pagina’s van de paginaboom niet werden getoond in het menu van de website? Dat waren deze pagina’s:
Niet in menu De "Log in" pagina (#1) verscheen niet omdat het paginatype was ingesteld op "Not in menu". Dit kun je gebruiken om een pagina aan te maken die niet op het menu moet verschijnen. Je kunt nog steeds de pagina bereiken door er handmatig een link naar te maken – of typ gewoon direct het juiste id-nummer in de URL! De "Not in menu" modus voor een pagina wordt ingesteld door de pagina header te bewerken:
Training voor Editors - 17
Pagina met beperkte toegankelijkheid Je kunt de "Team pages" pagina (#2) niet zien omdat de toegankelijkheid hiervan beperkt is. Dit betekent dat deze pagina alleen maar zal worden getoond als een frontend gebruiker ingelogd heeft. Dit wordt later in deze training behandeld. Maar het komt erop neer dat je de pagina header bewerkt, en je de gebruikersgroep die je toegang wilt geven selecteert:
sysFolders – wat zijn dat? Tenslotte worden de twee zogenaamde "sysFolders" niet weergegeven (#3). Je maakt een sysFolder aan op dezelfde manier als je de “Not in menu" pagina hebt aangemaakt – selecteer gewoon "sysFolder" als het paginatype (zie hiervoor). Maar wat is het? Nu dan, de standaardinstelling van pagina’s die in TYPO3 worden aangemaakt is zodanig dat hierin web page content wordt opgenomen. Ze verschijnen in het menu en kunnen worden voorzien van een titel. 95% van alle pagina's wordt zo gebruikt. Maar pagina's functioneren ook als een eenvoudige plaats om database elementen te laten, die niet bedoeld zijn om als content op een zichtbare webpagina te verschijnen. Dat is het doel van sysFolders! Gebruik ze, net zoals je mappen in het opbergsysteem van je computer gebruikt om verschillende bestanden op een gestructureerde manier op te bergen! Op dezelfde wijze zijn sysFolders "mappen" die een goede structuur van database elementen mogelijk maken in TYPO3! In dit specifieke geval bevat de sysFolder "Users" de website gebruikers die op de website kunnen inloggen (hierover later meer). Je kunt de content van de sysFolder zien door de "List" module te gebruiken (dat is de "Explorer" in TYPO3...):
Shortcuts Behalve de paginatypes die niet in het menu te zien waren, zijn er ook twee mysterieuze pagina’s met een "shortcut icoon": Training voor Editors - 18
Een shortcut is een leuke mogelijkheid voor een pagina (leeg, zonder content), die alleen maar direct naar een andere pagina hoeft te leiden! Dat is heel handig als je bijvoorbeeld wilt dat de link wel in het menu verschijnt! In ons geval springt de “Home” pagina direct naar de openingspagina en de “Results” pagina direct naar “This week”. Probeer het zelf!
Je maakt shortcuts door het paginatype te bewerken. Voor de “Home” pagina ziet dat er als volgt uit:
Je gebruikt de Element Browser om een pagina te selecteren, waarnaar je wilt verwijzen. De Element Browser wordt gebruikt om relaties tot stand te brengen tussen records en bestanden in de bewerkingsformulieren van TYPO3. Voor de “Results” pagina hebben we een iets fraaiere shortcut - deze springt gewoon naar de eerste gevonden subpagina! In ons geval is dat de "This week" pagina:
Training voor Editors - 19
De "Shortcut modus" is een zogenaamde secundaire optie voor het "Shortcut to page" veld - dit betekent dat het veld alleen te voorschijn komt (in het palet / bovenste venster) als je op het "More options..." icoon klikt (zie de bovenstaande afbeelding).
Even klikken en je hebt hulp! Maar wat zouden al die andere interessante paginatypes doen? Je kunt dat onmiddellijk zelf ontdekken door gewoon het "?" icoon vlakbij het veld aan te klikken:
Dan verschijnt er zo'n venster:
Training voor Editors - 20
Dit wordt de “Context Sensitive Help” [contextmenu] genoemd, en het is beschikbaar voor bijna alle elementen in TYPO3 waarbij je wat informatie over de functie ervan nodig hebt! Het is gemakkelijk en kan overal worden aangeklikt als je in het systeem werkt!
Pagina content We hebben nu naar de paginaboom gekeken, hoe de paginaboom wordt weergegeven in de hiërarchie van het website menu, hoe we pagina’s kunnen bekijken enz. De volgende vraag is - hoe wordt content op een pagina georganiseerd? Laten we nogmaals naar de "This week" pagina kijken:
Training voor Editors - 21
De pagina content op die pagina bestaat uit drie pagina content elementen – hier genummerd 1-3. En omdat elk content element een ander type kan krijgen, kun je pagina’s met zeer flexibele structuren maken! In dit geval bestaat de pagina uit één "Text" type content element, en vervolgens twee “Table” type content elementen.
Terzijde: TYPO3 – een op elementen gebaseerde CMS Deze manier van pagina’s bouwen is een fundamenteel principe van de meeste door TYPO3 gemaakte websites. De methode om pagina’s op te bouwen uit content elementen is tegenwoordig ook bekend van andere CMSen. Hierdoor is TYPO3 een “op elementen gebaseerde CMS”. Het biedt veel flexibiliteit maar niettemin hebben de pagina’s een consistent ontwerp – want dit is één van de doelstellingen van een CMS! Het alternatief is een meer rigide benadering, waarbij een pagina een vastgesteld aantal content gedeeltes heeft – bijvoorbeeld één voor de header, één voor de body text en één voor een afbeelding. TYPO3 kan dat ook (het kan alles doen zoals jij het wilt!), maar hoogst waarschijnlijk wil je dat uiteindelijk niet.
Volgorde content elementen We gaan terug naar de content elementen op de webpagina; zo zien ze eruit in de backend:
Training voor Editors - 22
Vergelijk nu het frontend met het backend scherm. Zie je hoe de elementen van de backend duidelijk dezelfde zijn als die in de frontend? Probeer een backend element te verplaatsen door het wat hoger te zetten:
Als we bovenaan beginnen, leidt dit tot de volgende volgorde:
… en op de webpagina ziet het er als volgt uit:
Training voor Editors - 23
Training voor Editors - 24
Pagina’s en content bewerken en aanmaken Pagina’s bewerken We weten dat pagina’s hun zichtbare content in pagina content elementen opslaan. Dus moet het bewerken van een pagina het bewerken van pagina content elementen zijn! Het is heel gemakkelijk om pagina content in TYPO3 te bewerken. Je hoeft alleen maar de Page module (#1) te selecteren, de paginatitel van de pagina die je wilt bewerken (#2) aan te klikken, en in het "Columns" scherm (#3) te klikken op het edit icoon (#4) van het pagina content element dat je wil veranderen:
Hierdoor verschijnt dit bewerkingsformulieren:
Als eerste laat het veld "Type:" (#1) je het type pagina content element zien! In dit geval “Text". Het zou ook "Table" kunnen zijn (zoals je eerder zag) of “Image” of "Text w/Image" enz. Kijk zelf maar! Elk content element type gaat gepaard met een eigen weergave en eigen velden voor content, en door verschillende elementen in te voegen, kun je grote diversiteit op je website bereiken. Het "Header" veld (#2) bevat header en het "Text" veld (#3) de body text. Op de webpagina komt dit overeen met: Training voor Editors - 25
Probeer de waarde van het header veld te veranderen en druk op "Save document and view page":
Omdat je onderaan hebt opgeslagen met "Save document and view page", zal de frontend venster automatisch binnen een paar seconden op je scherm verschijnen:
Wat TYPO3 deed was de verandering naar de webserver sturen, de database bijwerken met de nieuwe informatie, vervolgens de pagina cache wissen en de pagina regenereren – de verandering is onmiddellijk online en mensen die aan het surfen op jouw website zijn zullen nu de nieuwe header zien in plaats van de oude! Zo gemakkelijk en snel is het om webpagina’s met TYPO3 te onderhouden!
Tip: Nog een manier om pagina bewerken te activeren In plaats van door te klikken vanaf de “Page” module, is er tevens de optie "Edit item" in het klikmenu, dat ook naar de Page module leidt:
Training voor Editors - 26
Tip: QuickEdit – bespaar een muisklik... Als je snel bij je pagina content elementen wilt kunnen, kun je in het Page module scherm "QuickEdit" selecteren in plaats van "Columns" – dan verschijnt gelijk het eerste content element van de pagina:
Nieuwe pagina Het is heel gemakkelijk om nieuwe pagina’s aan te maken. Omdat pagina’s altijd geplaatst worden binnen de hiërarchie van de paginaboom, zul je eerst de positie van de pagina moeten bepalen. Je kunt dit natuurlijk laten altijd veranderen, als je dat wilt. Om een nieuwe pagina aan te maken, gebruik je de Page module in het Columns scherm om de "New page" wizard op te starten – deze zal je helpen om de juiste plek te vinden om de pagina in te voegen:
Er zal dan een “position selector” verschijnen. Hiermee kun je visueel de juiste positie voor de pagina kiezen:
Training voor Editors - 27
Tenslotte wordt een formulier voor een nieuwe pagina getoond en kun je een paginatitel opgeven:
Sla het document op en sluit af. Nu moet de paginaboom worden bijgewerkt:
En als je op de pagina icoon van de nieuwe pagina "Topscorer" klikt, zou je moeten zien dat het menu in de frontend ook automatisch bijgewerkt is!
Training voor Editors - 28
Je ziet de verwijzing naar de pagina in id "27" – dus kreeg de nieuwe pagina automatisch het "uid" nummer "27" toegewezen toen deze werd aangemaakt. De pagina is nog leeg – we moeten wat content elementen voor de pagina gaan maken!
Pagina content elementen maken Klik in de Page module in de paginaboom op de page title van "Topscorer" en dan op de knop "Create page content":
Je zult onmiddellijk het volgende mooie formulier te zien krijgen (hieronder). Hiermee kun je een pagina content element type kiezen – zoals ik eerder zei, verzorgen verschillende content element types verschillende soorten content op de webpagina. Laten we een "Text with image below" maken:
Training voor Editors - 29
We krijgen onmiddellijk dit formulier te zien. Voeg nu wat proef content in en kies een afbeelding van je harde schijf (neem een kleine jpeg afbeelding):
Druk op de "Save document" knop. Nu volgt een upload van de afbeelding naar de webserver en wordt deze gekoppeld aan het nieuwe pagina content element. Als alles goed gegaan is, zou het er als volgt uit moeten zien:
Op de webpagina, ziet de pagina er nu zo uit:
Training voor Editors - 30
Nog een content element invoegen Terug in de Page module is het nieuwe content element duidelijk te zien
Klik op de knop "New content" om hierna nog een content element met opsommingstekens (“bullet list”) te maken:
Deze keer moeten we behalve de eerste keuze, er nog één maken – waar moet het element terechtkomen? Voor of na het huidige pagina content element?
We zetten het erna. Nu blijft alleen nog maar de content naast de opsommingstekens over:
Training voor Editors - 31
Je ziet dat het "Type" werd ingesteld op "Bullet list" – dat had ook handmatig kunnen worden geselecteerd. En je kunt het later veranderen zoals je wilt! Als je meer wilt weten over de verschillende beschikbare content element types, denk dan aan het kleine "?" icoon - even klikken en je hebt hulp! Nu heeft de pagina twee content elementen, een "Text w/Image" type en een "Bullet list" type - in die volgorde:
In de Page module ziet dat er zo uit:
Onderhoud van content elementen Je hebt net de "New content" wizard gebruikt om nieuwe pagina content aan te maken. Het enige wat de wizards in TYPO3 echter doen, is een gewone handeling snel en eenvoudig maken door je direct naar de belangrijke keuzes te leiden. Maar daarachter zitten allemaal functies die kunnen worden geselecteerd, precies kunnen worden afgesteld en handmatig onderhouden. Je zult dit merken wanneer je met TYPO3 werkt. Neem de tijd om de knoppen en de opties te onderzoeken. Er zijn vele mogelijkheden, en de enige manier om ze te leren kennen, is door de tijd te nemen om er mee te stoeien! We geven wat voorbeelden van interface functies die je kunt uitproberen:
Training voor Editors - 32
Een nieuw pagina content element na het eerste invoegen kan met deze knop (#1). Deze geeft als default waarde een "Text" type element – dit hoef je alleen maar te veranderen naar iets dat je zelf wilt. De knop "Move record down" (#2) kan worden gebruikt om de volgorde van veel content elementen op dezelfde pagina/in dezelfde kolom te wijzigen. Je kunt ook de "Copy", "Cut" en "Paste after" mogelijkheden van het klikmenu (#8) gebruiken – je kunt hiermee zelfs elementen kopiëren en verplaatsen naar andere pagina’s! De "Hide/Unhide" knop (#3) is een snelle manier om bij "Hide" te veranderen of het element is aangevinkt en in de prullenbak (#4) kun je een element helemaal verwijderen (hoewel je het terug kunt halen als je dit per ongeluk doet). Als je alleen maar de content in het body text gebied van het content element hoeft te bewerken, is er de handige mogelijkheid om op de "Edit in Rich Text Editor" knop (#5) te klikken. Hiermee krijg je een venster dat gebruik maakt van het volledige beeldscherm, voor het bewerken van de tekst – handig als er veel tekst is! Zoals gewoonlijk zal een klik op het icoon van de pagina content elementen een contextmenu voor het element oproepen. Tenslotte hoef je je niet te beperken tot het bewerken van slechts één pagina content element per keer, maar kan dat met twee (of meer) door op het “Columnedit” icoon (#7) te klikken.
Pagina verplaatsen Het is ook heel gemakkelijk een pagina te verplaatsen dankzij de wizard van de Page module. Stel dat we de pagina "Topscorer" willen verplaatsen van de huidige positie naar onmiddellijk na "Sitemap" in het "Home" gedeelte:
Je zult dan een stuk van de paginaboom zien en door op de bovenste pagina te klikken, ga je een niveau omhoog:
En met één logische klik heb je de pagina naar de nieuwe positie verplaatst: Training voor Editors - 33
De paginaboom wordt onmiddellijk bijgewerkt:
Het gebruik van “cut'n'paste” om een pagina te verplaatsen Het gebruik van de "Move page" wizard is zonder enige twijfel het meest voor de hand liggend voor beginners. Als je echter meer inzicht wilt in hoe je elementen – waaronder pagina’s – kunt verplaatsen in TYPO3, moet je het interne klembord gebruiken. Dat werkt vrijwel hetzelfde als in Windows: Je klikt met de muis rechts op een document, dan selecteer je “Cut”, dan klik je rechts op de map waarnaar je het wilt verplaatsen en dan selecteer je “Paste”. Hetzelfde principe vindt je in TYPO3. Laten we dat gebruiken om de pagina weer terug te zetten: "Cut" de pagina :
"Paste after" de "Report results" pagina:
Training voor Editors - 34
Geef het antwoord "OK":
Dat is alles! De pagina is terug op zijn plaats:
Achtergrond: Let op – consistente concepten aanwezig! Merk op dat kopiëren/knippen/plakken niet alleen voor pagina’s, maar ook voor pagina content elementen kan worden gebruikt op dezelfde manier – in feite is deze functionaliteit zelfs van toepassing op elk database element of bestand dat door TYPO3 wordt onderhouden! Dit is een schitterend voorbeeld hoe TYPO3 dezelfde concepten consistent in het hele systeem gebruikt – dus als je eenmaal één mogelijkheid hebt geleerd, begrijp je ook een heleboel andere mogelijkheden! Als je je ogen er voor open houdt, zul je veel van dat soort “Aha”-ervaringen hebben, als je ziet hoe dingen ontworpen zijn om op elkaar aan te sluiten.
Zichtbaarheidinstellingen– pagina’s verbergen, de tijd van verschijning bepalen enz. Een mogelijkheid die je bij veel elementen tegen zult komen – in het bijzonder pagina's en pagina content elementen – zijn de publicatie controlevelden of zichtbaarheidinstellingen. Bij pagina’s zien die er zo uit:
Bij content elementen zijn ze onderaan het formulier te vinden:
Een pagina verbergen Probeer "Hide page" aan te vinken:
Training voor Editors - 35
Het is zo mooi dat het pagina icoon zelfs wat lichter grijs wordt en er komt een rood kruisje bij – het is nu verborgen!
Dit betekent dat je de pagina niet kunt zien in de frontend:
(Het is heel belangrijk dat je voor de “Last week” pagina "Show" selecteert!) Kijk... er is geen "This week" pagina!
Als je echter direct naar de “This week” pagina gaat, dan zul je deze WEL zoals gewoonlijk zien:
... omdat als je ingelogd bent als backend gebruiker, een "preview" van verborgen pagina’s beschikbaar is – zoals aangegeven in het kleine kader onderaan de pagina:
Maar! – jij bent de enige. Niemand anders kan de pagina zien totdat jij zorgt dat deze niet meer verborgen is!
Training voor Editors - 36
Tijdsinstellingen voor pagina’s en content elementen Het verbergen van pagina’s en content elementen is waarschijnlijk de meest typerende zichtbaarheidinstelling. Het is zo gebruikelijk dat het zelfs een eigen kopje in de contextmenu's heeft:
Maar je kunt ook bepalen wanneer een pagina online beschikbaar moet zijn – op welke datum! Probeer maar eens de code "d+10" in het "Start time" veld in te voeren:
Hiermee is de datum automatisch ingesteld op de huidige datum plus 10 dagen! Als je de pagina bewaart en de muis op het icoon houdt, wordt deze instelling ook weergegeven:
Je raadt het al – op dit moment is de pagina niet zichtbaar en zal dat automatisch wel zijn op 11 april 2003, 10 dagen later! Zo gemakkelijk is het om de publicatie van informatie te beheersen met starttijden. Het “Stop” veld werkt natuurlijk op dezelfde manier! Net als pagina content elementen, nieuws elementen, gastboek elementen – noem maar op. Hetzelfde principe – vele plaatsen – makkelijk te begrijpen.
Rich Text Editing: Vet, Cursief, Opsommingstekens, Afbeeldingen invoegen Als je de body text op je pagina’s aan het bewerken bent, kun je dezelfde opmaakopties gebruiken die je gewend bent van je tekstverwerker. Als je TYPO3 met Microsoft Internet Explorer gebruikt, beschik je over een Rich Text Editor (RTE) voor het body text veld. "Rich Text" betekent dat je tekstopmaak ook kunt toevoegen aan de tekst die je schrijft. Probeer het body text veld van de nieuwe “Topscorer” pagina te bewerken:
Selecteer de tekst "my first" en klik op "B" (Vet) om de tekst vet te maken:
Training voor Editors - 37
Door de "B", "I", "U" en "Center Justify" knoppen te gebruiken kun je eenvoudig een alinea er als volgt uit te laten zien:
Druk op de "Save document and view page" knop – dan zie je dit in de frontend:
Opsommingstekens gebruiken Het gebruik van opsommingstekens is net zo gemakkelijk. Druk op het "Opsommingstekens" icoon en voeg wat regels in:
Sla het op en bekijk het – de frontend zal er als volgt uit zien:
Overwegingen bij "rich content" Zoals je ziet heb je hierbij twee keuzes: a) Wil je lijsten met opsommingstekens "inline" in de body text velden maken of b) door aparte content elementen? Je kunt beide mogelijkheden door elkaar gebruiken. Persoonlijk vind ik het verreweg het gemakkelijkst om opsommingstekens gewoon in body text velden te maken met de RTE – maar als iemand met Microsoft Internet Explorer de lijst gaat bewerken, is dit gewoonlijk heel lastig! Je kunt natuurlijk ook "politieke redenen" hebben om geen opsommingstekens in de body text te gebruiken (de body text "schoon" houden).
Links maken Sommigen beweren dat hyperlinks de lijm van het internet zijn. In TYPO3 zijn er al automatisch links voor je gemaakt, alleen Training voor Editors - 38
al door het aanmaken van pagina’s in de hiërarchische structuur van de paginaboom wordt het menu in het linker venster automatisch gegenereerd. Maar wellicht wil je ook vanuit een bepaald tekstgedeelte een link naar een andere pagina, bestand of website of een e-mail adres. Dit is heel gemakkelijk als je de Rich Text Editor gebruikt: Je hoeft alleen maar de tekst te selecteren en op het "Insert Link" icoon te drukken:
Klik vervolgens op de titel van de “guest book” pagina:
... en de tekst heeft een link:
In de frontend komt hierdoor een link zoals je zou verwachten. Klik erop en je gaat naar de pagina met het guest book!
Achter de schermen Ik heb je al eerder verteld dat het gebruik van de Rich Text Editor problemen op kan leveren als je later de content in ruwe vorm wilt bewerken. Je kunt dat simuleren door het hele content element te bewerken, en daarbij de "Disable Rich Text Editor" optie onderin het formulier te selecteren (voordat je met bewerken begint):
Training voor Editors - 39
Het "Text" veld zal er nu uitzien als een gewoon formulierveld:
