keyboard_arrow_up
Over deze website
De Club Vin Rouge is fictie
Deze website is een persoonlijk weblog (in de vorm van een online magazine) waarbij de De Club Vin Rouge dient als "aankleding".

De "Société de Club Vin Rouge" is speciaal voor deze website verzonnen en bestaat in werkelijkheid dus niet!

De Club Vin Rouge zoals op deze site voorgesteld heeft ook nog nooit bestaan. Er is geen sociëteit in de bossen bij Mierlo, je kunt er geen lid van worden en alles wat je op deze site vindt onder het kopje "De Club" is slechts de uitwerking van een fictief concept en dient als "kapstok" voor het persoonlijke weblog CVR Magazine.

Ontstaansgeschiedenis

De naam Club Vin Rouge is niet uit de lucht komen vallen en heeft natuurlijk wel een ontstaansgeschiedenis. In 1995 kwamen drie vrienden uit het Brabantse Mierlo enkele keren bij elkaar om onder het genot van één of meerdere flessen rode wijn aangevuld met oude kaas en gerookte vis tot diep in de nacht te filosoferen en discussiëren over de grote en kleine zaken in het leven. Op één van de avonden ontstond het idee om deze bijeenkomsten een naam te geven en niet veel later was de "Club Vin Rouge" geboren. Rond 2004 is de naam "Club Vin Rouge" weer van stal gehaald bij het opzetten van deze website waarin het concept van de traditionele Engelse gentlemens clubs werd uitgewerkt, met als doel een website te maken waarin informatie werd verschaft over diverse onderwerpen die de oorspronkelijke (3) leden van de club aanspraken. In de jaren die volgden is de website uitgebouwd tot de site die het nu is.

Het wapen

Het wapen van de Club Vin Rouge is afgeleid van het wapen van de Graaf de Bleuville. Dit wapen werd ontworpen door Syd Cain.
© Metro-Goldwyn-Meyer Studios inc, and Danjaq. LLC. All rights reserved
Syd Cain was de Production Designer van de James Bondfilm On Her Majesty's Secret Service uit 1969. In deze film wil Ernst Stavro Blofeld aantonen dat hij directe afstammeling is van familie De Bleuville en als voorschot hierop gebruikt hij al het familiewapen.
© Metro-Goldwyn-Meyer Studios inc, and Danjaq. LLC. All rights reserved
Het wapen van Blofeld is op een aantal punten aangepast om het te laten passen bij de Club Vin Rouge. Zo werd het schild vervangen door een blauw schild met daarop in goud het CVR logo. Het varken op de bergtop is verwijdert, net zoals het motto "Arae et foci". Dit motto betekent trouwens letterlijk als "(t)huis en haard".
Het wapen van Société de Club Vin Rouge

