Vervolg: opmaken Joomla template van joomlaxtc. Plaatsen van html blokken.

In mijn vorige blogpost over dit thema heb ik aandacht gegeven aan de module blokken op de voorpagina van template “Motif” van http://www.joomlaxtc.com. Vandaag ga ik proberen om via het invoegen van html blokken formulieren te plaatsen binnen dit design. Ik gebruik daartoe de nieuwe website van een nieuw concept van dewebmeester.nl: Gratis test hosting via www.123web.be (ja ook in Belgie is dewebmeester.nl actief en daar heten we natuurlijk dewebmeester.be). Ik wil dat de bezoeker aan 123web.be makkelijk zichzelf kan aanmelden voor deze gratis hosting. Over het hoe en waarom van gratis hosting ga ik een extra blog post schrijven.

Doel: via html een formulier plaatsen binnen een Joomla template.

Uitwerking: dit blijkt prima te werken via artikelbeheer. Ik kies een artikel uit of maak een nieuw artikel aan en kies na het openen van het artikel in een editor voor “toggle editor” zodat de html code van het artikel getoond wordt. Vervolgens plak ik gewoon het hele html formulier (encrypted javascript formulier) binnen deze code en sla het artikel op. Het resultaat is heel erg goed. De css van de template wordt netjes overgenomen zodat het formulier automatisch past binnen de layout van de template. Het resultaat is te bekijken via: http://123web.be/index.php/gratis-hosting

Conclusie: het is niet altijd nodig om externe modules of componenten te installeren. Vaak kunnen wensen worden uitgewerkt door de code van de applicatie direct te plaatsen binnen dit design. Dit zal overigens niet het geval zijn voor elk Joomla design. Voor dit “bootstrapped” geoptimaliseerde design van Joomlaxtc geldt dit blijkbaar wel.

Visualisering van de structuur van het Open Source Content Management Systeem Joomla!. Gebruikt voor toelichting bij het artikel van joomla. Zelgemaakte afbeelding (Photo credit: Wikipedia)

Hier een afbeelding van een standaard opbouw van een Joomla website. In dit voorbeeld heb ik “inhoud” gebruikt om binnen “template” een formulier zichtbaar te maken op “website”. Dat kan ook via “Component” (formulieren component) of “Module” of “Mambot” (antieke term voor moderne term “Plugin”).

Aanvulling: formulier functionaliteit wordt uitgeschakeld door Joomla editor (JCE) en door Joomla 3.0; de oplossing

Excuses: het verhaal hierboven klinkt te makkelijk. Ja het klopt, het formulier werd mooi weergegeven volgens de css (style sheet) van het Joomla template. Maar dat betekent niet dat het formulier ook werkt. Zoals zo vaak bij invoegen van code (javascript of anders) via de editor (content, artikel of module), wordt de code gestript na klikken op “opslaan” en soms is dit niet zichtbaar (zoals in dit geval).

Oplossing: een oplossing is om een extra module te installeren die is ontworpen om deze code te behouden. Voorbeelden zijn te vinden via deze link:

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules

Ik gebruik voor mijn formulier de “Flexi Custom Code“, installeer de module en plaats het formulier script binnen deze module. Maar: ik wil dit formulier binnen een artikel tonen! Geen probleem. Daarvoor dient “Modules Anywhere” van “NoNumber” waarmee in “no time” elke module binnen elk willekeurig artikel geplaatst kan worden. Ik doe dat ook en het lijkt te werken. Kijk hier voor het formulier (waarmee gratis hosting van dewebmeester.nl besteld kan worden):

http://123web.be/index.php/gratis-hosting

Related articles

• PSD to joomla the most sought after among the clients (teacherlingo.com)
• Design Inspiration: A-T-O-M | Responsive Multipurpose Joomla Theme (designshack.net)
• Joomla Hosting Reviews Announces Redesigned Responsive Website (prweb.com)
• The New Joomla 2.5 to 3 Pre-update Check (ostraining.com)

