content managment system handleiding

Transcriptie

1 content managment system handleiding

2 Inhoudstafel Over 1Click... 2 Wat?... 2 Hoe?... 2 Handleiding... 3 Overzicht... 3 Componenten... 4 Sniptypes... 4 Menu s... 4 Foto Album... 5 Inhoud... 7 Algemeen... 7 Tekst editor (TinyMCE)... 8 Bewerken van tekst... 8 Uitlijnen van tekst... 8 Een lijst aanmaken... 8 Knippen, kopiëren en plakken... 9 Een bepaalde stijl toekennen... 9 Een tabel toevoegen en bewerken... 9 Aanpassen van eigenschappen Toevoegen en verwijderen van rijen of kolommen Samenvoegen en splitsen van cellen Bewerken en invoegen van HTML Content Injection Form Snip List Google Map Gallery Image manager File manager Media manager Google Map manager SEO Vertalingen

3 Over 1Click Wat? 1Click is wat men in de termen van het vak noemt een CMS of Content Management System. Wanneer we dit letterlijk vertalen betekent dit Inhoud Beheer Systeem. Kort gezegd houdt dit in dat de klant de mogelijkheid heeft alle inhoud te beheren. Op continue basis blijven we deze CMS-tool verder ontwikkelen en verbeteren. Dit laat ons en u toe mee te zijn met de recentste ontwikkelingen. Het laat zelfs toe al bestaande websites updatable te maken. Het is gebaseerd op Zend Studio (php/mysql). Hoe? Het eigen CMS kan eenvoudig worden bereikt door vlak achter de domeinnaam /cms te plaatsen. Bvb. Men komt terecht op een inlogscherm waar gebruikersnaam en wachtwoord moeten worden ingegeven. 2

4 Handleiding Overzicht De beheerlijst, hier staat een overzicht van alle onderdelen van de website De basisfuncties van de onderdelen. Over de verschillende componenten zijn hier veel gelijkenissen. De inhoud van de component die geselecteerd is. Het breadcrumb path toont je op elke pagina welk element juist open staat en waar dat element zich bevindt. 3

5 Componenten Sniptypes Een Snip type kenmerkt het soort inhoud dat bestaat uit een titel en (HTML ) inhoud. Snip types die kunnen aangemaakt worden zijn bijvoorbeeld pagina s of nieuwsberichten. Een snip type bevat telkens nul of meerdere snips. Een snip is dus een concrete invulling van een snip type zoals een effectieve pagina of een nieuwsbericht. Hiernaast zien we het Snip type Pagina s met daaronder de snips Welkom, Over ons en Contact. Een snip kan aangemaakt worden door het sniptype in de Beheerlijst te selecteren en daarna op Pagina Toevoegen te klikken. Menu s De menustructuur is zodanig ontwikkeld dat deze totaal onafhankelijk is van de structuur van de sniptypes. Alle sniptypes komen dus niet rechtstreeks in het menu terecht. Links in een menu kunnen aangepast, verwijderd of toegevoegd worden door het menu in de Beheerlijst te selecteren. Daar bevinden zich alle bewerkingsmogelijkheden. 4

6 Foto Album Een foto album kenmerkt de soort content dat bestaat uit nul of meerdere foto s. Een foto behoort telkens toe aan slechts één foto album. Uiteraard is het wel mogelijk om verschillende albums aan te maken. Door de folder Foto Albums aan te klikken is het mogelijk een nieuw album toe te voegen. Er worden 4 velden zichtbaar. In het veld Naam kan een naam voor uw fotoalbum ingeven worden. De andere drie velden zijn SEO-velden. Meer informatie hierover bevindt zich bij het hoofdstuk SEO. Wanneer er vervolgens op één van de albums uit de boomstructuur geklikt word, volgt er een overzicht van het geselecteerde album. Iedere afbeelding heeft twee opties: de mogelijkheid om aan te passen of te verwijderen. Daarnaast is er ook een knop voorzien om extra foto s toe te voegen. Bij het klikken op deze knop wordt er een nieuwe pagina geopend waarin u een album kan selecteren om de afbeelding in te plaatsen en de gewenste afbeelding van op de computer kan selecteren. 5

