vrijdag 25 juni 2010

Templateplazza.com; hoe te gebruiken

Prachtige designs en tegelijkertijd grote functionaliteit. Als webdesigner heb je mogelijk maanden nodig om dit voor elkaar te krijgen. Dit blog is voor klanten van www.dewebmeester.nl die gebruik maken van een design van www.templateplazza.com .

Installatie

Laten we aan onszelf over. Belangrijk: neem hosting via www.dewebmeester.nl dan weet je zeker dat alles werkt en dat je niet teveel betaalt. Aandachtspunt: bij installatie via 'quickstart' niet de voorbeelddata installeren. Die zijn al verwerkt in de quickstart.

Opmaak

De header

De header is in dit geval een 'banner'; Of eigenlijk: een serie banners die achter elkaar via 'slideshow' getoond worden. Je vindt ze dan ook via 'componenten'-à 'banners' ('advertenties') binnen de categorie 'TPFade'. Oftewel: alles wat binnen deze categorie banners (advertenties) geplaatst wordt, is zichtbaar binnen de header. Klik maar eens op 'banners' ('advertenties')en kies vervolgens één van de banners binnen de categorie 'TPFade' en je ziet de betreffende banner verschijnen. Helaas kun je de banner zelf hier niet aanpassen, dat moet je in een extern fotobewerkingsprogramma doen (adobe elements of 'the gimp'). Ook kun je een nieuwe banner plaatsen door binnen 'banners' rechtsboven te klikken op 'nieuwe' en zelf illustraties e.d. toe te voegen. Verwijderen van een banner kan éénvoudigweg door te klikken op het groene vinkje onder de kolom 'published'.

Het systeem waarbij bepaalde artikelen binnen een bepaalde catagerie op een bepaalde plaats binnen de website verschijnen, lijkt bijna 100% op het systeem van www.icetheme.com waarover ik een apart hoofdstuk heb geschreven binnen dit blog (kijk even rechts in overzicht artikelen)

De header 2

Noodzakelijke aanvulling: Binnen 'banners' is niet alleen de categorie van belang maar ook de klanten. Binnen header draaien banners uit catagorie 'TPFade' en van klanten 'Open source matters' ; Natuurlijk is dat aan te passen maar dit is het uitgangspunt. Verder is het niet altijd makkelijk om een foto van het juiste formaat te plaatsen. Je kunt wat aanprutsen in 'paint' of zo maar je kunt ook gewoon de afmetingen instellen na het klikken op de gewenste 'banner'. Maar ook dit geeft bijna nooit het gewenste resultaat. Verder van belang: illustraties (banners) moeten worden geupload naar de folder 'images/banners/' en vervolgens verschijnen ze binnen een uitklapmenu binnen de banner module.

Hoofdmenu

Gewoon Joomla werk: Ga naar 'mainmenu'; klik op menu-item dat je wilt aanpassen en verander al dan niet:

1) - waar menu-item heen moet wijzen ('wijzig type')

-2) - titel van menu-item

3) - illustratie die links van menu-item getoond wordt; Dit is wel extra in relatie tot de gewonen Joomla installatie.Binnen menu-item klik binnen rechterkolom op 'parameters systeem' en dan zie je een klein uitklapmenu met mogelijkheid een illustratie te kiezen. Deze illustraties bevinden zich in map 'images/stories' en als je aan andere illustratie wilt dan degene die geboden worden, dan moet je dus eerst een passende illustratie oploaden naar deze map. Wil je weten welke illustraties er al in de map zitten, dan ga je naar 'mediabeheer' en blader je daar doorheen.

Achtergrond