Online uitpakken (unzip) op eigen server

Probleem (uitdaging): Ik wil een website installeren op een online server en de ontwerper stuurt een compleet .zip bestand. Prima. Ik kan dit gaan uitpakken, alle bestanden uploaden en verdere aanpassingen doen. Maar dit uploaden kan zo maar een half uur duren omdat een complete Joomla installatie inclusief design en extensies meer dan 10.000 files kunnen bevatten. Filezilla is daar we even mee bezig. Ik wil snel omdat ik bijvoorbeeld liever tien demonstratie websites installeer in plaats van een half uur te wachten op Filezilla.

Mogelijkheid 1: gebruik de uitpak functies van hosting account

Image via CrunchBase

Cpanel of andere admin panels van een hosting account hebben bijna altijd wel deze ingebouwde functie. De uitpak (unarchive) functie zit bij sommigen verstopt in de filemanager maar ik zie ook wel eens een aparte “Archive Gateway”. Dat werkt meestal wel redelijk. Maar vandaag niet.

Mogelijkheid 2: een php script
En de meest simpele en erg efficiente (binnen een halve minuut waren deze 10.000 bestanden netjes uitgepakt op de server en ik hoefde dus alleen het .zip bestand te uploaden) is: http://www.phoca.cz/phoca-server-unzip , de unzip tool van Phoca. Ik kende Phoca van Phocagallery voor Joomla en dat is een prima gallery tool. En deze unzip tool blijkt ook prima te werken. Nee, niet direct. De map (tool_phoca_server_unzip) met de paar bestandjes moeten worden geupload naar de server binnen de map waar ook het .zip bestand zich bevindt. Vervolgens surf ik met Firefox naar deze map (http://www.mijnwebsite.nl/mapmetzipbestand/tool_phoca_server_unzip/ ) en ik krijg een aantal errors. Waarom? Geen idee. Ik pas wat permissies aan via Filezilla en schoon de cache op van de browser, Ctrl F5 en de tool werkt. Hier kan ik de FTP laag inschakelen (en ondertussen zie ik dat de tool het .zip bestand al gevonden heeft) en dat doe ik niet. Ik schakel de laag uit via FTP laag = 0 en klik op “unzip”. Vervolgens wacht ik een twintigtal seconden en alle bestanden worden netjes uitgepakt.

Tjonge dat scheelt! Bedankt Phoca voor deze GRATIS tool.

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info

www.dewebmeester.nl

My profiles: Facebook LinkedIn Flickr Twitter

Template chooser, picker, selector binnen Joomla 2.5

Resultaat van deze dag is te bekijken op http://decmsmeester.nl/joomla2.5/

Nou, vandaag ben ik weer druk geweest met het oplossen van raadsels en na zo’n dag is het verstandig om bevindingen op te schrijven in een blogpost. Ik ben niet de enige met deze wens:
– Een Joomla website waarbinnen verschillende designs / templates zijn geinstalleerd en waarbij de bezoeker zelf kan kiezen tussen deze designs.
Na bladeren op Google lijken vele anderen met deze wens rond te lopen. Toch lijken weinigen hierin echt wat gerealiseerd te hebben.

Waarom?
Omdat ik websites verkoop en elke bezoeker aan mijn website(s) deze gelegenheid wil bieden. De toekomstige klant kan zo "live" en online een design bekijken en uitproberen.

Probleem?
Ja. Het lijkt makkelijk. Ik kan bijvoorbeeld een tien- twintigtal Joomla installaties plaatsen op de server en binnen elke installatie een nieuwe website plaatsen met elke een origineel design en layout. Maar: dat neemt serverruimte in beslag, dat neem database ruimte in beslag en boven alles: de bezoeker moet wel erg veel geduld hebben want elke keer als hij een ander design wil bekijken moet hij wachten totdat de hele website geladen is. Dat is traag. Te traag.

