Smakelijk eten zonder zout

Rolf · **Posted:** Mon Aug 08, 2011 8:48 am

Erna's ongezouten website, smakelijk eten zonder zout

Een website die mensen met een natriumbeperkt (zoutloos) dieet belangeloos voorziet van relevante informatie en recepten.

Het initiatief voor de website is in 2005 genomen door Erna, een goede vriendin van mij. Ze is helaas veel te jong overleden. Na haar overlijden heb ik de website opgepakt en natuurlijk als eerste voorzien van CMS Made Simple.

Ook al heb ik zelf geen dieet, het is toch erg leuk om de website bij te houden. Uit de reacties in het gastenboek lees je, dat je er iets goeds mee doet. Het moedigt je altijd weer aan om de website verder uit te breiden met nog meer informatie.
Maar ook door het spelen met iedere keer weer andere modules en technieken vergroot ik zelf ook weer mijn kennis van CMSMS en dat kan ik weer gebruiken hier op het CMSMS Forum en natuurlijk voor de werkzaamheden binnen het Dev-team.

Na bijna drie jaar Erna’s website in beheer te hebben, was het weer eens aan een vernieuwing toe. In het begin door mij gemaakte ontwerpkeuzes bleken niet meer optimaal te werken door alle uitbreidingen, de navigatiestructuur paste niet echt meer en voor nog meer uitbreidingen was eigenlijk ook geen functionele ruimte meer. Kort gezegd de hele website moest op de kop…

Samen met Anne-Mieke (Compufairy / Gepresenteerd.nl) had ik al eens een website gemaakt voor een goed doel (www.mijnlijfisteprive.nl). Anne-Mieke kende Erna's website natuurlijk ook al en toen ik aangaf dat ik de site wilde vernieuwen bood ze spontaan aan om mee te helpen.
Zie hier het resultaat:

>>> www.smakelijketenzonderzout.nl <<<

Bij het ontwerpen van de website hebben we een balans gezocht tussen het gebruik van moderne technieken en functionaliteit (de website heeft ook een grote groep oudere bezoekers). Bijvoorbeeld het overzicht van kookboeken had ook erg mooi in een JQuery fotoslider gekunt, maar het is op de huidige wijze veel gemakkelijker te doorzoeken. Een bewuste keuze dus voor een eenvoudige oplossing.

Gebruikte add-on modules
Gallery
Voor de 'Cycle' slider op de homepage met gebruik van custom velden voor de linkjes naar de bijbehorende pagina’s.

Content Toggle
Voor de vele JQuery expand/collapse tekstblokken.

CompanyDirectory
Ten behoeve van het overzicht met kookboeken, en voor de vijf productenpagina's.

LinkMgr
Voor het beheren van de zes groepen met interessante websites.

Products
Gebruikt voor de Natriumtabel, een database van enkele honderden producten met daarbij vermeld het natriumgehalte, en soms het gewicht en een afbeelding. Eerder gebruikte ik daar FormBrowser voor, maar dit is een behoorlijk zware module en heeft beperkte mogelijkheden. Heeft ook geen SEO vriendelijke url’s. Products was daarom hier een betere oplossing.
Detailpagina's met Fancybox popups. (JQueryTools)

Guestbook
Vanzelfsprekend voor het gastenboek van de website.

Smileys
Ten behoeve van het gastenboek.

SiteMapMadeSimple
Voor het maken van de sitemap.xml, die gedownload wordt door Google Webmasterhulpprogramma’s waardoor de toch wel grote website sneller geïndexeerd kan worden.

CGFeedMaker
Voor het maken van RSS feeds van de nieuwsartikelen vanuit de Nieuws module en de kookboeken uit CompanyDirectory en de natriumtabel vanuit de Products module.
Deze zijn aangemeld bij Google ter indexering van de pagina’s.

TweetMadeSimple
Ter ondersteuning van de Tweet buttons in de frontend en de backend.

FormBuilder
Contactformulier en wellicht toekomstige aanmeldformulier voor nieuwe recepten.