7 In de navigatie boven de oplijsting van afbeeldingen zijn er mogelijkheden om de eerder besproken eigenschappen van het album zelf aan te passen, om het album te verwijderen en om meerdere foto s tegelijk te uploaden naar het album. Hiervoor voorziet Wax een mass-uploader. U kunt dan via drag & drop honderden foto s tegelijk updaten en de server genereert dan automatisch de juiste formaten (thumbnail + foto op internet resolutie). Het eindresultaat wordt verwerkt in een dynamisch gegenereerde fotogalerij op maat. Hiervoor hebben voorzien we de mogelijkheid om diverse players te koppelen aan de galerij, ook volledig op wens van de klant. 6

8 Inhoud Algemeen Nu we alle basis functionaliteit doorgenomen hebben is het tijd om de inhoud te gaan beheren. Wanneer er één van de snips uit een snip type aangeklikt wordt, krijgt men een overzicht van alle gegevens van het betreffende snip. Deze gegevens vallen op te splitsen in 3 delen: De snip/content opties De snip/content inhoud De SEO velden De snip opties betreft de velden die de positie bepalen van de snip, de auteur en het snip. De snip inhoud is de totale inhoud van een snip. Bij pagina s zal men enkel en alleen gebruik maken van deze TinyMCE (tekst editor). Hierover meer in het volgend hoofdstuk. Over de SEO-velden volgt verder in deze handleiding meer info. 7

9 Tekst editor (TinyMCE) TinyMCE staat voor Tiny Moxie Code Editor, waarbij Moxie Code zijn de makers van zijn van deze editor. Het is een tekstmanipulator, ontwikkeld voor online gebruik. Het biedt een soortgelijke basis functionaliteit welke je ook kan terugvinden in tekstverwerkingspakketten zoals Microsoft Word. Om het voor de klant gemakkelijk te maken volgt er een volledige opsomming van alle beschikbare mogelijkheden met deze editor. Bewerken van tekst (selecteer de tekst en klik op het knopje) Bold Het dikker laten ogen van de tekst. Italic Underline Het schuin zetten van tekst. Het onderlijnen van tekst. Uitlijnen van tekst (selecteer de tekst en klik op het knopje) Align left Align center Align right Align full Aan de linkerkant van het blad uitlijnen van de tekst. Centreren van de tekst. Aan de rechter kant van het blad uitlijnen van de tekst. Het uitlijnen zodat de tekst in een blok wordt weergegeven. Een lijst aanmaken (selecteer de tekst en klik op het knopje) Unordered list Ordered list Aanmaken van een lijst die niet geordend is. Aanmaken van een lijst die wel geordend is. Geordende lijsten zijn genummerd: 1. Lijstelement 1 2. Lijstelement 2 3. Lijstelement 3 Ongeordende lijsten worden vooraf gegaan door een bolletje: Lijstelement 1 Lijstelement 2 Lijstelement 3 8

10 Knippen, kopiëren en plakken (selecteer de tekst en klik op het knopje) Cut Knippen van een stuk tekst. (Ctrl + X) Copy Kopiëren van een stuk tekst. (Ctrl + C) Paste Plakken van een stuk tekst. (Ctrl + V) Paste as Plain Text Paste from Word Plakken van een stuk tekst zonder enige opmaak. Plakken van een stuk tekst uit Microsoft Word. Een bepaalde stijl toekennen (selecteer de tekst en kies een optie uit de lijst) Selecteren en veranderen van een bepaald type paragraaf of het beheren van een hoofding. Stijl toekennen aan een stuk tekst. De mogelijkheid bestaat dat er geen stijl(en) beschikbaar zijn. Een tabel toevoegen en bewerken Insert table Toevoegen van een tabel in de tekstregel. Bij het klikken op het icoontje wordt een nieuw venster geopend. Hier kunt u de tabel volledig aanpassen naar eigen wens. Het aantal rijen/kolommen, randen, breedte, hoogte, etc. kunnen ingevuld worden door de klant zelf. Eens er een tabel aangemaakt is, kan deze door te klikken op de insert knop, toegevoegd worden in de tekstregel. Hierbij worden ook een aantal icoontjes van de teksteditor ingeschakeld. 9

