• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: Imparo - Computer Thuishulp
PostPosted: Wed May 23, 2012 8:33 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 855
Location: Deventer, Netherlands
Vandaag online gegaan:

http://www.imparo.nl
Image

Een leuk project, waarbij ik de lay-out volledig heb afgestemd op het aangeleverde logo.

Uiteraard draait deze website op de laatste versie van CMSMS van dit moment: 1.10.3

Gebruikte modules:

AdvancedContent 0.9.3

Eigenlijk gebruik ik deze module alleen om bij het bewerken van een pagina, aan te kunnen geven of er een Terug-knop moet worden weergegeven.
Zo kan de editor dit per pagina zelf bepalen.
In het sjabloon heb ik dit toegevoegd in de body:
Code:
{content block="terugknop" label="Terugknop weergeven" assign="terugknop" block_type="checkbox"}

Om het een checkbox te laten zijn had ik dus de module nodig.

Verderop in het sjabloon staat dan:
Code:
{if $terugknop}
<div id="terugknop">{literal}<__script__ language=javascript>
document.write("<a href='"+document.referrer+"'><< Terug</a>")
</__script>{/literal}</div>
{/if}

Deze manier van coderen van een 'terug-knop' werkt prima in CMSMS. {if $terugknop} zorgt ervoor dat het pas word weergegeven als de checkbox aangevinkt staat.
Op dit moment is de terugknop alleen aanwezig op de pagina 'Eset' (http://www.imparo.nl/home/eset/)

Omdat de lijnen boven en onder het menu in de achtergrond afbeelding vd pagina zitten, wilde ik een andere achtergrond laden zodra de terugknop word weergegeven. De onderste lijn moest namelijk onderbroken worden op de plek vd knop.
Om dat voor elkaar te krijgen, heb ik in de stylesheet 2 mainwrappers gemaakt (deze hebben de achtergrondafbeelding), #mainwrapper en #mainwrapper2.
In het sjabloon deze code:
Code:
{if $terugknop}
<div id="mainwrapper2">
{else}
<div id="mainwrapper">
{/if}


FormBuilder 0.7.2

Het contactformulier op de pagina 'Contact' (http://www.imparo.nl/contact/) is hiermee gemaakt.

De stylesheet die standaard beschikbaar word zodra deze module gebruikt word, heb ik niet gebruikt. Ik m'n gewone stylesheet heb ik de styling toegevoegd:
Code:
.formbuilderform {
   width: 525px;
   margin-top: 50px;
   margin-left: 90px;
}

label {
   display: block;
   float: left;
   width: 160px;
}

input {
    background-image: url("[[root_url]]/images/stripe.png");
    background-repeat: repeat;
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    border-style: solid;
    border-width: 1px;
    height: 20px;
    margin-bottom: 5px;
    width: 150px;
}

.adres input {
   float: left;
   width: 119px;
   margin-right: 5px;
}

.huisnummer input {
   width: 24px;
}

textarea {
    background-image: url("[[root_url]]/images/stripe.png");
    background-repeat: repeat;
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    border-style: solid;
    border-width: 1px;
    height: 60px;
    width: 275px;
}

.submit {
   float: right;
   margin-right: 88px;
   margin-top: 5px;
}

.submit input {
    background-image: none;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: 26px;
    width: 100px;
}

.submit input:hover {
    background-color: #EEEEEE;
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    padding-top: 2px;
}

.red {
    color: #FF0000;
    font-size: 12px;
    font-weight: normal;
}

In de formbuiler had ik het adres en het huisnummer een class meegegeven, om de input daarvan apart te kunnen stylen.

TinyMCE 2.9.6

Bij iedere website die ik maak installeer ik direct TinyMCE en haal ik Microtiny weg. Waarschijnlijk ook een stuk gewenning, maar met TinyMCE vind ik het uploaden van afbeeldingen in de editor wel prettig en duidelijk.
Ook is het wel eens makkelijk om tables te kunnen gebruiken, zoals op de pagina 'Diensten' (http://www.imparo.nl/diensten/)
Ook het stylen van de rijen in deze table heb ik via de editor gedaan, maar ik kan me voorstellen dat dat voor een leek weer wat te ver gaat. (voor deze opdrachtgever heb ik alle inhoud voor de eerste keer geplaatst)

Products 2.17

Op de pagina 'Aanbiedingen' (http://www.imparo.nl/aanbiedingen/) en op de Home-pagina worden producten weergegeven dmv deze module.
Omdat er geen behoefte was aan samenvatting en details, word op beide pagina's alleen een samenvattingssjabloon gebruikt, voor iedere pagina een eigen sjabloon.
Door te klikken op de producten op de Home-pagina word alleen naar de pagina 'Aanbiedingen' gegaan, maar dit had net zo makkelijk een detailpagina vh product kunnen zijn.
De samenvattings sjabloon op de 'Aanbiedingen'-pagina is niet veel aangepast. Vooral is veel weggehaald. De prijsweergave is in een div geplaatst, om deze te voorzien van een achtergrond en om te kunnne positioneren.
samenvattinssjabloon pagina 'Aanbiedingen':
Code:
{foreach from=$items item=entry}
<div class="aanbiedingen">

<h2>{$entry->product_name}</h2>

<div class="prijs">{$currency_symbol}{$entry->price|number_format:'2':',':'.'}</div>
<a class="fancy" href="{$entry->file_location}/{$entry->fields.afbeelding->value}"><img src="{$entry->file_location}/{$entry->fields.afbeelding->value}" alt="{$entry->product_name}" title="klik voor een vergroting"/></a>
<div class="productbeschrijving">
{$entry->details}
</div>
   
  <div class="clearaanbieding"></div>
</div>
{/foreach}


Het samenvattingssjabloon op de Home-pagina is wat anders.
Ik wilde namelijk de producten als slider laten weergegeven.
Dit is gedaan dmv javascript/jquery.
In de pagina-sjabloon staat een aanroep naar jquery en nar de plugin cycle all. Deze is hier te vinden: http://jquery.malsup.com/cycle/.
Als aanroep is dit geplaatst:
Code:
$(document).ready(function() {
    $('.slider').cycle({
          fx: 'fade',   
          timeout: 5000,
          pause: 1
      });
});

Dus alles wat binnen de class 'slider' zit, zal deel uitmaken van deze slider.

Vervolgens is dit de samenvattingssjabloon van de producten op de Home-pagina:
Code:
<ul class="slider">
{foreach from=$items item=entry}
<li style="width: 288px; min-height: 270px;">
<a href="{cms_selflink href='aanbiedingen' }">


<h3>{$entry->product_name}</h3>
<div class="prijs">
{$currency_symbol}{$entry->price|number_format:'2':',':'.'}
</div>
<div class="imagefield">
<img src="{$entry->file_location}/{$entry->fields.afbeelding->value}" alt="{$entry->fields.afbeelding->thumbnail}" />
</div>     
<p>{$entry->fields.samenvatting->value}<br /><br /></p>
<div class="meerinfo">meer info &gt;&gt;</div>


</a>
</li>
{/foreach}
</ul>

De number_format zorgt er trouwens voor dat de duizendtallen met een punt worden gedaan en een komma voor de centen.

Er zijn nog meer modules, maar dat zijn de standaard modules, of met afhankelijkheden.

Verder is er nog meer jquery gebruikt in de website, zoals het meebewegende streepje in het menu (soort lava-lamp effect, maar dan met enkel de 'easing' en 'animate' functies van jquery.
Uitleg hierover is hier te vinden:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

De bewegende letter in het logo (de A gaat draaien) bij muisover is gedaan met de jani-plugin voor jquery. Ik heb volledig gebruik gemaakt van de uitleg die hier te vinden is:
http://www.ajaxblender.com/jani.html

_________________
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Imparo - Computer Thuishulp
PostPosted: Thu May 24, 2012 4:52 am 
Offline
Power Poster
Power Poster

Joined: Tue Jan 27, 2009 11:47 am
Posts: 837
Location: Belgium - Flemish
Tim,

mooie, duidelijke site.
Leuke review ook, dank daarvoor.

Wat ik zou anders doen:
Ik vind de background A teveel aanwezig, deze neemt vb bij uw aanbiedingen een deel van uw aflijningen weg.
Ik persoonlijk zou de A faden naar de content toe, zodat de aandacht meer gaat naar de content dan naar de mega rood oranje A.

Als ik klik op de afbeelding van de aanbiedingen, moet ik het kruisje klikken om te urg dicht te krijgen. Ik neem aan dat deze image via fancybox verkregen wordt. Normaal kan je toch gewoon naast de foto klikken om te sluiten ?

Sommige pagina's lijken nogal leeg tov. de home (vb tarieven, referenties), misschien moet je daar ook opteren om de producten te promoten of ook de footer logo's er in op te nemen.

De footerlogo's zou ik persoonlijk meer zwart/wit maken en bij mouse-over kleuren. ik zou ook zorgen om er effectief een link aan te hangen naar deze sites, zal ook de SEO ten goede komen.

In ieder geval mooi werk Tim.

Mvg,
Peter


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Imparo - Computer Thuishulp
PostPosted: Thu May 24, 2012 5:25 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 855
Location: Deventer, Netherlands
Bedankt voor je reactie Peter,

Een aantal van je genoemde punten zijn inderdaad aan de orde geweest.

De grote A als bg zal ik eens proberen hoe het stat om deze wat meer weg te faden..misschien zelfs beter om deze in het geheel wat te vervagen, zodat het strak blijft.

Inderdaad word bij de producten de fancybox gebruikt om de vergroting weer te geven.
Ik heb eigenlijk geen idee of deze normaal ook zou moeten/kunnen sluiten als ernaast geklikt word.

Wat betreft sommige wat lege pagina's...de opdrachtgever had gisteren opeens erg veel haast om de website online te krijgen, ondanks dat deze nog niet helemaal af was..
Uiteraard had i km liever eerst helemaal mooi af gehad, maarja..zijn oude website stond er nog op met verouderde info enzo..dus toch maar gekozen om m vast erop te zetten en de laatste dingen achteraf te doen.

De footerlogo's was inderdaad ook mijn idee om deze van zwart-wit naar kleur te laten faden bij muisover. De opdrachtgever vond dat ze uiteindelijk beter in kleur moesten.
Als onderdeel van alles nog helemaal af moeten moeten maken, hoort er ook bij dat ieder logo naar een pagina op de website gaat, met extra info/uitleg.

gr Tim

_________________
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting