PhotoworkZ pop-up website handleiding

Transcriptie

1 PhotoworkZ pop-up website handleiding Inhoudsopgave PhotoworkZ pop-up website handleiding...1 Aanmelden op de admin module...2 Beheer van teksten...3 Tekst downloaden en aanpassen...3 Aanpassen van teksten...4 Tip...4 Beheren van foto's...5 Mappen...5 Bestanden...5 Functies...6 Beheren van PDF documenten...6 Concept...6 Mappen...7 Bestanden...8 Functies...8 Beheer van invulformulieren...9 Invulformulier mogelijkheden...10 Hoofdingen en tekst...10 Radio buttons...11 Check buttons...11 Input box en text area...12 Text box zonder label...13 Voorbeeld invulformulier...13 Beheer van visitekaartjes...15 Code list...17 Zelf een foto aan een pagina toevoegen...17 Advanced...18 P.1

2 Aanmelden op de admin module Onderaan iedere pagina vind je links de login knop Deze knop brengt je naar de login pagina waar je je login en wachtwoord kan intikken en aanmelden. Om na het aanmelden terug te gaan naar je website klik je op de knop Terug naar website De login en wachtwoord werden bij het opleveren van de site doorgegeven. Ben je deze vergeten of wil je een eigen login en wachtwoord, dan contacteer je ons. Indien alle verloopt zoals het hoort krijg je onderaan het scherm het 'sticky' administrator menu. We overlopen ieder functionaliteit. De mogelijkheid bestaat dat jouw pop-up website niet alle functies gebruikt. P.2

3 Beheer van teksten Iedere tekst op uw pop-up website kan je zelf aanpassen. Een eerste manier is de tekst downloaden, aanpassen in een ASCII editor (notepad, notepad++, ) en terug opladen naar de website. Tekst downloaden en aanpassen Klik op de knop De waarschuwing is hier terecht. Verwijder je een bestand dan is die tekst ogenblikkelijk van uw website verdwenen. Indien je de exacte bestandsnaam niet meer kent dan kan je een leeg bestand aanmaken. Hier komen we later op terug. De bestandsnamen kan je aanklikken, de browser zal dan deze file downloaden (Internet Explorer geeft hier een probleem) Het bestand heeft de extensie php maar is een zuiver tekstbestand dat volledig beantwoord aan de HTML standaard. Iemand met minimale kennis van HTML kan deze bestanden aanpassen en zo op deze manier de pop-up website beheren. Nadat je het gewenste bestand hebt aangepast, verwijder je dit bestand op de server door naast de juiste bestandsnaam de knop Verwijder te klikken. Opgelet er is geen Undo knop. Weg is weg. Via opladen bestanden kan je op je computer de aangepaste versie selecteren en opladen naar de pop-up website. De tijd tussen het verwijderen en opladen van het bestand is de pagina op de popup website niet beschikbaar. P.3

4 Aanpassen van teksten Via de knop kan je de teksten van de pagina waarop je staat aanpassen. Er opent zich een editbox waar je in een editor de teksten kan aanpassen, linken, pdf bestanden en foto's kan toevoegen. Nadat je de tekst hebt aangepast, dien je eerst op Opslaan te klikken. Indien je een andere editbox selecteert ben je je wijzigingen kwijt!!! De teksten hebben een blauwe knop de tags een groene. De tags zijn enkel via deze methode aan te passen. Aanpassen tekst grootte Selecteren van hoofding. HTML gebruikt H1, H2, H3 om het formaat en kleur van de hoofdingen te bepalen. Via deze knop kan je de standaard hoofding gebruiken. Let op dit kan per pagina verschillen. Tip Indien je per ongeluk een tekstbestand hebt verwijderd (zie vorige hoofdstuk) dan kan je via Aanpassen tekst aan een nieuwe lege pagina aanmaken. Hiervoor selecteer je in het menu de juiste pagina, klik Aanpassen tekst aan je krijgt dan een lege editbox die je kan invullen. Klik Opslaan en het juiste bestand wordt aangemaakt (ook bij een lege editbox). P.4