De ontwikkeling van de site door de jaren heen

  • December 2000

    De website van de Club Vin Rouge is ontstaan uit één enkele HTML pagina (zie hierboven). Deze pagina was bedoeld als een soort van "startpagina". Op deze pagina stonden een aantal links naar interessante websites, alsmede aanvullende informatie die nuttig was in het dagelijkse werk van degene die deze pagina gebruikte. Deze oerversie van de huidige website was puur voor eigen gebruik en heeft nooit "online" gestaan.
  • November 2004

    Nog voordat op 30 november 2004 de domeinnaam ClubVinRouge.nl werd vastgelegd bestond er al een oerversie van deze website. Deze website werd gehost bij UUNet BV en had als domeinnaam clubvinrouge.111.nl. UUNet BV is onstaan uit NLnet. Deze website werd geschreven in PHP met behulp van de freeware HTML editor PSPad. Helaas zijn van deze site geen screenshots meer beschikbaar.
  • Oktober 2005

    Wegens het gebrek aan functionaliteit werd de site verhuisd van UUNet naar Protagonist. Hierdoor kon naast PHP ook gebruik gemaakt worden van een MYSQL-database.
  • Augustus 2009

    In het begin zijn er geen printscreens gemaakt van de website. Dat is jammer, maar ook niet gedane zaken nemen geen keer. In 2009 kwam daar verandering in. De site had toen inmiddels structuur. Er waren al verschillende secties uitgewerkt die er nu nog steeds zijn zoals De Club, CVR Magazine en Leeszaal. Het ontwerp maakte gebruik van een nieuw fenomeen binnen CSS en dat was transparantie en de mogelijkheid om een achtergrond "op te blazen" tot de hoogte en breedte van de browser.
  • September 2009

    Een poging om de website een beetje de look en feel van een speelfilm te geven. Daarom werd de website in een letterbox weergegeven. Hiervoor werd een speciale header en footer gemaakt die niet zwart waren, maar in British Racing Green waren uitgevoerd.
  • Oktober 2009

    Na de zware tonen van British Racing Green werd het tijd voor een wat meer rustiger design. Hierbij werd ook de dubbele menubalk geïntroduceerd. Hiermee kon je direct door naar een specifieke subpagina. De handtekening onderaan de "brief" is natuurlijk van de voorzitter, maar in werkelijkheid is hij van de scrhrijver Henry James.
  • November 2009

    Het lichte design wordt verder doorgevoerd door het zoekscherm te integreren in de pagina in een aparte kolom. De menubalk krijgt een achtergrond waar het kasteel in panorama te zien is. Ook het logo is in lichte tinten op de menubalk aanwezig.
  • December 2009

    De kolom links van de hoofdpagina krijgt meer inhoud doordat de hoofdrubrieken van CRV Magazine hierin opgenomen worden.
  • Januari 2010

    De witte achtergrond wordt vervangen door een donker grijze achtergrond. Dit is om de site een meer exclusief karakter te geven. Het logo heeft nu goud-oranje kleur en lijkt op een stukje te staan dat uit de menubalk is "geknipt". De inspiratie hiervoor werd opgedaan bij de nieuwe huisstijl van de Nederlandse overheid.
  • Maart 2010

    De kolom aan de linkerkant is verdwenen en de items van deze kolom komen onderaan de pagina te staan. De zoekvelden komen in de menubalk.
  • Mei 2010

    De hoofdpagina krijgt een nieuw kader waardoor het lijkt alsof het tekst op een stuk papier is. De schaduweffecten worden bereikt met verschillende diktes van de randen aangezien CSS schaduw nog niet door de dan gangbare browsers ondersteund wordt.
  • Juni 2010

    Een fris nieuw design waarbij de hoofdpagina is geïnspireerd door de lay-out van "de" Linda.. De achtergrond en menubalk proberen het idee te geven dat er diepte zit en er wordt geëxperimenteerd met reflexie.
  • Juli 2010

    De achtergrond geeft met behulp van kleurverloop het idee van diepte en glans. Nieuw aan dit design zijn de labels rechtsboven waarmee een submenu geopend kan worden.
  • Augustus 2010

  • September 2010

  • November 2010

  • Januari 2011

  • Juni 2011

  • September 2011

  • December 2013

  • April 2014

  • Mei 2014

  • Juni 2014

  • Juli 2014

  • Augustus 2014

  • Februari 2015

    Eerste versie die gemaakt is met behulp van Polymer. Hiermee werd de site geschikt gemaakt voor mobiel gebruik vanuit het principe "Mobile first". Buiten de lay-out was het menu aan de linkerkant de belangrijkste wijziging. Wanneer bekeken op een klein schem (mobiele telefoon) blijft dit menu verborgen zodat er meer ruimte is voor content.
  • Augustus 2015

    Tweede versie van de site gemaakt met behulp van Polymer. Belangrijkste wijziging is de presentatie van de artikelen in CVR Magazine. Vanaf nu wordt het eerste artikel groot weergegeven om meer in het oog te springen en daarna wordt de kaart steeds kleiner.
  • September 2015

    Door het gebruik van Polymer was de website zwaar geworden, waardoor het laden van de pagina te veel tijd kostte. Daarnaast werden de voordelen van Polymer maar ten dele benut. De belangrijkste reden om Polymer in te zetten was de ondersteuning van Material Design. Dit is echter ook te realiseren met het veel lichtere MaterializeCSS. Vandaar dat de website opnieuw is opgebouwd met behulp van MateralizeCSS en Polymer is verwijdert.
  • Oktober 2015

    Een paar kleine aanpassingen in het ontwerp. Het menu rechtsboven is verdwenen omdat het ook al terug te vinden is het in het linker hoofdmenu. Verder zijn de kleuren iets beter op elkaar afgestemd en is het kasteel weer terug achter het logo, maar dan in grijstinten. De hoofdpagina van de Club is wel helemaal aangepast.
  • Januari 2016

    De hoofdpagina van CVR Magazine heeft drie tabbladen gekregen. Hiermee kun je kiezen voor de artikelen die het laatste gewijzigd zijn, de artikelen die het laatst zijn toegevoegd en de meest populaire artikelen.
  • Maart 2016

    De Leeszaal is een al jaren de plek waar RSS-feeds van verschillende interessante websites wordt samengebracht. Dit gebeurde op de achtergrond altijd met behulp van een 'eeuwenoude' php-programma MagpieRSS. Dit programma werkte bij sommige RSS-feeds niet goed. Vandaar dat we overgestapt zijn naar SimplePie. Dit programma gaf ook de mogelijkheid om de beginpagina aan te passen. Vanaf nu zie de berichten van verschillende RSS-feeds door elkaar gerangschikt van nieuw naar oud. De layout van de berichten is hierop aangepast. Bij de artikelen is de functie van de zwevende knop rechtsonder op de pagina aangepast. In het verleden kwam je via deze knop bij links naar aan het artikel gerelateerde video's, kon je het artikel delen op facebook, een willekeurig artikel openen en terug naar boven. Met de nieuwe knop kun je het artikel niet alleen delen via Facebook, maar ook via Twitter, Google Plus, Whatsapp, Pinterest en e-mail. De knop om de aan het artikel gerelateerde video's te openen is nu bovenaan het artikel geplaatst.Voor de pictogrammen wordt gebruik gemaakt van het Material Design Iconic Font.

    Ten slotte worden cards in artikelen met behulp van het JavaScript Mansonry netjes onder elkaar gezet, zonder te veel ruimte tussen de cards.
  • Augustus 2016

    Bij de artikelen in CVR Magazine zijn de volgende wijzigingen doorgevoerd:
    • De achtergrondafbeelding heeft een parallax effect gekregen en is wazig gemaakt, zodat het lijkt dat hij verder naar achteren ligt dan het artikel zelf.
    • De grijze achtergrond wordt links en rechts zichtbaar op een groot scherm voor een betere leeservaring.
    • De titel van het artikel staat op een donkere en doorzichtige achtergrond en wordt van het artikel gescheiden door een lijn in een accentkleur die per artikel verschillend is. Deze kleur wordt afgeleid van de achtergrondafbeelding.
    • De knop voor (aan het artikel gerelateerde) video's staat nu in het midden in voornoemde accentkleur.
    • De pictogrammen om het artikel te delen met anderen zijn verhuisd van de zwevende knop (rechtsonder) naar een balk onderaan het artikel. Deze balk is ook weer in voornoemde accentkleur.
    • De zwevende knop (rechtsonder) heeft alleen nog maar de functie om terug naar boven te scrollen
  • Mei 2017

    In de Mediatheek staan al jaren verwijzigingen naar televisieprogramma's die je via Uitzending Gemist kunt terugkijken. Er was daarnaast ook een sectie met een lijst met interessante films. Deze lijst is nu aangepakt en er is een nieuwe sectie met televisieseries toegevoegd. De series en films worden nu ook voorzien van een beoordeling en als zodanig gesorteerd. De afbeeldingen van series en films zijn (grotendeels) afkomstig van The Movie DB. In de sectie Radio kun je kiezen uit een geselecteerd aantal radiostations om te beluisteren.
  • Oktober 2017

    Het aantal films, series en documentaires in de Mediatheek is zo groot geworden dat er andere manier van sortering en filtering nodig was. Vandaar dat de layout van sectie films, series en documentaires geheel is vernieuwd. Je kunt nu de films filteren op waardering, acteur, regiseur of verzameling films (zoals bijvoorbeeld James Bond of Star Wars). Daarnaast kun je bij de films een overzicht krijgen van de films die vandaag en morgen op TV vertoond worden. Vervolgens krijg je de films te zien die aan de selectie voldoen. Deze films kun je vervolgens sorteren op alfabet, speelduur/afleveringen, datum van uitgifte en waardering. Wanneer je op een film klikt krijg je de details van deze film te zien zoals een trailer en een korte beschrijving. Onderaan staan links naar websites om meer informatie over de film te krijgen of om de film te streamen, downloaden, kopen etc.
  • November 2017

    Op de site krijgen de artikelen in CVR Magazine steeds meer de overhand. Daarom krijgt de site voornamelijk de titel 'CVR Magazine' in plaats van 'Société de Club Vin Rouge', wat eigenlijk ook alleen maar de fictieve "kapstok" is waaraan CVR Magazine is opgehangen.
    Om CVR Magazine meer te laten spreken is ook de startpagina aangepast. Werd in het verleden (zie januari 2016) het eerste artikel over de hele breedte getoond en vervolgens de andere artikelen in een (steeds) kleiner formaat, nu is het eerste artikel nog steeds wel groot, maar een slag kleiner zodat er in eerste instantie meer artikelen zichtbaar zijn. Om de artikelen netjes op elkaar te laten aansluiten wordt gebruik gemaakt van het javascript Mansonry. Daarnaast zijn de 'cards' voorzien van een bijpassende kleur, terwijl deze voorheen allemaal een witte achtergrond hadden.
    Om dit mogelijk te maken is het PHP-script dat deze pagina opbouwt geheel herschreven en doordat er door de jaren heen veel code overbodig is geworden is het script ook aanzienlijk ingekort.
  • Augustus 2018

    Google heeft Material Design 2.0 gepresenteerd. Wat hierbij opvalt is dat er steeds meer voor een witte en schonere lay-out wordt gekozen. Dit is ook op bij CVR Magazine doorgevoerd. Daarnaast is het logo van CVR Magazine prominenter op de pagina geplaatst om zo het merk meer zichtbaar te maken.
    In het motto van less-is-more wordt het menu ook op een desktop niet meer getoond, maar moet worden geactiveerd via het 'hamburgermenu'. Om bezoekers te helpen de rubrieken van CVR Magazine te vinden zijn deze terug onder het logo.
    Contactformulier
    Een andere lang gekoesterde wens was het aanpassen van het contactformulier. Om te voorkomen dat robots gingen spammen, werd tot nu toe gebruik gemaakt van SecureImage. Een eeuwenoude techniek die je een combinatie van raar geschreven letters en cijfers liet overschrijven. Dit systeem was soms lastig om te lezen, maar inmiddels ook te kraken. Vanaf nu hoef je alleen nog maar een vinkje te plaatsen om de Captcha (Completely Automated Public Turingtest to tell Computers and Humans Apart) uit te voeren. Dit werkt met reCAPTCHA van Google.
  • September 2018

    Als service voor de lezer wordt bij elk artikel aangegeven hoeveel tijd het ongeveer zal kosten om het artikel te lezen. Dit wordt berekend door het aantal woorden (str_word_count) in het artikel te delen door de leessnelheid van een gemiddelde lezer (250 woorden per minuut) en dan af te ronden naar beneden (floor) op hele minuten. In 2017 is de mediatheek stevig onder handen genomen waarbij de focus verschoof van televisieprogramma's naar films, series en documantaires. Daar zijn nu de kijktips aan toegevoegd. Wanneer je de Mediatheek opent dan krijg je vanaf nu alle films, documantaires en series te zien die vandaag op tv zijn of via Netflix te bekijken. Standaard krijg je alleen de items te zien waarvan CVR Magazine aangeeft dat je die echt gezien moet hebben (of een 'zeer goed' beoordeling hebben gekregen), maar dat kun je aanpassen met de filter rechtsboven. Ook de lay-out van de rubrieken onderaan de pagina zijn aangepast van een lijst naar zogenaamde chips.
  • December 2018

    De Mediatheek heeft de laatste tijd een aantal veranderingen doorgemaakt om te komen waar het nu is. Oorspronkelijk vooral bedoelt voor eigen gebruik is het nu omgebouwd tot een pagina die suggesties doet voor wat je vanavond zou kunnen gaan kijken, met elke keer als je de pagina opent een nieuwe uitgelichte tip. Ook kun je nog naar harte lust grasduinen door alle films, series en documantaires die door CVR Magazine beoordeeld zijn. Ook de webradio is bebleven, maar deze bevat nu rechtstreekse verwijzingen naar de website TuneIn.