11 Aanpassen van eigenschappen Row properties Cell properties Aanpassen van de eigenschappen van een rij. Aanpassen van de eigenschappen van één bepaalde cel. Toevoegen en verwijderen van rijen of kolommen (selecteer een rij of kolom en druk op het knopje) Insert row before Insert row after Insert column before Insert column after Delete row Delete column Een rij wordt toegevoegd voor de geselecteerde rij. Een rij wordt toegevoegd na de geselecteerde rij. Een kolom wordt toegevoegd voor de geselecteerde kolom. Een kolom wordt toegevoegd na de geselecteerde kolom. De geselecteerde rij wordt verwijderd. De geselecteerde kolom wordt verwijderd. Samenvoegen en splitsen van cellen Split Cell Merge Cells Splitsen in meerdere cellen van een geselecteerde cel. Samenvoegen van verschillende geselecteerde cellen. Bewerken en invoegen van HTML Insert/edit link Unlink Insert/edit anchor Edit HTML source Een link plaatsen naar een andere pagina. Selecteer de link en klik op deze knop om hem te verwijderen. Hiermee wordt een plaats in het document aangeduid. Via een link kan er dan naar deze anchor verwezen worden. Aanpassen van HTML broncode. (Enkel voor gevorderden) 10

12 Content Injection Één van de grote voordelen van 1Click is dat je verschillende content types kan combineren binnen je sniptype. Dit is mogelijk via de Content Injection knop. Na het klikken op de knop volgt een venster waarin het type van de injectie kan gekozen worden. Voor elk type volgen er specifieke eigenschappen die naar wenst kunnen aangepast worden. De types waar uit gekozen kan worden zijn: Form, Snip List, Google Map en Gallery. Form Via Form kan een eerder aangemaakt custom form toegevoegd worden. Alle beschikbare forms staat opgelijst in de combobox. Na het toevoegen wordt het geselecteerde form in de tekstregel geplaatst. Snip List Via Snip List kunnen zeer vlot bvb. de laatste 3 nieuws items toegevoegd worden aan een pagina. Ze kunnen simpel gesorteerd worden en het aantal weer te geven items kan aangepast worden naar wens. 11

13 Google Map Via Google Map kan een interactieve landkaart toegevoegd worden. De beschikbare kaarten worden in een lijst weergegeven. Daarnaast kan ook hoogte en breedte van de in te voegen kaart bepaald worden. Gallery Via Gallery kan een bestaande fotoalbum toegevoegd worden eender waar op een pagina. De beschikbare albums worden in een lijst opgegeven. 12

14 Image manager Via de TinyMCE Image manager kan u al uw afbeeldingen eenvoudig beheren. Links is er een overzicht van de mappen die beschikbaar zijn. Rechtsboven heeft u de mogelijkheid een map aan te maken, een afbeelding te uploaden in de map die u bekijkt en de map te verversen. Het is mogelijk zelf mappen aan te maken om zo afbeeldingen gestructureerd te ordenen zodat deze altijd snel terug kunnen gevonden worden. Wanneer een map bekeken wordt zal er altijd een duidelijk overzicht te zien zijn van alle afbeeldingen in deze map. Een afbeelding kan simpelweg ingevoegd worden door op een afbeelding te klikken. Let wel: deze afbeelding zal als Lightbox in de inhoud geplaatst worden. Na een klik op de afbeelding vervaagt de achtergrond van de website en komt de afbeelding groter in beeld. Als deze optie niet gewenst is, moeten afbeeldingen door middel van de Insert Image -knop aan de pagina worden toegevoegd. Deze knop kan teruggevonden worden in de werkbalk van de teksteditor. Wanneer er rechts onder op een bepaalde afbeelding geklikt wordt, krijgt men verschillende mogelijkheden voorgeschoteld. De afbeelding kan aan een lijst van favoriete afbeeldingen toegevoegd worden, ze kan verwijderd of bekeken worden, maar ook bewerkt. Bij het klikken op Edit wordt een foto editor geopend, waarin men de mogelijkheid krijgt om de geselecteerde foto op verschillende manieren te bewerken. Afbeeldingen kunnen bijgeknipt worden, verschaald, gedraaid, etc. 13