JQueryTools
Voor JQuery ondersteuning van diverse modules en de JQuery tabs op de homepage.
Maar ook voor de fancybox popups in de detailoverzichten van de natriumtabel.

Gebruikersgedefinieerde tags (UDT’s)
Naast maar liefst zeven HTML sjablonen voor de verschillende pagina opbouwen, heb ik gebruik gemaakt van drie zelfgemaakte UDT's.

count_products
Voor het tellen van het aantal producten en ingrediënten in de natriumtabel.

Code:

// Read entries in Products module
$items = cmsms()->GetSmarty()->get_template_vars('items');
$count = count($items);

// Passing the parameters to the template
$smarty = cmsms()->GetSmarty();
$smarty->assign('count', $count);

Ik heb deze UDT in een kale Products sjabloon in de pagina gezet en daarmee heb ik de parameter {$count} beschikbaar voor het aantal items in de database. <p>Er zijn {$count} producten in de database.</p>

Op de recepten pagina’s heb ik veelvuldig gebruik gemaakt van de Content Toggle. Hiermee kun je eenvoudig blokken tekst tonen en verbergen. Het maakt de pagina overzichtelijk voor de bezoeker, en zeer goed indexeerbaar voor de zoekmachines.
Tijdens het bouwen van de site liep ik hier tegen het probleem op. Namelijk wanneer je bij het zoeken naar een recept een pagina terug ging naar het overzicht, werd de Content Toggle weer gesloten. Een bezoeker moet dan iedere keer deze weer open klikken, wat niet erg gebruiksvriendelijk is.
Nu kun je in de “terugklik-url” een parameter meegeven die de juiste toggle weer opent, maar dit zou niet werken als de bezoeker de terug knop van de webbrowser gebruikt.
Ik heb daarom gekozen om een cookie te gebruiken en dit werkt prima.

setCookies

Code:

if (isset($params)) {

           $toggle_name= ($params['toggle']);
       
           if (isset($toggle_name)) {
               setcookie("toggle", $toggle_name, time()+3600, "/");
               unset($toggle_name);
               }
           }

Code:

{content block="open_toggle" assign="open_toggle" oneline="true" label="Open deze Toggle bij pagina terug"}
{setCookies toggle=$open_toggle}

In de editor van iedere receptpagina is nu een tekstveld waar ik de naam van de te openen Content Toggle op de parent pagina kan zetten.

readCookies

Code:

// Read cookie (if any)
if (isset($_COOKIE['toggle'])) {
        $open_toggle = ($_COOKIE["toggle"]);

        // Passing the parameters to the template
        $gCms = cmsms();
        $smarty = &$gCms->GetSmarty();
        $smarty->assign('open_toggle', $open_toggle);
        }

Op de overzicht pagina’s wordt de cookie gelezen en gekoppeld aan de string $open_toggle.
Met een beetje Smarty kun je dan kiezen welke toggle geopend moet worden.

Code:

{readCookies}

{if $open_toggle == "salades"}
{toggle_start title="Salades" width="440px" status="active"}
{else}
{toggle_start title="Salades" width="440px"}
{/if}
<!-- Inhoud -->
{toggle_close}

Domeinnaam
Toen ik in 2008 de website weer online heb gezet, had ik de domeinnaam http://www.ernas-ongezouten-website.nl geclaimd, want dit was de naam van Erna's website. Een hele voor de hand liggende keus dus.
Toch blijkt in de praktijk dat die naam niet echt gemakkelijk te onthouden is en ook niet direct de lading van de website dekt. Heb daarom op advies van Anne-Mieke gekozen voor een nieuwe domeinnaam: http://www.smakelijketenzonderzout.nl
Tip: Maak zelf ook deze afweging bij de keuze van een eigen domeinnaam...