Januari 2019

De eind januari doorgevoerde aanpassingen zijn voor normale bezoekers van de website niet zichtbaar, maar moeten het zoekmachines eenvoudiger maken om de website te indexeren.
Om dit mogelijk te maken worden alle artikelen nu voorzien van gestructureerde informatie over het artikel. Dit gebeurt door middel van JSON-LD. Om te controleren of er geen fouten in de data staan is de data gecontroleerd met de Tool voor gestructureerde gegevenstests van Google. Voor de structuur wordt gebruik gemaakt van de indeling zoals beschreven op Schema.org. Een voorbeeld:

 { "@context": "http://schema.org",
 "@type": "Article",
 "mainEntityOfPage": 
 { "@type": "WebSite",
 "url": "https://www.scvr.nl",
 "headline": "CVR Magazine",
 "image": 
 { "@type": "ImageObject",
 "url": "https://www.scvr.nl/icon-196x196.png"
 },
 "potentialAction": 
 { "@type": "SearchAction",
 "target": "https://www.scvr.nl/?q={search_term_string}",
 "query-input": "required name=search_term_string"
 }
 },
 "headline": "CVR Magazine - Visuele tocht door De ontdekking van de hemel",
 "image": "https://www.scvr.nl/images/cvrmagazine/0112.jpg",
 "author": 
 { "@type": "Organization",
 "name": "CVR Magazine"
 },
 "publisher": 
 { "@type": "Organization",
 "name": "CVR Magazine",
 "logo": 
 { "@type": "ImageObject",
 "url": "https://www.scvr.nl/icon-196x196.png"
 }
 },
 "wordcount": "8367",
 "url": "https://www.scvr.nl/?id=0112",
 "datePublished": "2019-01-27 20:28:56",
 "dateCreated": "2006-04-10 19:34:00",
 "dateModified": "2019-01-28 16:59:33",
 "description": "In 1992 kwam De ontdekking van de hemel uit..."
 }
 