Oplossing?
Mogelijk. Na een dagje werken heb ik in ieder geval een paar antwoorden. De rest laat ik aan u over. Ik ben begonnen met de Joomla extensie "Template Selector" (deze link zou u direct naar deze extensie moeten leiden.) Het betreft een module en een plugin en beiden moeten geactiveerd worden. Als alleen de module gepubliceerd wordt en de plugin niet geactiveerd, dan wordt de template selecter wel zichtbaar (wel leuk, bezoeker ziet in ieder geval screenshots van de templates en dat biedt een miniatuur template gallery!) maar bij klikken op "switch", gebeurt er niets. Maar bij activeren van de plugin, zie je niet alleen de geinstalleerde templates maar is het dus ook mogelijk te "switchen". Het werkt. Ben ik nu klaar? Nee, nog lang niet.

Problemen en oplossingen
Ik wil dat de bezoeker kan kiezen uit tenminste 100 designs. Dan moet ik dus eerst 100 Joomla templates installeren. Dat is niet een probleem. Binnen de module Template Selector, klik ik aan welke van die 100 designs zichtbaar en verkiesbaar moeten worden. Ik kies ze allemaal. Vervolgens naar de frontend (voorpagina) en ik kies een willekeurig design. Daarbij zal ik direct ontdekken dat ik naast "Stijl" (css, style, kleuren, fonts) ook rekening moet houden met "Structuur" (layout, module posities). Het eerste (stijl) lijkt niet het probleem. Dat werkt prima. Maar bij kiezen voor een andere template, wordt de structuur door elkaar gegooid. Meest makkelijke oplossing: alleen templates installeren die allemaal de zelfde structuur hebben. Bijvoorbeeld: ik gebruik alleen templates van DiaBloDesign ; Die zijn allemaal volgens hetzelfde concept opgemaakt. Hetzelfde geldt voor een webbedrijfje als "Globbersthemes". Ook bedenk ik me dat het bekende software programma Artisteer altijd dezelfde structuur produceert en ik besluit daar wat mee te werken.

Ik probeer het met Artisteer versie 3.1 ; Nieuw design, exporteren als Joomla 1.7 design met standaard module posities (position-1, position-2….etc.), installeren als nieuwe template en binnen de module "Template Selector" aangeven dat ook dit design erbij hoort. Naar voorpagina, kiezen voor dit design en klikken op "switch" en……een totaal andere structuur……..; Natuurlijk, ik was tenslotte al begonnen met designs van DiaBloDesign en enkelen van Template Monster ("Architect" en "Traveller"). Die werkten redelijk. Artisteer templates lijken toch anders in elkaar te zitten.

Even een stapje terug: De eerste twee templates waren van Template Monster. Die switchen redelijk goed. Daarna installeer ik drie templates van DiaBloDesign en die tonen redelijk goed maar het topmenu ontbreekt. Vreemd. Nee, toch niet. Template Monster templates plaatsen main menu op positie "navigation" en die ontbreekt binnen DiaBloDesigns en ook binnen de Artisteer designs. Oplossing: main menu module kopieren en publiceren op positie "position-1". Dat werkt natuurlijk alleen als "position-1" op de juiste plaats aanwezig is binnen de nieuwe designs en niet aanwezig is binnen de al geinstalleerde templates. Dat is (vreemd genoeg) het geval. Indien "position-1" ook aanwezig is binnen de templates die ook "navigation" hebben, dan zou het resultaat zijn dat er twee main menu’s getoond worden. Dat kan eventueel opgelost worden door "Advance Module Manager" te installeren van "No Number" en daarin te kiezen dat deze extra main menu module niet getoond moet worden binnen bepaalde templates.

Dit verhaal wordt vervolgd want op dit moment heb ik "slechts" 8 templates naar tevredenheid geinstalleerd binnen de Template Selector en ik ga voor die 100. Nu maar hopen dat ik hierdoor klant krijg……..

