1. Opzetten HTML5 web-interface




Publicaties die worden gemaakt in de BlueBerry Magazine Editor zijn te aanschouwen via desktop, tablet en native iPad-app. De HTML5-interface past zich aan op basis van deze verschillende devices. Dit document geeft de richtlijnen aan van wat BlueBerry kan instellen aan de webinterface van het systeem. Dit is eigenlijk het kader om het daadwerkelijke magazine heen. Met deze aanpassingen sluit de interface zo goed mogelijk aan op de huisstijl van je organisatie. Via het toestuurde formulier kun je je wensen doorgeven waarna BlueBerry een voorstel maakt van de interface in de bijbehorende huisstijl.



0. Algemene informatie / Metadata

Onzichtbaar voor een normale bezoeker maar zichtbaar voor zoekmachines is de metadata. Dit is een omschrijving die aan de pagina’s is gekoppeld. BlueBerry dient hiervoor een aantal teksten standaard in te vullen :

- Titel magazine
- Omschrijving magazine
- Aantal zoekwoorden

Indien het magazine niet in zoekmachines naar voren mag komen, of je het magazine met een wachtwoord wilt beveiligen is dit aan te geven in het aanvraagformulier.


1. Kleuren interface, logo + favicon

De interface heeft een vast stramien maar kan worden ingesteld op basis van de kleurstelling van uw organisatie.

Wat is er instelbaar :
- Logo in menubalk
- Achtergrondkleur of achtergrondafbeelding
- Kleuren van de controls & menubalken
- Kleuren van de teksten & pop-ups
- Favicon: logo / icoontje in adresbalk van de browser
- Lettertypes voor de interface, apart lettertype voor de titels en een variant voor de algemene tekst

Wat is niet instelbaar :
- Andere posities van objecten of buttons
- Iconen van buttons
- Werking van de interface & de manier hoe pop-ups of overlays in beeld averschijnen door middel van animatie

Op basis van je aanwijzingen of aangeleverde huisstijlspecificaties maakt BlueBerry een grafisch voorstel op. Na akkoord wordt dit verwerkt in je magazine-omgeving.



2. Instelbare URL

Je kunt kiezen voor een subdomein van online-magazine.nl, denk hierbij bijvoorbeeld aan bedrijfsnaam.online-magazine.nl. Het is ook mogelijk om je eigen domein naar BlueBerry te verwijzen. Dit doe je door een DNS-aanpassing te maken op basis van een CNAME-verwijzing. Klik hier voor meer informatie.



3. Social media

Binnen de menubalk is er ruimte voor verschillende soorten sociale interactie. Zo is het mogelijk om te linken naar de verschillende social mediapagina’s waar je organisatie actief in is, zoals Facebook, Twitter, Pinterest, Linkedin en Google+.

Je kan hierbij aangeven welke opties (kanalen) geactiveerd dienen te worden of helemaal moeten worden uitgeschakeld. Een extra optie is het activeren van de LIKE-button voor Facebook. Hiermee kan een bezoeker de bedrijvenpagina van je organisatie LIKEN, waarna hij of zij via de eigen timeline op de hoogte gebracht kan worden van nieuws en ontwikkeling van de organisatie.

Indien een bezoeker een pagina uit het magazine wil delen is dit mogelijk met de SHARE-button. Op dat moment krijgt men de mogelijkheid de eigen pagina van de verschillende sociale netwerken te plaatsen.



4. Navigatie

De vormgeving & werking van de navigatie staat vast, hierin kunnen enkel de kleuren worden aangepast. Na het aanklikken van het index-icoontje (onder in beeld, tussen de twee navigatiepijlen) verschijnt de inhoudsopgave waar een bezoeker snel naar een bepaalde pagina kan navigeren. Vanuit dit overzicht is het vervolgens ook mogelijk naar de verschillende edities te linken.



5. Verschillende talen

Ga je het magazine in verschillende talen opmaken? Dan kan BlueBerry de interface instellen in de gekozen taal, elk magazine in een verschillende taal krijgt een sepcifieke front-end omgeving. Vooraf dient BlueBerry de betreffende taal te activeren en in te stellen in de Magazine Editor. Voor het gekoppelde hoofddomein moet er een standaard taal worden gekozen waar en bezoeker op binnenkomt. Vanaf dat moment kan men van taal wisselen. Het activeren van meerdere talen brengt BlueBerry is meerwerk.



6. Menu items

Onder in de menubalk kan een extra zij-menu balk geactiveerd worden door te klikken op de button "MENU". Hierin zitten extra opties opties verwerkt die naar wens geactiveerd kunnen worden.