Daarnaast beschikt de website nu ook over een sitemap. Ook deze pagina is bedoeld voor zoekmachines en geeft een overizcht van de webpagina's die op de website aangeboden worden.

Februari 2019

club verhuist
In het begin (zo ongeveer 15 jaar geleden) werden de artikelen van CVR Magazine vastgelegd in een XML-bestand op de website. Met de verhuizing van de site naar hostingpartij Protagonist zijn alle artikelen verhuisd naar een MySQL-server. Alleen de pagina's van de Club zelf bleven bijgehouden worden in een XML-bestand. Hier is nu een einde aan gekomen en ook de pagina's van de club (introductie, lid worden, de sociëteit, disclaimer, deze pagina etc.) zijn verhuisd naar de database.
De leeszaal
De opmaak van de nieuwspagina is aangepast.
De oude nieuwspagina
De nieuwe lay-out is geïnspireerd op de website Linda.nl en geeft afbeeldingen meer de ruimte:
De nieuwe layout van de nieuwspagina
Mediatheek
De mediatheek is uitgebreid met de categorieën boeken en (muziek)albums. Om het eenvoudiger te maken om te zoeken op bijvoorbeeld de schrijver van een boek zijn er nieuwe vierkante kaarten ontwikkeld. Deze vierkante vorm krijg je door de hoogte gelijk te stellen aan de breedte (die 100% van de kolom is). Dit wordt met CSS gerealiseerd door:
vierkant {
 width: 100%;
 background-size: cover;
}
vierkant:after {
 content: "";
 display: block;
 padding-bottom: 100%;
}
Verder zijn de teksten bij de items in de Mediatheek uit de kaarten gehaald en eronder geplaatst. Dit geeft een rustiger beeld.