5 Beheren van foto's We onderscheiden drie zones 1. Mappen 2. Bestanden 3. Functies Mappen De structuur van de pop-up website zit weergegeven in de mappen. De WebdesignZ site gebruikt volgende mappen: Webdesignz: Deze map bevat foto's die aan een pagina gelinkt zijn. De naamgeving van deze map is de naam van de site die ook gebruikt wordt in de titel van de pop-up website. Banner: De foto's die gebruikt worden voor de banner op de hoofdpagina. Let op de afmetingen van deze foto's dienen gerespecteerd te worden. Random: Deze foto's worden gebruikt door de random foto generator Site: een extra map voor foto's die u zelf kan beheren in pagina's Voorbeeld: een extra map die vast gekoppeld is aan de pagina 'voorbeeld'. Er zijn op uw pop-up website meer mappen gedefinieerd, dit hangt af van het design van us website. Bestanden In deze zone wordt de huidige mapnaam weergegeven en een oplijsting van de foto (jpg) bestanden binnen deze map. Ieder bestand heeft een knop 'Verwijder', een miniatuur weergave en de bestandsnaam die aanklikbaar is. In tegenstelling tot de teksten zal hier de foto in volledige resolutie getoond worden indien je op deze bestandsnaam klikt. Verwijder = echt verwijderen, er is geen undo!! P.5

6 Functies Hier kan je een foto (.jpg) selecteren op je computer en deze opladen naar de geselecteerde map op de pop-up website. De foto wordt op de juiste maat gebracht tijdens het opladen. Dit kan wel enkele seconden in beslag nemen. Na het opladen krijg je een bevestiging en de foto verschijnt in de lijst. Beheren van PDF documenten Het beheren van een PDF loopt voor het grootste stuk gelijk aan het beheren van foto's. We bespreken enkel de verschillen. Als voorbeeld gebruiken we een andere site die intensief gebruik maakt van PDF's. Concept Om het mogelijk te maken de PDF mappen vrij te sorteren wordt er een voorvoegsel toegevoegd. Dit voorvoegsel wordt uiteraard niet weergegeven op de pop-up website. De screenshot rechts van de 'Nuttige info' pagina op deze website is het resultaat. De naam van de mappen wordt in het groen getoond, de naam van de PDF bestanden in blauw, zonder extensie. Lay-out: X_Mapnaam Waar X een nummer is van 0 tot 9 en Mapnaam een vrij te kiezen naam. Bestandsnaam.pdf: Bestandsnaam is de tekst die gelinkt wordt naar de PDF. De extensie wordt niet getoond. Vergeet je de extensie toe te voegen, dan zullen de twee eerste karakters van je mapnaam ontbreken. Je kan eenvoudig de mapnaam aanpassen. Dir bespreken we op de volgende pagina's. P.6

7 Mappen De Webdesignz map is weerom de naam van de pop-up website. Met als voorvoegsel 'Z_'. De mappen met voorvoegsel 'Z_' worden gescheiden van de andere mappen. Dit zijn systeem mappen. In het voorbeeld zal in de map Addente (Z_Addente) alle PDF'fen worden ondergebracht die specifiek in de site worden getoond. Bvb algemene voorwaarden. De map tag_behandel bevat de PDF'fen die als link getoond worden in de TAG op de pagina Behandelingen. Opgelet: De volledige mapnaam is 'Z_tag_behandel'! P.7

8 Bestanden In deze zone wordt de huidige mapnaam weergegeven en een oplijsting van de PDF bestanden binnen deze map. Ieder bestand heeft een knop 'Verwijder' en de bestandsnaam die aanklikbaar is. In tegenstelling tot de teksten zal hier de PDF getoond worden indien je op deze bestandsnaam klikt. Verwijder = echt verwijderen, er is geen undo!! Functies Nieuwe map Om een volledig beheer te kunnen hebben is het belangrijk om zelf mappen te kunnen aanmaken. Tik de naam van de map in de inputbox en klik op aanmaken OPGELET: De mapnaam bij PDF bestanden wordt voorafgegaan door een voorvoegsel van één karakter en een underscore. Indien je meerdere maal hetzelfde voorvoegsel gebruikt worden die mappen alfabetisch gesorteerd. Wijzigen huidige map Mocht je je vergist hebben kan je ten alle tijden de map van naam wijzigen via deze functie. Lege map vewijderen Er kunnen enkel lege mappen verwijderd worden, dit om ongelukken te voorkomen. Wil je een map verwijderen, dan verwijder je via de website eerst alle bestanden in deze map en verwijder je daarna de map door op die knop te klikken. Opladen bestanden Hier kan je een PDF selecteren op je computer en deze opladen naar de geselecteerde map op de pop-up website. Na het opladen krijg je naar analogie met opladen van foto's een bevestiging en de PDF verschijnt in de lijst. P.8