SEO / Website optimalisatie
Op de website heb ik ook veel gebruikt gemaakt van de tips die ik ooit eens zelf hier in het forum heb gezet. Lees artikel>> Dat deze uitbreidingen erg functioneel zijn bleek al vrij snel…
Na zo’n twee weken nadat de website met een nieuwe url was aangemeld bij Google waren bijna alle pagina’s al geïndexeerd (nu 572/642 pagina's). Voor mij toch ook weer een teken dat met een goed technisch ontwerp in combinatie met CMS Made Simple een super SEO vriendelijke website te maken is…

W3c valid
W3c valid code is voor mij toch eigenlijk wel een vereiste voor een goede website... Het is m.i. een teken van serieus omgaan met de broncode.
Maar helaas lukt dit niet altijd. De Content Toggle blijkt een W3c-foutje te hebben. Maar ook het gebruik van CSS3 bij de jQuery snufjes leverde problemen op.
Ik heb in ieder geval alles dat in mijn macht lag aangepast

Afsluiting
Het was erg leuk om deze website te maken. Anne-Mieke heeft bij het maken van het ontwerp geen rekening gehouden met wat ik technisch kon maken... Nee, zo is het ontwerp en zo maak je het maar

Je wordt als techneut enorm uitgedaagd.

Anne-Mieke, bedankt voor dit mooie ontwerp voor Erna's website!!

Grtz. Rolf

M@rtijn · **Posted:** Mon Aug 08, 2011 11:44 am

Rolf (en Anne-Mieke),

Dit is hoe een showroom eruit hoort te zien!

Bij het lezen van de titel was ik nogal verbaasd, dan begin je met een enorm helder verhaal, aangevuld met de complete opzet van modules en custom scripts....

Als ik wil kan ik nu de site precies nabouwen en dat is hoe de showrooms gebruikt zouden moeten worden!

De website steekt ook perfect in elkaar, goede teksten, heldere structuur.
Het enige puntje van 'kritiek', als de doelgroep vooral uit ouderen bestaat, zou ik een website font size balkje toevoegen, zodat de bezoekers desgewenst de letters kunnen vergroten. CTRL + scroll werkt altijd, maar ik ga er niet vanuit dat mijn oma dat soort dingen weet

Jos · **Posted:** Mon Aug 08, 2011 12:56 pm

Zeer zeker een geslaagde site, proficiat Rolf en Anne-Mieke!
Ik vond het erg leuk om op deze manier een "kijkje achter de schermen" te krijgen. Bedankt daarvoor! Er zitten zeker tips in waar ik zelf ook weer wat mee kan.

Kleine tip van mijn kant: Je kunt je de moeite van een UDT besparen als het gaat om het uitlezen van een cookie. Dit zit al ingebouwd in Smarty via de tag {$smarty.cookies.naamvanjecookie}, zie http://www.smarty.net/docsv2/en/languag ... smarty.tpl

Rolf · **Posted:** Mon Aug 08, 2011 5:04 pm

Bedankt voor de reacties, M@rtijn en Jos

M@rtijn wrote:

Dit is hoe een showroom eruit hoort te zien!

Dank je, heb ook wel even mijn best gedaan. Goede voorbeeld geven, maar vond het ook gewoon even leuk

M@rtijn wrote:

Het enige puntje van 'kritiek', als de doelgroep vooral uit ouderen bestaat, zou ik een website font size balkje toevoegen, zodat de bezoekers desgewenst de letters kunnen vergroten. CTRL + scroll werkt altijd, maar ik ga er niet vanuit dat mijn oma dat soort dingen weet

Nou is het zeker niet zo dat de doelgroep vooral ouderen zijn, maar naar verwachting wel zo'n grote groep dat je er mee probeert rekening te houden... En dan is inderdaad de optie tot het wijzigen van de tekstgrootte een prima toevoeging. Goede tip!

Jos wrote:

Kleine tip van mijn kant: Je kunt je de moeite van een UDT besparen als het gaat om het uitlezen van een cookie. Dit zit al ingebouwd in Smarty via de tag...

Humm, blijf me verbazen over wat je zoal niet met Smarty kunt doen

Maar ja ik zat al in de code en ben daar blijven verder zoeken naar een oplossing. Volgende keer eerst even de Smarty Manual lezen dus

M@rtijn · **Posted:** Wed Aug 10, 2011 4:10 pm

Hmm, hoe ik aan dat woordje 'vooral' kom weet eigenlijk ook niet, daar had natuurlijk 'ook' moeten zijn.
Gezond eten is uiteraard voor elke leeftijd relevant. Sorry de generalisatie

Ik ga voortaan mensen die een -beknopte- showroom gemaakt hebben, verwijzen naar dit topic als voorbeeld, ik vind dit echt goed!

Jos · **Posted:** Wed Aug 10, 2011 10:36 pm

M@rtijn wrote:

Ik ga voortaan mensen die een -beknopte- showroom gemaakt hebben, verwijzen naar dit topic als voorbeeld, ik vind dit echt goed!

En misschien een leuk idee voor een volgende Dutch CMSms Workshop? Dat een aantal mensen presenteren hoe ze een site opgebouwd hebben

Rolf · **Posted:** Sun Oct 23, 2011 3:13 pm

Ook geschikt voor cmsms 1.10+

Code:

// Read entries in Products module
$gCms = cmsms();
//$items = $gCms->smarty->get_template_vars('items');
$items = cmsms()->GetSmarty()->get_template_vars('items');
$count = count($items);

// Passing the parameters to the template
$smarty = &$gCms->GetSmarty();
$smarty->assign('count', $count);

SanderBroek · **Posted:** Sat Nov 05, 2011 7:29 am

Wow, fraaie site en dito toelichting.

Voor SEO zou je Firefix plugin SenSeo kunnen gebruiken. Nestelt zich in het bekende Firebug schermpje.

Rolf · **Posted:** Fri Dec 02, 2011 4:19 pm

Bedankt Sander

SanderBroek wrote:

Voor SEO zou je Firefix plugin SenSeo kunnen gebruiken

Ik kan voor zowel Anne-Mieke als mijzelf praten, als ik zeg dat de websites gemaakt worden met VEEL SENSEO

Rolf · **Posted:** Sat Dec 10, 2011 12:03 pm

Ook dit jaar weer een Kersttheme op www.smakelijketenzonderzout.nl. Een paar kleine -tijdelijke- aanpassingen aan de lay-out om een beetje in de kerstsfeer te komen. Past natuurlijk helemaal bij het onderwerp van de website, lekker en gezond eten...

Of alle werkzaamheden aan de website nut hebben gehad? Nu zo'n half jaar later kan ik instemmend knikken...

Naast dat ik er veel plezier aan heb gehad en tevreden kan zijn over het resultaat, zie ik de bezoekersaantallen enorm oplopen!! Dit is toch een beeld dat iedere webmaster graag mag zien:

De bezoekersaantallen en pageviews zijn verdubbeld. Uit een korte analyse van de Google Analytics gegevens blijkt dat de website veel hoger is komen te staan in de zoekresultaten waarschijnlijk door mijn SEO tips (viewtopic.php?f=52&t=36913). Daarnaast blijven nieuwe bezoekers langer op de website, waarschijnlijk door de nieuwe professionele lay-out van Anne-Mieke (Gepresenteerd.nl).

grt. Rolf

Pedrosken · **Posted:** Sat Dec 10, 2011 1:19 pm

Knap werk, fris en functioneel design!
Ik ben aangenaam geïnspireerd

timdebuurman · **Posted:** Sat Feb 11, 2012 6:57 am

Zou je kort uit kunnen leggen hoe de product detailpagina als fancybox-pop-up gemaakt kan worden?

Rolf · **Posted:** Tue Feb 14, 2012 1:47 pm

@Pedrosken Bedankt!

@timdebuurman Ik ben op het moment niet in de gelegenheid om hier een T&T over te schrijven.
Dit is een handige website om eens te beginnen http://fancybox.net/

grtz. Rolf

Rolf · **Posted:** Sat Mar 10, 2012 9:18 am

timdebuurman wrote:

Zou je kort uit kunnen leggen hoe de product detailpagina als fancybox-pop-up gemaakt kan worden?

Ik kwam net deze post tegen viewtopic.php?f=8&t=57042
Dat scheelt mij weer

grt. Rolf

timdebuurman · **Posted:** Sat Mar 10, 2012 9:11 pm

thx..

gaat zeker een keer van pas komen.

Smakelijk eten zonder zout

Who is online