Maart 2019

Kaarten
Het gebruik van de vierkante kaarten is uitgebreid naar alle categorieën zoals films, series en documentaires. Om ervoor te zorgen dat elk kaart voorzien is van een afbeelding wordt er een willekeurige afbeelding opgezocht wanneer er voor deze kaart geen specifieke afbeelding is aangewezen. Het opzoeken van een de willekeurige afbeelding gebeurt met een SQL statement wat er als volgt uit ziet:
SELECT afbeelding FROM tabel ORDER BY RAND() LIMIT 1
Door deze aanpak verdwijnt de oorspronkelijke openingspagina van de Mediatheek naar de achtergrond en daarom is de tip verhuisd naar de nieuwe startpagina van de de Mediatheek, tenminste voor de categorieën waarop het betrekking heeft (films, series en documantaires) Aangezien CVR Webradio een heel andere lay-out heeft dan de rest van de Mediatheek is de link naar deze pagina verhuist van de tab in de Mediatheek naar het hoofdmenu.
Kleuren
De gebruikte kleuren op de website waren tot nu toe gebaseerd op het kleurenpallet dat in 2014 door Google bij de introductie van Material Design werd gepresenteerd. Deze kleuren werden echter redelijk door elkaar gebruikt. Inmiddels is er een poging gedaan om de kleuren terug te brengen tot een beperkte set. Deze set is gebaseerd op de kleuren van Martini Racing.
Lancia Delta HF Integrale in de kleuren van Martini Racing (foto: Artes Max)
De gebruikte kleuren zijn:
:root {
 --rood: #b90000; // rgb(185,0,0)
 --wit: #fff; // rgb(255,255,255)
 --blauw: #005; // rgb(0,0,85)
 --lichtblauw: #00a0de; // rgb(0,160,222)
 --grijs: #424346; // rgb(67,67,70)
 --lichtgrijs: #D2D2DC; // rgb(210,210,220);
 --heellichtgrijs: #F0F0FA; // 240,240,250;
}