9 Beheer van invulformulieren Een eenvoudig standaard invulformulier is bvb uw contact formulier. Het uitzicht en gebruik van deze pagina is hetzelfde als bij de PDF'fen, met dit verschil dat klikken op de bestandsnamen voor een download zal zorgen van het bestand, idem zoals bij Beheer site teksten. Het aanpassen en opladen van deze bestanden loop dan ook volledig in analogie met wat werd beschreven in Beheer van teksten. Het invulformulier start vanaf een gestructureerd tekstbestand. Met zuivere ASCII editor zoals notepad of notepad++ kan dit bestand aangepast worden. Gebruik geen tekstverwerker zoals MS Word omdat deze extra opmaak informatie meestuurt. We bespreken de verschillende mogelijkheden en de wijze waarop ze weergegeven worden in het tekstbestand. P.9

10 Invulformulier mogelijkheden (Achteraan dit hoofdstuk vind je als voorbeeld het tekstbestand van onderstaand formulier) Hoofding 1 Hoofding 2 Tekst Input box Radio buttons Labels Input box Check box Text Area Hoofdingen en tekst Het soort haken waar de tekst tussen staat bepaalt de weergave van de tekst in de pagina Hoofding 1: <Invulformulier> Hoofding 2: [Algemene gegevens] P.10

11 Tekst: (Een voorbeeld van de mogelijkheden van het invulformulier) Radio buttons Er kan slechts één of geen keuze gemaakt worden. Indien je de radio button verplicht maakt zal er een keuze gemaakt moeten worden alvore,s het formulier verstuurd kan worden. Syntax: Geslacht/radio/2/0 Man/ Geslacht = Deze tekst wordt getoond als label. radio = Radio button 2 = Aantal radiobuttons 0 = niet verplicht (1 = verplicht) Vrouw/ Labels + / ('/' = afsluiter) Check buttons Vergelijkbaar met radio buttons maar er zijn meerdere selecties mogelijk. Syntax: Welke informatie wenst u te ontvangen/check/4/1 Fotografie algmeen/ Welke inormatie... = Label check = Check box 4 = Aantal check boxen 1 = verplicht (0 = niet verplicht) Huwelijksreportages/ Productfotografie/ Pop-up website/ Labels + / ('/' = afsluiter) P.11

12 Input box en text area Achternaam/text/40/1 Achternaam = Label text = type 40 = lengte 1 = verplicht (0 = niet verplicht) Mogelijke types: text: Tekst ingave, alle karakters number: Enkel cijfers date: Een datum veld tel: Telefoonnummers adres Op een tablet zal het toetsenbord zich automatisch aanpassen aan het gevraagde type. Zo zal bij een type 'number' een numeriek keypad getoond worden. Lengte: 10: Small input box 20: medium input box 40: standaard input box 1000: Text area! Indien het label te lang is wordt het label ipv voor de input box, er boven geplaatst. P.12

13 Text box zonder label Om deze vorm te verkrijgen plaats je in het tekstbestand op de tweede lijn 'stack$' Voorbeeld: *********************** stack$ [Contact formulier] Achternaam/text/40/1 Voornaam/text/40/0 Telefoon/tel/40/1 / /40/1 Uw bericht/text/1000/1 Deze vorm neemt de beschikbare ruimte in. M.a.w. de lengte wordt niet gebruikt, doch dient deze ingevuld te zijn met een correcte waarde. Voorbeeld invulformulier *************** Invulform. txt = LABEL / TYPE / LENGTE/ MANDATORY ************** <Invulformulier> (Een voorbeeld van de mogelijkheden van het invulformulier) [Algemene gegevens] Achternaam/text/40/1 Voornaam/text/40/0 (radiobuttons) Geslacht/radio/2/0 Man/ Vrouw/ Straat/text/40/0 Huisnummer/text/20/0 Postcode/number/10/1 Gemeente/text/40/0 Geboortedatum/date/20/0 Telefoon thuis/tel/20/0 Telefoon werk/tel/20/0 GSM/tel/20/0 / /40/1 (Checkboxen) Welke informatie wenst u te ontvangen/check/4/1 Fotografie algemeen/ Huwelijksreportages/ Productfotografie/ Het resultaat op de pagina: Pop-up website/ Indien u een vraag heeft kan u die hier invoeren:/text/1000/0 (Dit formulier kan u zelf aanpassen met bvb notepad.) P.13

