1click updatemodule Introductie 1Click Light 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 u als klant de mogelijkheid heeft alle inhoud te beheren. Het is gebaseerd op Zend Studio (php/mysql). Hoe bereiken? U kunt uw CMS eenvoudig bereiken door vlak achter uw domeinnaam /cms te plaatsen. Bv. www.uwsite.be/cms. U komt dan terecht op een inlog venster u uw gebruikersnaam en paswoord zal moeten ingeven. (zie laatste pagina) Componenten Het 1Click Light pakket bevat volgende componenten: - Content/Snip types: inhoud van de website zoals agenda, nieuws, fotogalerijen - Menu structuur - Foto album(s)
2 Snip Type 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 nieuws (Figuur 1). 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. Op Figuur 1 zien we het Snip type Pagina s met daaronder de snips Welkom, Over ons en Contact. Figuur 1 - Boomstructuur van de inhoud Menu structuur De Menu structuur is ontwikkeld met de gedachte een losstaande structuur te creëren die niet rechtstreeks verbonden is met de structuur van de Snip types/blokken inhoud. Zo is het mogelijk een totaal verschillende navigatiestructuur te creëren ten opzichte van de eigenlijke inhoud. Hiermee kunt u nieuwe pagina s creëren. 2
3 We stellen evenwel voor om aan de navigatie niet te sleutelen. Het menu is grafisch opgebouw en leent zich niet om x aantal extra hoofdmenu s bij te creëren. Werking: via toevoegen kan u menu item s toevoegen en die linken aan de content naar keuze, via verwijder kan u die verwijderen. U kunt onder menus 2 menu s vinden: het hoofdmenu voor navigatie bovenaan en een submenu waar bv. contact, disclaimer... en andere menu links die bv. onderaan de pagina mogen komen kunnen staan. 3
4 Foto album Een foto album kenmerkt het soort content dat bestaat uit nul of meerdere foto s. Een foto behoort telkens toe aan slechts één foto album. De foto albums worden weergegeven als volgt (Figuur 2). Figuur 2 - Boomstructuur foto albums Door op de folder Foto Albums te klikken is het mogelijk een nieuw album toe te voegen. Hierbij krijgen we 4 velden voorgeschoteld die moeten ingevuld worden (Figuur 3). Dit is de naam van het album en de SEO velden. De SEO (Search Engine Optimalisation) velden maken het mogelijk om voor ieder snip specifiek en kort te beschrijven wat de gehele pagina beschrijft. Wanneer deze velden goed gekozen zijn. Maakt u het mogelijk dat uw website hoger in ranking zal komen te staan bij zoekmachines zoals Google en anderen. Figuur 3 - Toevoegen van album Wanneer u vervolgens op een album uit de structuur klikt, krijgt u een volledig overzicht van het betreffende album. Bovenaan vinden we de velden uit Figuur 3 terug en daaronder een volledige opsomming van alle afbeeldingen die zich bevinden in dit album. Iedere afbeelding heeft twee opties: de mogelijkheid deze aan te passen of te verwijderen. Daarnaast vinden we boven de opsomming van alle afbeelding ook nog eens de link Voeg foto toe terug. Wanneer we op deze link klikken, krijgen we Figuur 4 te zien. Zoals u kan zien heeft u de mogelijkheid hier nog eens te kiezen in welk album u de foto wil toevoegen. Figuur 4 - Toevoegen van album 4
5 Inhoud beheren Nu we alle basis functionaliteit doorgenomen hebben is het tijd om uw inhoud te gaan beheren. Wanneer u één van de snip elementen uit een snip type aanklikt krijgt u een overzicht van alle gegevens van het betreffende snip. Deze gegevens vallen op te splitsen in 4 delen: - De snip/content opties - De snip/content preview inhoud - De snip/content inhoud - De SEO velden De snip opties betreft de velden die de positie bepalen van de snip, de auteur, het snip type en de titel van de snip. Deze 4 velden zijn te zien op Figuur 5. Figuur 5 - Snip opties De snip preview inhoud (Figuur 6) is de inhoud die bijvoorbeeld gebruikt kan worden wanneer er nood is aan een verkorte weergave van de inhoud. We spreken hier over nieuws, referenties, acties en dergelijke meer. Figuur 6 - Snip preview inhoud 5
6 De snip inhoud (Figuur 7) is de totale inhoud van een snip. Bij pagina s zal men enkel en alleen gebruik van maken van deze TinyMCE (tekst editor). Figuur 7 - Snip inhoud De SEO (Search Engine Optimalisation) velden maken het mogelijk om voor ieder snip specifiek en kort te beschrijven wat de gehele pagina beschrijft. Wanneer deze velden goed gekozen zijn. Maakt u het mogelijk dat uw website hoger in ranking zal komen te staan bij zoekmachines zoals Google en anderen. Figuur 8 - SEO velden 6
7 TinyMCE (tekst editor) TinyMCE wat staat voor Tiny Moxie Code Editor (Moxie Code zijn de makers van de editor) is een tekst manipulator ontwikkeld voor het web. Het biedt soortgelijke basis functionaliteit die je ook kan terug vinden in tekstverwerkingspakketten zoals Microsoft Word. Om het u als klant gemakkelijk te maken volgt er een volledige opsomming van alle beschikbare mogelijkheden en hun uitleg. Bewerken van tekst Bold: is het wat dikker laten ogen van de tekst. Selecteer de tekst en klik op het knopje. Italic: is het wat schuin zetten van tekst. Selecteer de tekst en klik op het knopje. Underline: is het onderlijknen van tekst. Selecteer de tekst en klik op het knopje. Uitlijnen van tekst Align left: Is het links aligneren van tekst. Selecteer de tekst en klik op het knopje. Align center: Is het centreren van tekst. Selecteer de tekst en klik op het knopje. Align right: Is het rechts aligneren van tekst. Selecteer de tekst en klik op het knopje. Align full: Is het aligneren van tekst in een blok. Selecteer de tekst en klik op het knopje. Tekst een bepaalde stijl geven: Hier kan je tekst een bepaalde stijl geven: selecteer de tekst en kies een optie uit de lijst (soms geen stijl beschikbaar). Hier kan je tekst voorzien van een type paragraaf: selecteer de tekst en kies een optie uit de lijst. 7
8 Een lijst maken: Unordered list: Is een ongenummerde lijst maken. Klik op het knopje en druk enter, er komt automatisch een ander bolletje. Align full: Is een genummerde lijst maken. Klik op het knopje en druk enter, er komt automatisch een opvolgend nummertje. Blok tekst bewerken: Outdent: Is de volledige blok tekst een Tab opschuiven naar rechts. Selecteer de gewenste tekst, klik op het knopje en de tekst verschuift naar rechts. Indent: Is de volledige blok tekst een Tab opschuiven naar links. Selecteer de gewenste tekst, klik op het knopje en de tekst verschuift terug naar links. HTML bewerken/invoegen van: Insert/edit link: Dit knopje dient om een link te maken of te bewerken naar een andere pagina of een foto. Selecteer de tekst of foto (thumbnail) en typ de link of selecteer de originele foto. Unlink: dient om een link te verwijderen. Na de link geselecteerd te hebben, klik op het knopje. Insert/edit Anchor: Dient om een soort link te maken op een bepaalde zone van dezelfde pagina. Selecteer een tekst, en klik op dit knopje. Insert image: dient om een afbeelding in te voegen in je document. Klik op het knopje en er verschijnt een pop-up. Kies de link waar je image staat en typ deze in het vlak Image url. Indien je een afbeelding hebt opgeladen via de image manager klik je op het vlakje naast het veld Image url. U zult dan van hieruit een afbeelding kunnen selecteren. 8
9 TinyMCE Image manager Via de TinyMCE Image manager kan u al uw afbeeldingen eenvoudig beheren. Op Figuur 14 ziet u een overzicht van de TinyMCE Image manager. Zoals u kan zien heeft u links 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 uw afbeeldingen gestructureerd te ordenen zodat u deze altijd snel terug kan vinden. Wanneer u een map bekijkt zal u altijd een duidelijk overzicht te zien krijgen 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. Met Lightbox bedoelen we dat wanneer u zult klikken op de kleine afbeelding u een vergroot beeld zal krijgen. Wilt u dit niet zal u gebruik moeten maken van de Insert image optie hierboven reeds beschreven. Figuur 9 - TinyMCE Image manager Met deze foto editor kan je images scalen, croppen, roteren,... 9
10 TinyMCE File manager Via de TinyMCE File & Embed media manager kan u al uw downloads & media (flash/flash video) eenvoudig beheren. 10