.rood {background-color: var(--rood) !important}
.wit {background-color: var(--wit) !important}
.blauw {background-color: var(--blauw) !important}
.lichtblauw {background-color: var(--lichtblauw) !important}
.grijs {background-color: var(--grijs) !important}
.lichtgrijs {background-color: var(--lichtgrijs) !important}
De kleuren hebben elk een andere functie. Zo wordt de kleur rood gebruikt om aandacht te trekken. Is de kleur blauw voor tekst die iets meer aandacht nodig heeft zoals bijvoorbeeld hyperlinks. De kleur lichtblauw wordt alleen gebruikt voor randen of lijnen. Het donkergrijs is gebaseerd op de kleur Rijks zwart grijs welke ook op de wanden van het Rijksmuseum wordt gebruikt. Dit donkergrijs op de website gebruikt als kleur voor gewone tekst en als achtergrond om afbeeldingen meer te laten spreken. Wit tenslotte is bedoeld voor de achtergrond of als kleur voor tekst met een donkere achtergrond. Het is mogelijk dat er afgeweken wordt van de voornoemde kleuren, maar dan wordt er wel geprobeerd om dicht in de buurt te blijven, bijvoorbeeld door te kiezen voor een lichtere variant door de kleur doorzichtig te maken. De achtergrond van onderstaande tekst is bijvoorbeeld een lichte vorm (#0052) van het originele blauw (#005f) waarbij de laatste positie van de verkorte hexdecimale kleurcode staat voor de transparantie.

Hexadecimale RGB kleurcodering

Kleuren op een beeldscherm worden opgebouwd uit de primaire kleuren rood, groen en blauw; vandaar ook de afkorting RGB. De hoeveelheid van een kleur ligt tussen 00 (niets van die kleur) en het hexadecimale (16-tallig) FF (alles van die kleur). De kleuren worden gemaakt met licht en vandaar dat geen enkele kleur (#000000) resulteert in zwart. Alle kleuren samen (#FFFFFF) is wit.
In het RGB-kleursysteem wordt de kleur uitgedrukt in zes cijfers. Hiermee kunnen 166 oftewel 16.777.216 kleuren gecodeerd worden. De eerste twee cijfers geven de hoeveelheid van de kleur rood aan: #FF0000 is zuiver rood. De tweede twee cijfers geven de hoeveelheid van de kleur groen aan: #00FF00 is zuiver groen. #0000FF is daarmee zuiver blauw.
Er is ook een verkorte notatie, waarbij per kleur maar één hexadecimaal teken gebruikt wordt: #FFF is zuiver wit, #F00 is rood, #0F0 is groen, #00F blauw etc.
Wanneer je de kleuren in decimale cijfers wilt weergeven dan is wit: rgb(255, 255, 255) en zwart: rgb(0, 0, 0).
Voorpagina CVR Magazine
Op de pagina van de Club werden de meest actuele artikelen in CVR Magazine getoond door middel van een zogenaamde slider.
Slider op de pagina van de club
Het was al lang een wens om deze slider ook te tonen op de openingspagina van CVR Magazine. Dit is nu gerealiseerd.
Slider op de openingspagina van CVR Magazine
De slider is gebaseerd op de slider die onderdeel uitmaakt van het Materializecss framework. Het geheel wordt gestuurd door middel van javascipt/jquery:
  1. De hoogte van het venster wordt bepaald en als deze groter is dan 500 pixels dan wordt de slider 90% van de hoogte van het venster.
    var hoogte = Math.max(500, $(window).height() * 0.9);
    Hierdoor zie je altijd dat er onderaan de slider nog andere artikelen getoond worden.
    Openingspagina op een mobiele telefoon
  2. De menubalk (nav) wordt gedeeltelijk doorzichtig gemaakt. Hiertoe wordt eerst de class "white" weggehaald en vervolgens de achtergrond voorzien van een vulling die lineair verloopt van wit (rgb(255,255,255)) naar wit met een transparantie van 50% (rgba(255,255,255,0.5)). Hierdoor zie je de slider door de menubalk heen.
    var Opa = 0.5;
    var rgbaOpa = 'linear-gradient(rgb(255,255,255), rgba(255,255,255,'+Opa+'))';
    $('nav').removeClass("white").css("background", rgbaOpa);
    
  3. Om te zorgen dat de menubalk weer ondoorzichtig wordt wanneer je voorbij de slider scrollt wordt de achtergrond bij het schrollen aangepast.
    $(window).scroll(function(){
     var rgbaOpa = Opa + ((1-Opa) * $(window).scrollTop() / (hoogte / 1.75));
     var rgbaCol = 'linear-gradient(rgba(255,255,255,1), rgba(255,255,255'+','+rgbaOpa+'))';
     $('nav').css('background', rgbaCol);
    });
    
De slider is te zien op alle tabbladen (Nieuw, Trending en Willekeurig). Alleen op het tabblad "Willekeurig" komen de artikelen, die getoond worden in de slider, niet als kaart onder de slider terug. Om te voorkomen dat er twee keer uitvraag wordt gedaan op de database wordt in PHP dezelfde lijst twee keer gebruikt:
$sql = "SELECT * FROM Tabel ORDER BY RAND() LIMIT 30";
$resultaat = mysqli_query($link, $sql);

$rijen = array();
while ($rij = mysqli_fetch_assoc($resultaat)) array_push($rijen, $rij);

$t = 0;
foreach ($rijen as $item) {
 if ($t++ > $limit) break;
 // Vul slide van slider
}

$t = 0;
foreach ($rijen as $item) {
 if ($t++ <= $limit) continue;
 // Geef kaart weer
}

Mei 2019

Vensterbrede afbeeldingen
Wanneer een artikel op de mobiele telefoon bekeken werd dan werden de afbeeldingen getoond met dezelfde marges als de tekst, maar marges zijn voor afbeeldingen niet nodig en hierdoor worden ze te klein afgebeeld.
Afbeelding met marges links en rechts
Om volledige breedte van het venster te kunnen gebruiken moest de padding van de element (div), waarin het artikel staat, aangepast worden. De padding is de marge binnen een element. Deze was tot nu toe 4% van de breedte van het element. Wanneer je echter (bijvoorbeeld) een afbeelding in een element breder wil maken dan de tekst, kun je niet met percentages werken omdat deze percentages verwijzen naar het element waarop ze betrekking hebben. Vandaar dat bij weergave op mobiele telefoons nu gekozen is voor een vaste padding van 1,5em (1,5 keer de grootte van de tekst) voor het element "Content". Hierdoor worden de marges van de afbeelding -1,5em. Vervolgens moet de breedte (width) van de afbeelding net zo breed gemaakt worden als het venster. Een breedte van 100% is niet voldoende omdat de afbeelding dan net zo breed worden als de tekst. Daarom moet de breedte door middel van een berekening bepaald worden. Dit doe je door de "calc" functie oftewel:
width: calc(100% + (2 * 1.5em));
Afbeelding over de volle breedte van het venster

Juni

Mediatheek
Wanneer je item (film, serie, documantaire of boek) opende in de mediatheek dan kreeg je een grijze pagina te zien met een trailer (indien beschikbaar), een afbeelding van de omslag/hoes en een korte beschrijving. Hier zijn een paar elementen aan toegevoegd. Om te beginnen is er een knop toegevoegd waarmee je direct de film of serie kunt starten wanneer deze beschikbaar is op Netflix of NPO Start.
.playbutton {
 display: inline-block;
 position: relative;
 border-radius: 50px;
 padding: 18px 24px 18px 3em;
 color: rgb(var(--wit));
 background-color: rgb(var(--lichtblauw));
 line-height: 1em;
 transition: all .1s ease-in;
}
.playbutton:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 10px -10px rgba(0,0,0,.7), 0 20px 30px -10px rgba(0,0,0,.5);
}
De achtergrond het middelste gedeelte van de omslag/hoes wordt achter de trailer getoond. Deze afbeelding vervaagt na 500px naar het grijs van de rest van de achtergrond.
De omslag/hoes is voorzien van een schaduw en een rand aan de linker- en bovenkant. Deze rand is 1 pixel groot en heeft de kleur wit en een doorzichtigheid van 10%.
 border-radius: 0.5em;
 border-top: 1px solid rgba(var(--wit),0.1);
 border-left: 1px solid rgba(var(--wit),0.1);
Ten slotte is het kader van de review aangepast. Deze viel een beetje uit de toon en is nu wat subtieler omdat dit kader bestaat uit een lichtblauwe rand en de kleur van de achtergrond overneemt.
 padding: 0.6em 1em;
 background-color: inherit !important;
 border: 1px solid rgba(var(--lichtblauw), 0.8);
 border-radius: 0.5em;

Juli 2019

Extra uitleg
Soms is er meer over een onderwerp te vertellen, maar is deze informatie niet noodzakelijk voor de strekking voor het artikel zelf. Deze informatie wordt dan vaak om de leesbaarheid te bevorderen weggelaten en dat is zonde. Vandaar dat er nieuwe optie is toegevoegd waardoor deze extra informatie zichtbaar gemaakt kan worden wanneer de lezer dat wil.
Tekst "statuten" met daarachter het pictogram dat aangeeft dat er extra informatie beschikbaar is.
Telkens wanneer je een icoon met een "i" zichtbaar wordt, dan kan meer informatie zichtbaar gemaakt worden door erop te klikken, zoals hieronder te zien is:
Extra informatie zichtbaar gemaakt.
Deze knop werkt met behulp van JavaScript en jQuery:
$('.vraag').on('click', function() {
 id = $(this).text();
 var e = document.getElementById(id);
 if(e.style.display == 'block') e.style.display = 'none';
 else e.style.display = 'block';
 });
Wanneer op een hyperlink met de class "vraag" wordt geklikt dan wordt gezocht naar een element dat een id heeft die overeenkomst met de tekst in de hyperlink. Vervolgens wordt gekeken of dit element zichtbaar is. Is dit niet het geval dan wordt deze zichtbaar gemaakt. Is het element wel zichtbaar dan wordt het weer onzichtbaar gemaakt.

Augustus 2019

De digitale assistent
Deze website is in de afgelopen jaren flink gegroeid. Het aantal artikelen in CVR Magazine groeit gestaag, de onderwerpen zijn divers en ook de andere secties (zoals bijvoorbeeld de mediatheek) groeien dagelijks. Daardoor werd het tijd om een bezoeker te helpen om zijn of haar weg te vinden op de site. Hiervoor is de digitale assistent bedacht.
De digitale assistent
Deze assistent kun je open met een knop die rechtsonder op elke pagina staat.
Knop waarmee je de digitale assistent kunt openen
Op deze plek stond voorheen een knop waarmee je naar boven kunt scrollen. Deze is er nog steeds, maar wordt nu pas zichtbaar wanneer je 1.500px naar beneden ben gescrollt. Dit wordt gedaan met javascript:
$(window).scroll(function () {
 if ($(this).scrollTop() > 1500) {$('.scroll-top').fadeIn() ;} 
 else {$('.scroll-top').fadeOut();}
});
Het idee was om iets soortgelijks te maken aan de Assistent van Google, maar dan zonder spraakherkenning en volgens een script.
De lay-out is gebaseerd op Whatsapp en bestaat uit tekstballonnen, waarbij de blauwe ballonnen van de assistent (css: ballon ik) zijn en de lichtgrijze ballonnen (css: ballon jij) geven de mogelijke antwoorden van de bezoeker weer. De CSS voor de ballonnen zijn als volgt:
.assistant .ballon {
 padding: 1em;
 margin: 0 0 0.5em 0;
 border-radius: 0.6em;
 background-color: rgb(var(--wit));
 color: rgb(var(--grijs));
 width: 90%;
 display: block;
 opacity: 0;
}

.assistant .ballon.ik {
 background-color: rgb(var(--lichtblauw));
 color: rgb(var(--wit));
 position: relative;
}

.assistant .ballon.ik:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-left: 0.8em solid transparent;
 border-right: 0.8em solid rgb(var(--lichtblauw));
 border-top: 0.8em solid rgb(var(--lichtblauw));
 border-bottom: 0.8em solid transparent;
 top: 0;
 left: -1.1em;
}