14 Tip De eerste lijn van het tekstbestand wordt niet gebruikt. *************** Invulform. txt = LABEL / TYPE / LENGTE/ MANDATORY ************** Verwijder deze lijn dus niet. P.14

15 Beheer van visitekaartjes Klik in het Administrator menu. Indien er nog geen visitekaartjes zijn aangemaakt dan laad je via de opladen bestanden functie een profielfoto op. Tijdens het opladen wordt deze foto op de juiste maat gebracht. Let wel op dat je voor iedere foto dezelfde verhouding hoogte breedte gebruikt. Te grote bestanden worden niet opgeladen. Van zodra de foto is opgeladen zie je het basis visitekaartje met de foto. De visitekaartjes kan je hier ook verwijderen. P.15

16 Hierna ga je naar de pagina waar de visitekaartjes getoond worden op de pop-up website om de correcte gegevens in te vullen. Hiervoor klik je op de knop Aanpassen teksten aan en krijg je een Editbox waarin je de gewenste aanpassingen kan uitvoeren. We raden aan om deze teksten aan te passen in HTML broncode. Om dit te kunnen klik je op laatste icoontje met pop over Show source. Je krijgt dan volgende scherm: Dubbelklik Naam en typ de de juiste naam in. Doe hetzelfde met de volgende lijnen. Indien je geen bijkomende info wenst toe te voegen dan verwijder je gewoon de volledige lijn. Wens je een derde en vierde lijn, dan typ je de tekst en eindig met <br>. Door dit zo te wijzigen ben je zeker dat alle visitekaartjes dezelfde layout hebben. P.16

17 Code list <h1> : Begin van hoofding 1 </h1> : Einde van hoofding 1 Syntax : <h1>hoofding</h1> Idem voor <h2> tot <h6> HTML opmaak duidt steeds het begin en einde aan op dezelfde manier. <br> : Volgende lijn Syntax: Een tekst<br>een andere tekst<br> Beide teksten komen op de website onder elkaar te staan ook al staan ze naast elkaar in de editbox. <br> Laat de browser naar een nieuwe lijn springen. Een blanco lijn: <br><br>. <strong> tekst vetjes </strong> Zelf een foto aan een pagina toevoegen De foto's mappen bevinden zich op de locatie site/foto/. De naam van de mappen vind je bij Beheer Foto via het Administrator menu. Bvb: site/foto/banner/ = locatie van de banner foto's site/foto/site/ = vrije folder voor foto's (advies is om hier uw foto's te plaatsen) in de editbox selecteer je Insert Image en tik je het juiste pad en bestandsnaam in (zonder Niet vergeten Submit voor de foto en Opslaan voor de code. P.17

18 Een beter manier is om dit in bron code in te voegen : <img src= site/foto/site/mijnfoto.jpg class= img-responsive > Advanced class= img-responsive : Je foto wordt afhankelijk van de beschikbare ruimte aangepast (enkel verkleinen, niet vergroten). Wil je gebruik maken van de foto modal pop-up (indien je op de foto klikt wordt die in het groot getoond) dan voeg je volgende code toe: <a href="site/foto/site/mijnfoto/jpg" data-lightbox="_photoworkz" title = ""><img src="site/foto/site/mijnfoto/jpg" class = "img-responsive"> </a> <a href.>...</a> = aanklikbaar gedeelte href= site/foto/site/mijnfoto/jpg : locatie van de foto die je wenst te tonen data-lightbox="_photoworkz" : Aanroepen van de module om de foto te tonen Je dient dus twee maal de locatie van uw foto mee te geven P.18