Importeren van complete html website in weebly sitebuilder

Vandaag is weer eens een dag dat het onmogelijk waarheid lijkt te worden. Even zoeken op internet leert ons dat het niet mogelijk is een complete website te importeren in de gratis weebly.com sitebuilder. Dat zegt Weebly. Logisch. Stelt u eens voor: u koopt een mooi design (via www.dewebmeester.nl voor 19 Euro,éénmalig) en stopt dit in de gratis weebly sitebuilder en vervolgens maakt u fluitend uw website verder op……. Wat heeft Weebly daar aan? Niets. Het resultaat zou zijn dat hun servers overspannen zouden raken. Nou, beste Weebly, maak uw borst maar nat! (Vreemde uitdrukking overigens….). Het lukt me. Op het eerste gezicht heel veel makkelijker dan gedacht maar in tweede instantie toch nog wel een hele klus om dit goed te doen. Maar het bericht gaat de wereld in: via www.dewebmeester.nl kunt u voortaan uw bestaande website of design laten importeren in de online en zeer professionele websitebuilder van www.Weebly.com . Natuurlijk ga ik hier het proces beschrijven en ik wil iedereen vragen die dit leest en zelf gaat proberen om bevindingen te plaatsen in dit blog (heel makkelijk, gewoon een commentaar schrijven en na goedkeuring wordt uw bijdrage geplaatst; inclusief linken).

Voorbeelden

Ok, eerste het bewijs. Ik nam een willekeurige HTML pagina (zie foto hiernaast) en heb dit ontwerp aangepast zodat het past binnen weebly.com. Het resultaat is dan ook te zien op: http://dewebmeester.weebly.com Wat is nu bereikt: Gratis hosting. Ja, niet verkeerd natuurlijk alleen moet u er wel rekening mee houden dat er onderaan de pagina een kleine link verschijnt. —à Create a free website with Weebly
ß— Het laten verwijderen van deze link kost iets van 4 dollar per maand maar via www.dewebmeester.nl krijgt u hier al snel 50% korting op. (Let op: kijk goed onder aan de pagina van de hier getoonde voorbeelden en u zult zien dat de link ontbreekt.)

Vervolgens was mijn vraag of het mogelijk is een design inclusief javascript te importeren in Weebly. Ja, ook dat is me gelukt. Het voorbeeld is te zien op http://spidermanweb.weebly.com ; Uw vraag: ik heb een eigen domeinnaam en wil niet een domeinnaam met ‘weebly’ daarin, kan dat? Ja natuurlijk. De voorbeelden zijn alleen om te laten zien dat ik deze templates/ design werkelijk host onder www.weebly.com en dus onderdeel uitmaken van de weebly sitebuilder binnen mijn (gratis) weebly account.

Maar helaas: het lijkt nu wat makkelijk dan het is. Ik was iets te snel blij met het resultaat. Wat ik was vergeten was dat het design binnen de sitebuilder niet was aan te passen (al werd de website prachtig weergegeven) wat de sitebuilder dus nutteloos maakte. En dus ging ik op zoek naar de oplossing…….

Werkwijze om website te kunnen onderhouden binnen www.weebly.com

Nu wordt het spannend. Wat als eerste opvalt bij het openen van het design binnen de sitebuilder (vraag even om inlogcodes bij info@dewebmeester.nl om zelf dit alles te bekijken en te proberen )was dat er geen werkbare blokken waren binnen het design. Opnieuw: logisch. De aanpassingen kon ik doen via het schakelen tussen en standaard weebly design (die met die wolkenlucht bovenaan is prima) en mijn geïmporteerde design. Eerst naar het standaarddesign, (via tab ‘design’) en klikken op ‘edit HTML/CSS’ daar onder tab ‘HTML’ zie je de code voor het plaatsen van ‘editable blocks’ binnen de webpagina.