De achtergrond bij 'resto-plazza' is een illustratie. Een .jpg file met blokjes. Deze kun je vervangen of verwijderen. Aanpassen van de achtergrond doe je door via administrator panel naar 'template beheer' te gaan (onder 'extensies') en vervolgens te klikken op de template 'resto plazza'; In de rechterkolom zie je de achtergond illustratie die daar gebruikt wordt. Die kun je daar weghalen of aanpassen. Hieronder zie de gebruikte achtergrondkleur (#ccc als standaard) en die kleur kun je daar dus eventueel aanpassen.

Wordt vervolgd

zaterdag 22 mei 2010

Lightbox 2.04

Vandaag gewerkt met "Lightbox 2.04". Dit is een toepassing die is bedoeld om binnen een (HTML)webpagina op een professionele wijze foto's weer te geven. Vrij simpel:

  1. Download lightbox = een map met bestanden: images (bevatten de foto's), js, css en een HTML file als voorbeeld. ( zie: http://www.huddletogether.com/projects/lightbox2/ )

  2. Open de HTML file en volgt de instructies.


  3. Open 'beeld' en vervolgens 'paginabron' om achter de HTML site te kijken hoe actionscript moet worden geplaatst binnen HTML pagina van de eigen site.

    Dit betekent dat de volgende scripts binnen de "head" van de site geplaatst moeten worden:


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>


<script src="js/lightbox.js" type="text/javascript"></script>




  1. Plaats (upload) de js en css en images mappen in de map waarin de te bewerken website zich bevind.


  2. Kopieer de link(en) uit de voorbeeld HTML naar de pagina waar de foto's geplaatst moeten worden.

    Dit betekent dat de volgende linken geplakt moeten worden (binnen de HTML code) op de plaats waar de foto's vertoond moeten worden:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>




  1. Pas deze linken aan zodat ze verwijzen naar foto's die werkelijk in de "images" map bevinden van de te bewerken site.

  2. "insert" een thumb van de te bekijken foto's binnen de geplaatste linken op de plaats waar nu >image #1< staat of: bewerk deze tekst zodat ze logisch verwijzen naar de te vertonen foto.


Lightbox is een kadootje voor elke webmaster. Volg gewoon de algemene logica van het webbouwen (= zorg ervoor dat alle linken verwijzen naar hetgeen jij wilt laten zien) en je website krijgt direct een vrij professionele uitstraling. Vergeet niet om de illustraties uit de map 'images' zoals je die aantreft in de lightbox map te uploaden naar de images map van je website. In deze map zitten een paar iconen die worden weergegeven via de geuploadde scripts. Daar bevindt zich bijvoorbeeld het icoontje 'close' dat wordt weergegeven bij het openen van een illustratie is lightbox zodat de bezoeker weet waar te klikken om de illustratie weer te laten verdwijnen.

Voor meer info stuur mij even een mailtje,

Meindert A. Jorna

Spidermanwebdesign@gmail.com

Kijk ook eens op:

www.spiderman-webdesign.nl

of:

www.dewebmeester.nl

Joomla, oscommerce, magento of zencart? Vergelijk!

Mijn klanten lijken vaak voor het uiterlijk te gaan. Maar bij het starten van een webwinkel behoor je niet alleen naar het uiterlijk te kijken. Hieronder een handig schema. Maar klanten weten daar toch weinig raad mee. Mijn conclusie: Ga voor Joomla. Dan heb je een compleet CMS, kun je alle artikelen, pagina's, illustraties e.a. aanpassen (dus ook de zaken buiten de webwinkel), heb je een mooiere vormgeving dan oscommerce en meer ondersteuning van forums en leden dan bij Magento of Zen Cart. Maar hierbij een (niet compleet) overzicht. Ik hoop het binnenkort nog even aan te vullen.

Groeten, dewebmeester.nl

De belangrijkste systemen naast elkaar

  

Magento 

Oscommerce 

Zen Cart 

VirtueMart (Joomla)

Gratis licentie 

Ja 

Ja 

Ja 

Ja 

Onbeperkt aantal producten 

Ja 

Ja 

Ja 

Ja 

Ondersteund SSL 

Ja 

Ja 

Ja 

Ja 

Wijzigen Producten 

Ja 

Ja 

Ja 

Ja 

Wijzigen klanten 

Ja 

Ja 

Ja 

Ja

Admin kan Producten In Order aanpassen 

Ja 

Nee 

Plug-in 

Nee 

Spreadsheet Database Upload 

Ja 

Nee 

Plug-in 

Nee 

Product Attributen 

Ja 

Ja 

Ja 

Ja 

Meerdere Product Images 

Ja 

Nee 

Ja* 

Ja 

Coupons 

Ja 

Nee 

Ja 

Nee 

Afwijkende prijzen per klantgroep 

Ja 

Nee 

Ja 

Ja 

Grafisch Template Systeem

Ja 

Nee 

Ja 

Ja 

Live Verzendkosten berekenen 

Ja 

Ja 

Ja 

Ja 

Google Checkout Voorgeinstalleerd 

Ja 

Nee 

Nee 

Nee 

Paypal 

Ja 

Ja 

Ja 

Ja 

Paypal Pro 

Ja 

Nee 

Ja 

Nee 

Content Management Systeem vor extra Pagina's 

Ja 

Nee 

Ja 

Ja 

Aanpassen meta tags 

Ja

Ja 

Ja 

Nee 

SEO URLs 

Ja 

Ja 

Ja* 

 

Afrekenen op 1 pagina 

Ja 

Nee 

Optie 

Nee 

Meertaligheid 

Ja 

Ja 

Ja* 

Ja 

Meerdere valuta 

Ja 

Ja 

Ja 

Ja 

Multi-Store ondersteuning 

Ja 

Nee 

Optie 

Nee 

Web Hosting Requirements 

Semi Dedicated 

Shared Hosting 

Shared Hosting 

Shared Hosting


 

Hieronder informatie van een ander adviesbureau (ook handig):

Lees verder over de verschillende webwinkel systemen


Zen Cart webwinkel Zen Cart webwinkel...  Lees meer


Magento webwinkelHet lijkt erop dat er concurrentie aankomt voor de diverse populaire webshopscripts (osCommerce, Zen...  Lees meer


osCommerce webwinkelOnline winkel en e-commerce oplossing waarvan de ontwikkeling volgens de Open Source methode wordt...  Lees meer


Joomla!

VirtueMart webwinkelVirtueMart is een webwinkelcomponent van Joomla!. Naast de internetwinkel zelf kunnen binnen Joomla...  Lees meer

vrijdag 14 mei 2010

Flash als achtergrond website

Het wordt steeds gekker met ons. Eerst waren we blij dat we teksten aan elkaar konden versturen, toen kwamen de illustraties en vonden we het vervolgens leuk om illustraties als achtergrond te gebruiken. Toen ontdekten we bewegende beelden, flash en de volgende stap is dan: achtergronden in flash. Je ziet ze niet veel: websites met een bewegende (flash) achtergrond. De reden kan natuurlijk zijn dat dit te druk wordt maar volgens mij is de reden vooral dat het vrij moeilijk is om dit gedaan te krijgen. Hierbij een korte workshop:

Hier is wat HTML code:

<div id="bg">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="Snow" width="100%" height="575" align="top" id="Snow">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf"/><param name="menu" value="false" /><param name="scale" value="noscale" /><param name="salign" value="t" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><param name="QUALITY" value="low"> <embed src="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf" width="100%" height="575" align="top" menu="false" quality="low" scale="noscale" salign="t" wmode="transparent" bgcolor="#ffffff" name="Snow" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

In de CSS file:

#bg { margin-bottom:-575px; position:fixed; width:100%; top:0; left:0; }

Dit is het voorbeeld uit http://homedics.com/

Nu nog even aanpassen. Ik ga er mee bezig en houd jullie op de hoogte.

donderdag 29 april 2010

Icetheme: aanpassen templates

Icetheme.com biedt geweldige Joomla templates met veel professionele invoegtoepassingen. De uitleg en bijbehorende documentatie over hoe zo'n template naar eigen wensen op te maken, ontbreekt in grote mate. Vandaar dat ik zelf maar wat ga schrijven tijdens het opmaken van enkele templates voor een paar klanten. Het betreft op dit moment de klant www.wibo-forum.net en www.advice4all.info/icetheme ('Projekt DUGA' = www.kruispunten.net ).waarvoor ik de template "prestige" aan het opmaken ben. Verder ben ik de template it_veranda aan het opmaken voor http://hairsensations.accountsupport.com/your_style en daar bekijken we de mogelijke problemen bij het implementeren van 'Virtuemart'(webwinkel) binnen de tempates van icetheme.com. Over het algemeen kan ik zeggen dat ik tevreden ben over de layout al moet je bereid zijn om enkele 'bugs'te bestrijden voordat je begint met de aanpassing van de templates.

Een overzicht van zaken waar je tegenaan kunt lopen bij aanpassen van deze template:

Aanpassen van de illustraties binnen de ronddraaiende carousels.

Eerst het meeste opvallende: Er zijn meerdere caroussels. De bovenste blijkt 'IceSlideShow' te heten (belangrijk om te weten want dan kun je die tenminste terugvinden binnen 'modulebeheer'). Binnen modulebeheer vind ik deze carousel onder module nummer 27 en 28. De onderste (boven de footer) is de "IceCarousselModule"; Voor een compleet overzicht van de plaats van de verschillende modules zie hieronder.

Maar toch: de afbeeldingen binnen iceslider worden niet aangepast binnen de module. De module is zo opgezet dat hij artikelen uit een bepaalde categorie laadt. Standaard is dit de categorie 'iceslideshow'. Kortom: aanpassen van de afbeeldingen betekent aanpassen van de artikelen binnen artikelbeheer en specifieker: binnen de categorie 'iceslideshow'. Andere optie: binnen artikelbeheer zoeken naar 'photo' (de artikelen die binnen de carousel draaien hebben allemaal een naam met 'photo' erin).

Plaatsen, uploaden van illustraties in het algemeen.

Bij openen van een artikel lijkt de upload functie niet te werken. Tenminste, bij mij niet. Oplossing is natuurlijk om met eigen FTP programma foto's te uploaden. Er zijn meerdere mappen (onder images); Foto's voor artikelen zitten in de map 'icetheme' -à 'articles' maar als ik foto's wil veranderen zal ik ze moeten uploaden naar de map 'images/stories'; Allemaal niet logisch. Helaas.

Ontdekken van de posities van de verschillende modules.

Hieronder een overzicht van posities:


Aanpassen logo

Dit lijkt me het eerst noodzakelijke. Er zijn meerdere mogelijkheden. Als eerste de simpele: Ga naar modulemanager. Zoek "logo", klik om te bewerken, bewerk en sla op. Je kunt binnen de module zelfs met een simpel editprogramma werken (lijkt op word editor); Maar nee, het werkt niet allemaal. Ik klik op bestaande image en vervolgens hieronder op afbeelding bewerken. Er opent zich een nieuw venster waanrin ik kan kiezen tussen foto's die al zijn geupload. Maar als ik een nieuwe wil uploaden (bladeren --à upload) dan hapert dit. Ook hier blijk ik mijn nieuwe logo eerst met FTP te moeten uploaden naar de map 'images/stories'(o, hoe onlogisch deze map……). Of: ga naar 'toggle editor' helemaal onderaan binnen de module 'logo' en bewerk HTML. Maar ook dan moet je eerst handmatig (extern) uploaden via FTP.

Thumbnails binnen iceslideshow werken niet?

Info via Google: Probleem kan zijn dat er een bepaalde editor zou zijn ingeschakeld binnen 'algemene instellingen' van de Joomla installatie. Oplossing is dan om die uit te schakelen binnen de algemene instellingen en vervolgens de artikelen die draaien binnen de iceslideshow module te bewerken en op te slaan. Tot nu toe krijg ik de thumbnails binnen www.wibo-forum.nl/cms nog niet werkende terwijl de thumbnails binnen www.advice4all.info/icetheme wel werken. Maar eerlijk is eerlijk: bij de eerste heb ik een editor geactiveerd en bij de tweede niet. Uiteindelijk lijkt het probleem de server te zijn waarop de joomla installatie draait. Mogelijk een probleem met de PHP versie.

Aanpassen menu's

Dit is simpel. De template heeft standaard een aantal menu's geinstalleer.

- helemaal linksboven is 'topmenu'

- het horizontale menu onder de header is 'mainmenu'

- het rechtermenu is 'othermenu'

- helemaal beneden is 'footermenu'

Het is mogelijk om eerst de titels van deze menu's aan te passen en de weergave van deze titel aan of uit te zetten. Titel voor 'othermenu' staat bevoorbeeld 'aan' en dat is op zich een onlogische titel voor een website. Om die aan te passen ga je naar 'menubeheer', en klik je op 'othermenu' en pas je de gegevens aan naar je wensen. Dat kun je dus ook voor de andere menu's doen.

Inhoud van menu's is mogelijk nog belangrijker. Daarvoor klik je op het betreffende menu onder 'menu's. Bijvoorbeeld 'mainmenu' (als je daar de titel nog niet van hebt veranderd). Vervolgens zie je een lijst met alle daar onder hangende menu items. Je kunt simpelweg de titels van die menu items aanpassen door op het betreffende item te klikken.

Toevoegen menu item

Als je bijvoorbeeld op 'main menu' hebt geklikt onder 'menu's ', kun je een menu item toevoegen door rechtboven op teken 'toevoegen' te klikken. Vervolgens moet je aangeven waar dit menu item naartoe moet verwijzen (naar welk soort website onderdeel) en als je dan bijvoorbeeld voor 'artikel' kiest, kun je in de rechterkolom kiezen naar welk artikel dit menu item moet verwijzen. Kortom: je moet wel eerst een artikel hebben gemaakt binnen artikelbeheer voordat je dit kunt linken aan een menu item. Een menu item kan ook verwijzen naar een blog, een lijst met blog onderwerpen, een lijst met artikelen, een forum, gastenboek, e.a.

Werken met categorieën

Het goede van de icetheme.com templates vind ik het werken met categorieën en de plaats die de artikelen die bij een bepaalde categorie horen, automatisch toebedeeld krijgen. Bijvoorbeeld: plaats je een artikel binnen de categorie 'iceslidershow', dan verschijnen deze artikel vanzelf in de slider in de header. Indien je een artikel aanmaakt of aanpast binnen de categorie 'sample news' dan verschijnen de artikelen (en illustraties) binnen de blokken op het centrale gedeelte van een pagina.

IceCarousel

Onderaan de homepagina zie je een mooie lijst met foto's en enkele tekst daaronder. Dat is de icecarousel module. Het is vrij gemakkelijk die aan te passen. Je klikt op 'artikelbeheer', vervolgens kies je rechtsboven onder 'categorie' voor 'IceCarousel' en alle artikelen binnen deze slider worden getoond. Als je nu op bijvoorbeeld het eerste artikel klikt (Beauty) dan opent zich dit artikel inclusief mogelijkheid om artikel en bijbehorende fote te bewerken. Dit werkt volgens hetzelfde principe als onder IceSliderShow (de slider in de header); Pas je de foto aan, dan past automatisch te foto in de slider zich aan.

Embed video

Hoe eigen video materiaal te plaatsen op site? Ga naar modulebeheer. Klik op 'zoeken' en zoek naar 'video'; Vervolgens zie je een module en die heet 'embed video'. Klik daarop. Hier kun je alleen bepalen op welke plaats je video getoond wordt en welke titel daarbij wordt weergegeven. Hier kun je niet bepalen welke video er getoond zal worden. Dit laatste blijkt een ingewikkelde zaak. Slecht van icetheme.com Zoeken binnen hun forum levert ook al niets op. Degenen die vragen over 'embed video' hebben gesteld lijken geen antwoord te hebben ontvangen.

Oplossing ligt binnen het aanpassen van de HTML. Opnieuw een minpunt voor icetheme.com: een klant wil geen scripts aanpassen. Nu is dit niet al te moeilijk. Ga hiervoor opnieuw naar de module 'embed video' zoals hierboven beschreven en klik daarop. Onderaan de pagina zie je blok met "schakelen tekstverwerker". Klik hierop. Vervolgens wordt de HTML getoond die bepaalt welke video er getoond wordt. Om hier nu video's te te kunnen plaatsen, moet je jezelf eerst aanmelden bij een dienst als youtube.com of vimeo.com ; Vervolgens moet je een eigen video uploaden en de bijbehorende HTML plakken binnen de module 'embed video'.

Kijk: als het ons eenmaal gelukt is om via het aanpassen van de HTML video te plaatsen binnen ene website, dan zijn we verder ook niet meer gebonden aan de zogenoemde modules. Dan kunnen we op elke plaats binnen de website video plaatsen. Als we maar toegang hebben tot de HTML. Bijvoorbeeld: ga naar artikelbeheer (dus niet modulebeheer), klik op categorie 'IceCarousel' en open een artikel binnen deze categorie. Klik opnieuw onder artikel op 'schakelen tekstverwerker' en zo kom je in de HTML. Kies de eerste image verwijzing (bovenaan, tussen <p> en </p> en plaats daartussen de html uit bijvoorbeeld youtube. Vervolgens 'Save' en 'Voorbeeld' en je verkozen video wordt nu getoond in de Carousel. Zie bijvoorbeeld: www.kruispunten.net, onderin (opmaak wordt nog aan gewerkt). Dezelfde video staat ook links op de pagina onder 'Zomerkampen' binnen de module 'embed video .

Virtuemart / ecommerce invoegen

Dit levert niet veel problemen op (http://hairsensations.accountsupport.com/your_style/ ).


 

(wordt vervolgt)

Script: in en uitklappen van tekst binnen website

Het lijkt zo makkelijk als je alleen maar websites bekijkt en ze niet hoeft te maken: een link in de website en als je er op klikt, klapt er een stukje tekst open. Dat is makkelijk omdat de bezoeker niet een aparte webpagina hoeft te openen om de tekst te kunnen bekijken en omdat de bezochte pagina niet direct hele lappen tekst lijkt te bevatten. Eerlijk gezegd maak ik tegenwoordig amper meer een website zonder deze techniek te gebruiken. Voorbeelden: www.fransjorna.nl en www.beautysalonalaa.nl


Er zijn een viertal elementen nodig om dit te laten werken:


  1. Het script:

    <script type="text/javascript">
    function kadabra(zap) {
    if (document.getElementById) {
    var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
    }
    return false;
    } else {
    return true;
    }
    }
    </script>
    (te plaatsen in de head)


  2. Style script:

    <style type="text/css">
    #tekst {
    display: none;
    width: 250px;
    border: 1px solid black;
    background-color: #cccccc;
    padding: 5px;
    font-size: 12px;
    }
    </style> (ook plaatsen in de head)


  3. Tekst die open moet klappen (zelf schrijven) en die vervolgens plaatsen tussen:

    <p id="tekst">
    </p> (de verwijzing "tekst" kan natuurlijk aangepast worden en dan moet die vervolgens ook aangepast worden binnen het style script en de link hieronder.)


  4. Een link waarop geklikt moet worden om de tekst uit 3) zichtbaar en onzichtbaar te maken:

    <a href="#" onclick="return kadabra('tekst');"> Hier de link naar je tekst die zichtbaar is voor je bezoekers en waar ze op moeten klikken om de tekst uit 3) te kunnen zien.</a>


En illustraties / pictures / images / foto's? Dat werkt op dezelfde manier. Alleen onder 3) een verwijzing naar een image bestand plaatsen in plaats van tekst. Maar wat betreft images en foto's raad ik toch echt lightbox aan.

Groeten,

Meindert (dewebmeester.nl)

(wordt vervolgt)