- Contact
Algemeen contactformulier waar een bezoeker een reactie kan achterlaten op basis van naam & e-mail adres. Reactie wordt per mail doorgezonden naar een specifiek e-mailadres dat we hiervoor kunnen instellen.

- Share optie
Net zoals in de onderste menubalk de mogelijkheid om de pagina die op dat moment gelezen wordt te delen via sociale media.

- Zoeken
Optie om op basis van een zoekwoord de actieve magazines in het systeem te doorzoeken. De gebruiker klikt vervolgens op het zoekresultaat dat grafisch wordt weergegeven om naar de betreffende pagina te gaan.

- Magazine doorsturen
Tell-a-friend optie waarbij een bezoeker de contactgegevens (naam & e-mailadres) van een vriend of vriendin invult. Deze vriend(in) ontvangt vervolgens een e-mail met hierin de vraag het magazine te bekijken. In de mail staat bovendien een directe link die naar het magazine leidt.

- Aanmelden
Mogelijkheid voor een bezoeker om zich aan te melden voor een magazine. Na aanmelding d.m.v. naam & e-mail ontvangt men een e-mail ter bevestiging. De gegevens van de bezoeker worden nu in het Magazine Editor-CMS opgeslagen. Deze contacten zijn vervolgens als Excel-bestand te downloaden. Het is ook mogelijk de aanmeldoptie door te linken naar een dergelijk formulier op de eigen website.

- Volledig scherm
Mogelijkheid om het magazine fullscreen op de desktop te bekijken.

- Print-optie
Bij het printen wordt het magazine omgezet naar een PDF-document die direct geschikt voor printen is. Let wel op dat de PDF een platte weergave van het magazine is, interactieve lagen, animaties en effecten worden hierin uiteraard niet meegenomen.

- Externe links
Het is mogelijk om binnen het menu twee externe links toe te voegen. De URL en titel van deze link kun je zelf bepalen.

- Extra teksten
Het is mogelijk binnen het menu twee tekstpagina’s te te voegen. Dit menu-item activeert een pop-up met hierin een titel en tekst. De inhoud van deze pop-up en de naam van het menu-item kun je zelf bepalen.



7. Google Analytics

Het magazinesysteem is standaard uitgerust met de mogelijk Google Analytics in te voegen. Dit online meetsysteem maakt het mogelijk om het leesgedrag van uw bezoeker tot in detail te volgen. Om Google Analytics te kunnen activeren dienen we een GA-code in te stellen. Deze GA-code is aan te vragen bij Google. In geval u nog niet in bezit bent van een Google account kunt u zich gratis registeren en een website aanmaken. Geef hiervoor het domein op van het magazine. Na het aanmelden volgt een unieke GA-code die BlueBerry aan het magazine koppelt. Lees hier meer over de koppeling met Google Analytics.



8. Overzichtspagina

Bij meerdere publicaties activeert BlueBerry de voorpagina (of "coverflow"). Op de voorpagina kan een bezoeker een keuze maken uit verschillende edities waar de nieuwste uitgave altijd vooraan komt te staan - op basis van het publicatiemoment dat in de Magazine Editor in te stellen is. Er kan worden gekozen tussen twee verschillende varianten interfaces :

1. Algemene coverflow
De laatste editie komt het grootste in beeld te staan. Daarnaast de covers klein in beeld weergegeven waar een bezoeker doorheen kan scrollen. Na een klik wordt het magazine geopend. Deze variant wordt met name gebruikt bij een groot aantal edities.

2. Horizontale coverflow
De horizontale coverflow wordt gebruikt als er wat minder publicaties in het systeem staan. Door de covers groot weer te geven ziet het scherm er wel beeldvullend uit.

Beide overzicht pagina’s zijn voorzien van een :

1. Groter formaat logo
2. Titel
3. Introductietekst

Deze introductietekst moet een kort verhaal vertellen over de publicaties die ernaast in beeld staan. Ook de achtergrond kan bij deze pagina worden ingesteld. Hiervoor maakt BlueBerry een voorstel op basis van je aangeleverde input.


9. Tekstuele wijzigingen

Binnen de interface zijn de teksten zo algemeen mogelijk geschreven. Het kan zijn dat je een tekst toch anders wilt formuleren. BlueBerry kan deze aanpassingen voor je doorvoeren. Bij interfaces die niet eerder ingezette talen dienen te bevatten, dienen deze te worden aangeleverd. BlueBerry heeft hiervoor een vertaaldocument voorbereid dat enkel dient te worden ingevuld in de taal naar keuze.