//// <div class=”body-content”>
    <div id=”content-main”>
             %%CONTENT%%
          </div>
     </div>////

Deze code kopieer ik, klik op ‘cancel’, schakel terug naar eigen design, opnieuw klikken op ‘edit HTML/CSS’ en ik plak de code binnen de content van de website waar ik content wil weergeven. Klikken op ‘save’ en we zijn weer terug bij ons design waar niets gebeurd lijkt te zijn. Geen nood. Ik schakel weer terug naar standaard design, klik op ‘elements’ en ‘drap and drop’ een element op de plaats waar ik de code voor het contentblok heb geplaatst. Als het goed is zie je nu dat het element blijft ‘plakken’. Nu weer terug schakelen naar eigen design en element aanpassen naar eigen wensen. Ik zal proberen zo snel mogelijk een instructie filmpje te plaatsen op www.youtube.com en ook binnen dit blog.

Samenwerking met dewebmeester.nl

Samenwerken met dewebmeester.nl? Deel 1.
Ja dat kan. Wat ons betreft: heel graag.

Waarom wil dewebmeester.nl samenwerken met anderen?
Dewebmeester.nl is een groep van gemotiveerde (jonge) mensen met als gezamelijke interesse: het leveren van, voor iedereen betaalbare, hoogst kwalitatieve websites en ondersteunende toepassingen. We zijn hier met elkaar dag en nacht mee bezig. We moeten actief op zoek blijven naar datgene dat echt mooi is en tegelijkertijd betaalbaar is. Dat betekent actief "kaf van koren scheiden". "Kaf" is een website van 1500 Euro als hij ook voor 250 Euro geleverd kan worden. "Kaf" is een website van 99 Euro die niet functioneert of er gebrekkig uitziet. De lat ligt hoog bij dewebmeester.nl ; dewebmeester.nl is een strenge meester. Resultaat: weinig marge en weinig ruimte om tijd te verliezen. Om zelf bezig te kunnen blijven met het zoeken naar en ontwikkelen van het beste van het beste, hebben we anderen nodig om klanten voor ons te vinden.

Wat hebben anderen eraan om samen te werken met dewebmeester.nl?
1) Elke samenwerkingspartner (klasgenoot) krijgt 10% van alle inkomsten van dewebmeester.nl ; Niet van de winst, maar van de inkomsten. Dat betekent ongeveer 50% van de winst. Het enige dat een klasgenoot hiervoor hoeft te doen is een klant aanbrengen. De nieuwe klant stuurt zijn wensen naar dewebmeester.nl met daarbij de naam van de klasgenoot die 10% gaat ontvangen, er wordt een offerte opgesteld, afspraken gemaakt, opdracht uitgevoerd en betaling ontvangen. De klasgenoot krijgt vervolgens 10% van de ontvangen betaling (10% van de factuur en de offerte). De klasgenoot hoefde tijdens dit proces niet meer te doen dan af te wachten. Om dit wachten te vergemakkelijken, wordt de klasgenoot tijdens het proces op de hoogte gehouden van de voortgang van het werkproces.
2) Elke klasgenoot krijgt gratis een complete website inclusief CMS die hij voor een groot gedeelte naar eigen wensen kan invullen.(*) De klasgenoot krijgt zelfs gratis begeleiding en advies om deze persoonlijke website de juiste uitstraling en invulling te kunnen geven. Een voorwaarde is dat de website gebruikt wordt om producten van dewebmeester.nl te presenteren. Dat is wel zo verstandig gezien de mogelijkheden die onder 1) zijn besproken.
3) Dewebmeester.nl zal zich er voor inzetten dat deze website vindbaar is via Google (en andere zoekmachines). Omdat de klasgenoot ook zijn eigen producten of diensten mag aanprijzen via deze website (voor zover niet in strijd met morele principes van dewebmeester.nl), is ook dit mooi meegenomen.
4) Dewebmeester.nl staat er voor open om ook tegemoet te komen aan andere wensen van klasgenoten (opzetten forum, blog, chatkanaal, visitekaartjes, folders, e.a.) voor zover dit helpt bij de samenwerking.
(*) Vraag naar de voorwaarden