.assistant .ballon.jij {
 margin-left: auto;
 margin-right: 0;
 position: relative;
 background-color: rgb(var(--heellichtgrijs));
}

.assistant .ballon.jij:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-right: 0.8em solid transparent;
 border-left: 0.8em solid rgb(var(--heellichtgrijs));
 border-top: 0.8em solid rgb(var(--heellichtgrijs));
 border-bottom: 0.8em solid transparent;
 top: 0;
 right: -1.1em;
}
Om ervoor te zorgen dat een verzameling ballonnen pas zichtbaar worden wanneer dit nodig is wordt het volgende javascript gebruikt:
function ass_ballon(id, elem) {
 var page = $("html, body");
 page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
 page.stop();
 });
 if (elem) {
 var t = 0;
 var idP = $(elem).parents('.vervolg').attr('id');
 $('.vervolg').each(function(){ 
 if ($(this).attr('id') == idP) {t = 1;}
 if (t == 2) {$(this).css('display', 'none')};
 t = 2; 
 })
 }
 $(id).css('display', 'block');
 $(id + " .ballon").each(function(i){
 var el = $(this);
 el.css('opacity', 0);
 if (el.css('opacity') == 0) {
 setTimeout(function(){
 el.animate({opacity: 1}, {duration: 1800, queue: false});
 },i*2000);
 }
 page.animate({scrollTop: el.offset().top - 250}, 2200, 'easeOutQuad');
 });
 }
Dit script zoekt naar een DIV met de "id" die is opgegeven bij de functie. Als eerste wordt deze DIV zichtbaar gemaakt. Vervolgens wordt elke "ballon" binnen deze DIV zichtbaar gemaakt en scroll je naar deze ballon.
Contactformulier
Met de komst van de digitale assistent is ook het contactformulier aangepast, zodat deze naadloos op de assistent aansluit. Ook "weet" de assistent nu vanaf welk artikel je komt en vraagt daarom eerst of je wilt reageren op dat artikel of dat je iets anders wilt doen.
Het nieuwe contactformulier