15 File manager Via de TinyMCE File manager kunnen eenvoudig bepaalde documenten zoals pdf-bestanden, word-bestanden, etc. toegevoegd worden aan een pagina. Na het klikken op de knop, wordt er een venster zichtbaar. Hier heeft u verschillende opties zoals een nieuwe map aanmaken, een bestand uploaden of een nieuw bestand creëren. Als er op Upload geklikt wordt, krijgt men een pop-up venster waar de mogelijkheid gegeven wordt een bestand te selecteren en te uploaden. Eens het bestand geupload is, kan er links onder een preview bekeken worden. Één van de bestanden kan dan geselecteerd worden en wordt als link in de gewenste pagina geplaatst. 14

16 Media manager Met de Media manager kunnen er verschillende media types in de website geïnjecteerd worden. Video s, flash filmpjes, Quicktime, kan allemaal geupload worden. Het belangrijkste is video s uploaden, dit gebeurt via HTML5 Video. De afmetingen van de geïnjecteerde media kan ingesteld worden bij Dimensions, om de verhouding tussen breedte en hoogte gelijk te houden, kan Constrain Proportions aangevinkt worden. 15

17 Google Map manager Wax voorziet de mogelijkheid via het CMS om automatisch een Google Maps-kaart te genereren met verschillende vestigingen of locaties. Elke map kan volledig aangepast worden naar eigen wens. Eens een map is toegevoegd, kan u op deze map verschillende locaties of plaatsen toevoegen. Bij elke plaats kan ook een uitgebreide beschrijving meegegeven worden die zichtbaar wordt bij het klikken op deze plaats op de kaart. Tevens biedt Wax zijn klanten de mogelijkheid om custom iconen toe te voegen op de kaart. Indien er een eigen icoon op de kaart dient geplaatst te worden, zal Wax dit graag uitvoeren. Een afbeelding wordt aangeleverd en door Wax op de correcte plaats gezet in Google Maps. Eindresultaat: 16

18 SEO SEO of Search Engine Optimization is een onderdeel van zoekmachinemarketing en kan worden gedefinieerd als het geheel aan activiteiten bedoeld om een website of pagina hoog te laten scoren in de zoekresultaten van een zoekmachine als bvb. Google of Bing, op de voor die webpagina relevante trefwoorden of trefwoordcombinaties. Aangezien een vermelding in die resultaten gratis is, vormen deze zoekresultaten een interessant alternatief voor zoekmachineadverteren. Wax voorziet voor iedere snip drie velden voor de SEO. Titel, beschrijving en kernwoorden kunnen door de klant specifiek en kort ingevuld worden, wat er dan automatisch voor zorgt dat uw website hoger in de ranking zal komen op de verschillende zoekmachines. Wel is het belangrijk de woorden en beschrijving zorgvuldig te kiezen. 17

19 Vertalingen 1Click biedt de mogelijk om de website in meerdere talen weer te geven. Indien er aanpassingen dienen te gebeuren aan de vertalingen kan dit via Vertalingen. Per taal is er een tabblad voorzien. De basis benaming staat overal in het Engels, met daaronder een tekstvak waar de vertaling voor de desbetreffende taal ingegeven kan worden. Bij sommige vertalingen staan er speciale tekens in de Engelse benaming, deze tekens moeten volledig worden overgenomen in de vertaling. 18

20 Surf naar onze website voor meer info Kortrijksesteenweg 90 B-9830 Sint-Martens-Lathem +32 (0)