Hoe wordt je een klasgenoot?
Stuur een mailtje naar info met daarin antwoorden op de volgende vragen:
1) Naam, adres, woonplaats, telefoon?
2) Motivatie?
3) Voorgestelde strategie (hoe denk je aan klanten te kunnen komen)?
4) Expliciete wensen?
5) Extra vragen?

www.dewebmeester.nl
www.spiderman-webdesign.nl
www.cheap-web.nl
www.cheap-web.com
www.dewebhulp.nl
en nog heel veel anderen.

Adobe Business Catalyst

Dit is nieuw: Ik ben aan het uitzoeken of dit een mogelijke optie voor de klanten van http://www.dewebmeester.nl zou kunnen zijn. Een complete CMS, inclusief webshop, klantbeheer en affiliate beheer. Maar: die zaken vinden we ook bij Joomla. Is er extra’s te halen. Ja, vanavond wel. Ik ben verbaasd.

– Adobe biedt een plugin voor dreamweaver. Een (goede) plugin voor Joomla voor Dreamweaver mis ik. Er bestaat een ‘joomla kit’ voor dreamweaver maar ik was daar niet tevreden over. Deze plugin van Adobe doet (tot nu toe) alles wat ik zou willen: downloaden van de site naar eigen (locale) server en WYSIWYG (what you see is what you get).

– Het aanpassen van de website is werkelijk een WYSIWYG gebeuren. Je kunt werkelijk direct vanaf het internet teksten en illustraties aanpassen zonder eerst naar een control panel te gaan (zoals bij Joomla).

– Snelheid is verbluffend. Internet in Kroatie is traag (zoals veel andere zaken). Maar mijn website bij adobe business catalyst ( http://spidermanwebdesign.businesscatalyst.com )  opent snel, is makkelijk te editen en aanpassingen worden snel opgeslagen.

Ik ga nog even verder met experimenteren en houd jullie op de hoogte via dit blog!

Groeten,

Meindert

http://www.cheap-web.nl

Publiceren van een blogpost vanuit (open?) Office (Word of Writer?)

Publiceren van een blog vanuit Word

Lange tijd wilde ik niet overgaan op “Open Office” vanwege de mogelijkheid binnen Microsoft Office (2007 en 2010) om direct vanaf het programma tekst te publiceren op een bepaald blog. Nu lijkt dit binnen ‘Open Office’ ook mogelijk te zijn. Dit is mijn eerste poging. Ik type gewoon een tekst binnen ‘Writer’, sla op met een bepaalde titel en klik vervolgens op de ganzenveer waarbij een groen pijltje staat……. Even proberen……

Nee helaas, dat lukt niet. Ik krijg de melding: mislukt, controleer de server configuratie….; Jammer.

Ook na controle van deze gegevens blijkt het niet te lukken…… Of wacht eens even? Als ik klik op de ganzenveer met de gele pijl, dan krijg ik een overzicht te zien van mijn gepubliceerde blogs. Daartussen blijkt ook deze blogpost te staan? Even nakijken…. Ja, zowel de eerste als de tweede poging zijn gepubliceerd. Maar wat als ik deze blog post wil aanpassen? Dan wordt hij dubbel gepubliceerd? Ja, wel als ik vanaf de computer alleen aanpassingen doe. Maar niet als ik eerst op de gele ganzenveer klik en vervolgens op de gepubliceerde post. Dan wordt die gedownload binnen writer en kan ik aanpassingen doen en uploaden.

Deze zin plaats ik als test onderaan: het is een extra zin die ik publiceer nadat ik de blogpost heb gepubliceerd en opnieuw heb gedownload (gele ganzenveer) binnen Writer van Open Office. Test……(groene ganzenveer).