Posts from the ‘dewebmeester.nl’ Category

websiteoverleg.nl voor overleg over uw website project

Beste klanten van dewebmeester.nl (Spiderman Webdesign Wageningen),

Deze email krijgt u omdat u de afgelopen twee jaar een bestelling heeft geplaatst bij dewebmeester.nl ; Om uw website project te laten slagen, is dewebmeester.nl begonnen met een apart forum waar klanten ook met elkaar kunnen overleggen: www.websiteoverleg.nl – Registeren is gratis, het plaatsen van een link of bedrijfsinformatie is ook gratis, het plaatsen van illustraties of linken naar video’s is ook gratis. Het is echter niet de bedoeling dat dit een marktplaats van aanbiedingen wordt, maar vooral forum (een soort Facebook) waar klanten als eerste in overleg kunnen met dewebmeester.nl en daarnaast ook met elkaar kunnen overleggen.

Teamoverleg
Het is aan te raden om vanuit elk bedrijf meerdere verantwoordelijken een eigen profiel te laten maken op www.websiteoverleg.nl zodat hier team overleg gaat plaatsvinden. Websiteoverleg.nl biedt dan ook de mogelijkheid om ook zelf een groep aan te maken of om Events te plaatsen en anderen daavoor uit te nodigen.

Planning
Er wordt gewerkt aan de verdere ontwikkeling van dit systeem waardoor het ook mogelijk zal zijn om te chatten onderling en om bijvoorbeeld een webcam overleg te voeren. Registratie en het aanmaken van een profiel is tot nu toe gratis maar dat kan ik niet garanderen voor de toekomst.

Hartelijke groeten,
Meindert A. Jorna

photo Dewebmeester NL
Meindert A. jorna (Msc.)

T./Fax 0031 317 795149 M. 0031 6 412 86716 info Spiderman Webdesign Wageningen Wageningen http://www.dewebmeester.nl
http://www.decmsmeester.nl
http://www.cheap-web.nl

Facebook Twitter LinkedIn

WordPress Blog Posts My latest post:Lightbox, onmogelijk in Chrome. Firefox en IE in orde. Read more | My blog Share on FacebookShare on Twitter

Get this email app!

Follow teststamp on Twitter
Find me on Facebook

Popup in Shopify

Dit heeft me veel tijd gekost. Ook Google leek het niet echt te weten. Maar zolang er anderen zijn die wat betreft een bepaald onderwerp op internet hun antwoorden zoeken, is het mogelijk om gebruik te maken van alle stukjes antwoorden om zo toch tot een oplossing te komen. Net een puzzel. Ik houd het even kort want het is te laat geworden.

Doel, probleem, wat er bereikt moet worden:
De klant heeft een Shopify website. Nu wil de klant dat als iemand een menu item aanklikt er een popup venster geopend wordt met een vraag en dat de bezoeker pas verder kan na beantwoorden van de vraag.

Oplossing
De oplossing heet Facebox. Te vinden via http://defunkt.io/facebox/ Ook is daar een summiere uitleg te vinden. Nu lijkt het makkelijk maar dat is het niet als dit in Shopify geintegreerd moet worden. Stappenplan:
– De javascript files en de css file (facebox.css) uploaden via de "add asset" optie in Shopify
– binnen theme.liquid de verwijzing naar deze files plaatsen waarbij als eerste jquery.js geladen moet worden en dan pas facebox.js; Ziet er zo uit:

{{ 'jquery.js' | asset_url | script_tag }} <script> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) </script> {{ 'facebox.js' | asset_url | script_tag }}

Het stukje script

jQuery(document).ready(function($) { $(‘a[rel*=facebox]’).facebox() })

is er tussengevoegd om het mogelijk te maken om via een makkelijke verwijzing: rel="facebox" elke link te laten openen in een lightbox popup.
– Ik maak een pagina binnen Shopify aan met daarin de informatie of html die ik wil tonen binnen de popup.
– Nu nog opzoeken in theme.liquid waar ik die rel="facebox" ga plaatsen. Ik vervang:

<a href="{{ link.url }}" >{{ link.title | escape }}</a>

door:

<a href="#info" rel="facebox">{{ link.title | escape }}</a>

en daaronder plaats ik:

<div style="display:none;" id="info">{{ pages.verification.content }}</div>

Kortom: er is nu geen menulink meer die linkt naar een andere pagina, maar wel een menu titel en bij klikken op dit titel, opent zich een facebox popup met daarin de html die ik heb geplaatst in de pagina Verification. Nu wil ik dat de bezoeker wel naar de pagina kan die eigenlijk achter de menulink schuil gaat en dat doe ik door:
– voordat ik de rel="facebox" plaats, laad ik de pagina in Firefox en kopieer ik de html van het menu en die html plaats ik binnen de html van de pagina Verification. Vervolgens activeer ik rel="facebox", bij klikken op een menuitem wordt standaard de pagina Verification geopend in een mooie popup en daar kan de bezoeker na het doorlopen van vragen en informatie nog een keer overwegen om op de menulink te klikken en wordt vervolgens netjes doorverwezen naar de gewenste inhoud.

Groeten!


			

Importeren, exporteren, vanuit phpmyadmin database naar Shopify

Dat is vandaag de opdracht: het overzetten van enkele honderden producten naar een nieuwe Shopify webwinkel. Dat wil ik niet handmatig doen. Shopify biedt een optie om producten te importeren vanuit een CSV (Comma Separated Value) en phpmyadmin biedt een mogelijkheid om de database te exporteren in CSV formaat. Dat lijkt dus makkelijk.

Exporteren

Dat betekent het uitzoeken van de juiste database, inloggen bij phpmyadmin, database selecteren, table selecteren (ik kies voor tabel "products"), CSV formaat kiezen en kiezen voor – opslaan op file – en GO. File wordt aangemaakt en ik sla die op op de computer. Makkelijk.

Openen in editor

Standaards doe je zo iets met Microsoft Excel. Ja, ziet er goed uit. Maar is goed ook goed genoeg? Nee. Eerst moet ik ontdekken hoe de te importeren CSV file er uit zou moeten zien. Shopify biedt een voorbeeld CSV. Downloaden en ook openen met Excel om de twee sheets te kunnen vergelijken. De structuur is anders en niet makkelijk handmatig aan te passen. Wat nu? Hier biedt Open Office de uitkomst. Ik open beide sheets in Open Office (Calculator) en voordat het bestand zich opent, krijg ik een extra popup venster waarin ik kan kiezen voor verschillende opties. Daaronder ook een preview van hoe de tabel er uit komt te zien bij de verschillende opties. Voorlopig ben ik gered. Ik kies er voor de beiden sheets op zo’n wijze te openen dat ze dezelfde structuur hebben en ook nog eens makkelijk bewerkbaar zijn. Dat betekent dat de verschillende waarden nu in verschillende kolommen worden weergegeven.

Aanpassen in de editor

Nu kopieer ik eerst de Headers van de originele Shopify sheet naar een lege Open Office database sheet (de eerste rij). Vervolgens kopieer ik handmatig de inhoud van de kolommen uit de phpnmyadmin database onder de bijpassende heads / titels. Zo vul ik mijn lege sheet. Vervolgens importeer ik via Shopify. Ja, dat doe ik vrij snel omdat Shopify niets anders doet dan controleren (mijn website wordt niet aangepast). Shopify geeft aan wat er fout is met mijn csv file en dat pas ik aan in mijn nieuwe csv file. Dit blijf ik herhalen totdat Shopify geen foutmeldingen meer geeft. Vervolgens toont Shopify hoe een product wordt weergegeven als ik doorga met het import proces. Als dat goed lijkt, ga ik importeren en geeft Shopify aan of dit gelukt is.

Importeren van afbeeldingen

Helaas dat is me niet gelulkt (tot nu toe). Want daartoe moet ik de link naar de originele image folder weten (en die heeft de klant niet gegeven en de website draait een php script die de afbeeldingsfolder verstopt). Dat was overigens ook een foutmeldingtijdens het import proces: ik had de image namen weergegeven maar Shopify wil de complete URL hebben van elke image om vervolgens de images te kunnen downloaden. Oplossing: gewoon alle verwijzingen naar images uit de database sheet halen en daarna importeren.104 producten geimporteerd. Nog even zonder afbeelding.

Geld verdienen met adverteren (AdSense van Google)

Vanaf vandaag ga ik geld verdienen. Nu deed ik dat natuurlijk al maar gek genoeg heb ik als webbeheerder nog nooit gebruik gemaakt van AdSense. AdSense is de tegenhanger van AdWords waar ik wel al gebruik van maakte: ik betaal voor de aantal keren dat er op een advertentie van mij geklikt wordt. Maar ik wil ook wel verdienen doordat anderen klikken op advertenties die binnen mijn website getoond worden. Dat is AdSense.

Interessant voor u?
Nu bedacht ik me vandaag: dit kan wel eens interessant zijn voor mijn klant. Ik maak websites. Die maak ik op zon manier dat ze zeker aan de vereisten van Google voldoen. Vervolgens plaats ik binnen die website advertenties waar de klant achter kan staan en ook zelf interessant vind. Ik koppel die advertenties aan een AdSense account van Google van de klant en het resultaat: de klant koopt via info Hartelijke groeten!

Stijgende populariteit van Spiderman Webdesign Wageningen

Stijgende populariteit van Spiderman Webdesign Wageningen

Bezoekers aantallen van blog van Spiderman Webdesign Wageningen: http://www.dewebhulp.nl

Positioneren van elementen binnen webpagina

Dit is kort en basic: het positioneren van elementen binnen een webpagina is een steeds terugkerende bezigheid en iedereen met een website heeft hier mee te maken. Binnen dit blog is informatie te vinden over positioneren binnen Joomla via het plaatsen van een extra module positie of via het gebruik van een module suffix. Maar meest belangrijk is om eerst de basis wat betreft html op een rij te hebben.

Gisteren moest ik vanwege een opdracht via tweaky.com een bug oplossen binnen een menu. Een scrollend menu. Na klikken scrollt te pagina naar beneden. Maar dit werkte niet. Na herstel van de .js file was dit opgelost. Behalve voor 1 menu item. Want dit was gelinkt aan een externe url. Na klikken zou de bezoeker moeten worden doorverwezen naar een andere webpagina. Maar nee, dat bleek ineens niet meer te werken. Dat had ik nog niet eerder meegemaakt: bij "hover-over" met de muis werd de url zichtbaar (linksonder binnen de browser) maar als ik dan klikte, gebeurde er niets. Een conclict tussen het javascript en de css file. De oplossing leek om dit menu item uit het menu te tillen, en apart te plaatsen. Ja, nu werkte het. Het enige wat nu nog nodig was, was het postioneren van dit menu item zodat het opnieuw op exact dezelfde plaats zou verschijnen als eerder. En eerder maakte het deel uit van een lijst (<ul><li></li></ul>) en nu niet meer……

Oplossing
Volgens mij is stap 1 bij positionering eigenlijk altijd het plaatsen binnen een <div></div>. Een div met een identiteit: <div id="identiteit"> zodat het layout gedrag binnen deze div gedefinieerd kan worden binnen de css file.
Stap 2 zou volgens mij ook bijna altijd hier op moeten lijken: kijken via Firebug welke css stijlen er al gebruikt worden en kopieren. Maar dan wel als zijnde een eigen identiteit. Oftewel: in mijn geval werd <div id="navtop"> gebruikt voor het menu en de nieuwe div werd dus <div id="navtop2"> en vervolgens kopieer ik alle bijbehorende verwijzingen naar navtop binnen de css file en noem die navtop2. Er onstaat zo een blokje met een layout identiek aan de gebruikte die apart te postioneren is binnen de html.
Stap 3: trial and error. Gewoon de <div>menu item</div> verplaatsen binnen de html en kijken waar ik deze het beste kwijt kan. Dit is de groffe positionering. Nu ben ik in de buurt.
Stap 4: fijnstemmen. En dat kan bijvoorbeeld via:

position:"relative"; right="300px";

Vervolgens wordt het menu item 300 px ten opzichte van rechter grens van website getoond. Firebug helpt hier natuurlijk om live te kunnen zien welke getallen hier precies gebruikt moeten worden.

Test zenden foto’s vanuit email naar WordPress.com website

Vandaag probeer ik 4 foto’s te plaatsen binnen de wordpress website onder http://www.dewebhulp.nl; Ik ben benieuwd.

Ashampoo Photo Mailer
Delen van foto’s via e-mail eenvoudig gemaakt.
Vraag uw gratis 40-dagen probeerversie:
Hier klikken: https://www.ashampoo.com/photomailer

Toegang beheer online tools op eigen website (bijvoorbeeld: Create Clickable Map online)

Gisteren helemaal gespannen de dag afgesloten. Teveel klanten? In ieder geval teveel vragen. Vandaag besluit ik dan ook om even wat aandacht te geven aan mijn eigen website. Dat is ontspannend. www.dewebmeester.nl ; Het doel: ik wil een aantal online tools aanbieden voor klanten van dewebmeester.nl. Dat hebben ze verdiend. Ik begin met het plaatsen van een iMap / Clickable Map Creator. Over dat onderwerp heb ik al eerder een blogpost geschreven overigens.

Doel: Login en gebruikersbeheer waardoor ik een bepaalde groep mensen toegang verleen tot een aantal online tools.

  1. Ik neem als uitgangspunt het Joomla 3.0 gebruikers beheer systeem. Via "Usermanager" vink ik aan dat gebruikers zich kunnen aanmelden op de website maar dat ik als administrator dat moet goedkeuren en daar een email over krijg.
  2. In het hoofdmenu maak ik een link aan met "Login||Toegang tot de online tools". Maar daaronder maak ik submenu’s aan voor elke online tool afzonderlijk. Dus "Login voor toegang tot Clickable Map".
  3. Nee, nu ben ik niet klaar. Ja, registratie en inloggen werkt maar waar wordt men vervolgens naartoe verwezen? Binnen menubeheer kan ik voor elk Login(sub)menu aangeven waar een succesvolle login naartoe moet verwijzen. Dat moet een interne pagina zijn. Die moet ik dus eerst aanmaken.
  4. Dat doe ik opnieuw via menubeheer waar ik een extra menulink aanmaak in het menu "Gebruikers menu". Dat menu is alleen zichtbaar voor geregistreerde gebruikers. Kortom: menu en menulinken zijn niet zichtbaar voor een willekeurige bezoeker. Dit menuitem noem ik "Clickable maps" en krijgt een bepaalde alias mee. Deze alias bepaalt via welke url de pagina is op te vragen. Dit menu item is van het type "Wrapper" en daarbinnen wordt via een iframe de online tool geladen.
  5. Terug naar de menu link in hoofdmenu (Login voor toegang Clickable maps) en daar geef ik aan dat een succesvolle login moet verwijzen naar de index.php/alias van de aangemaakt "pagina".

Gelukt. Ook hulp nodig bij toegangsbeheer in Joomla? Neem even contact op.

Hartelijke groeten,

Meindert A. Jorna

Dubbel Blog op Shopify.com

Shopify is een aardig populair web platform waar je een webwinkel kunt beheren. Nu is de goedkoopste optie 29,90 per maand dus het is niet de goedkoopste optie. Ik zou eerder kiezen voor een Joomla / Virtuemart of WordPress/ Woocommerce optie om zo het beheer op de server geheel in eigen hand te hebben en niet vast te zitten aan maandelijkse kosten. Maar zoveel mensen zoveel wensen en zo ga ik een klant bij Tweaky.com proberen te helpen om binnen de Shopify webwinkel 2 blogs te laten verschijnen. Niet: twee blogposten. Nee, twee afzonderlijke blogs.

Review Shopify
Als eerste een korte review betreffende Shopify. Ja, 29,90 per maand zijn vervelende maandelijkse kosten. Maar het goedkoopste telefoonabonnement kost ook al zoveel en in het geval van Shopify heb je wel een complete webwinkel. Wat me vooral op is gevallen tijdens het werken met Shopify is de snelheid van de templates. Ze hebben alleen de meest nodige code meegekregen en de bijbehorende files zijn zeer klein. Het is wel een geheel uniek systeem wat betreft codering. Html kennis of php kennis is niet voldoende. Nee, Shopify code kennis lijkt erg nodig om te kunnen sleutelen aan de layout. Dan ben je al snel aangewezen op een webdesigner (en vandaar dat we bij tweaky.com aardig wat aanvragen binnenkrijgen betreffende Shopify).

Implementeren van (extra) Blog in Shopify
Het einge dat ik hier kan doen is het plaatsen van de code die ik uiteindelijk heb gebruikt om een extra Blog te plaatsen. Daarna zal ik nog wat uitleg geven.

<div class="clearfix homerow">
<div id="blog_module" class="clearfix">
<h2><a href="#">News and Articles</a></h2>
{% if settings.featured_blog != "" %}
{% for article in blogs[settings.featured_blog].articles limit:2 %}{% if forloop.rindex == 2 or forloop.length == 1 %}
<div class="">
<h3>News</h3>
{% for article in blogs.extra-blog.articles limit:2 %}
<p class="bm_date">{{ article.created_at | date: "%b" }}<span>{{ article.created_at | date: "%d" }}</span></p>
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
{% if article.excerpt.size > 0 %}{{ article.excerpt }}{% else %}
<p>{{ article.content | strip_html | truncatewords:72 }}</p>
{%endif%}
<p><a href="{{ article.url }}" class="button_right">Read more</a></p>
{% endfor %}
<!—<p><a href="{{ http://working-space-silver.myshopify.com/blogs/extra-blog }}">See articles from Extra Blog</a></p>—>
{% else %}
<div class="">
{% endif %}

<h3>Articles</h3>
<p class="bm_date">{{ article.created_at | date: "%b" }}<span>{{ article.created_at | date: "%d" }}</span></p>
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>{% if article.excerpt.size > 0 %}
{{ article.excerpt }}{% else %}<p>{{ article.content | strip_html | truncatewords:72 }}</p>{%endif%}
<p><a href="{{ article.url }}" class="button_right">Read more</a></p>
</div>{% endfor %}
{% else %}
<p>You must select a featured blog.</p>
{% endif %}
</div>

Er is een hoofd Blog: {% if settings.featured_blog != "" %} waarvan de basiswaarden geladen worden bij de start van de Blog module. Die code laat ik staan. Vervolgens maak ik een extra Blog aan binnen Shopify en let erop hoe de url er uit gaat zien. Blog heet "extra-blog" en dus begint die code met:
{% for article in blogs.extra-blog.articles limit:2 %} wat duidelijk maakt de er twee artikelen geladen worden uit dit blog binnen deze module. Vervolgens wordt de datum van artikel gepubliceerd, artikel titel en url, de exerpt en / of inhoud. En als laatste een "Read more" button. Gekke code, wel logisch.

Ook een aanpassing laten maken in Shopify? Neem contact op via info)

debugmeester.nl, dewebmeester repareert via tweakweb.nl

Sinds een week ben ik als ontwikkelaar werkzaam bij tweaky.com. Een grappige uitdaging gezien het feit dat ik tweaky.com op mijn eigen website benoem als concurrent met 3 maal zo hoge tarieven als dewebmeester. (Zie: http://www.dewebmeester.nl/index.php/tarieven-overzicht-van-opties) Hun werkwijze spreekt mij echter erg aan en ook na afronding van de eerste opdrachten ben ik erg te spreken over het idee achter tweaky.com.

Idee: iedereen met een website heeft zo nu en dan een ontwikkelaar nodig om kleinere aanpassingen of reparaties te doen. Dan wil men niet direct teveel uitgeven maar heeft ment nog wel 39 Euro over voor zo’n aanpassing. Zo’n aanpassing heeft een Tweak en ik ben dus een Tweaker. Daarom begin ik direct met een eigen concept en dat heet tweakweb.nl.

Via de opdrachten die bij tweaky.com binnenkomen (en waar je dus 3 maal zoveel betaald om vervolgens door dezelfde persoon – “dewebmeester”- geholpen te worden), is veel te leren. Elke opdracht is een ontdekkingstocht. Dus dacht ik: laat ik nou eens uitleggen via dit blog hoe ik als dewebmeester tot oplossingen kom. Omdat ik ongeveer elke werkdag 1 tot 2 tweaks afhandel, kan dat leiden tot 1 a 2 extra blogposten per dag. Naar mijn verwachting betreft het problemen en bugs waar heel veel anderen mee te maken krijgen die een eigen website beheren. En zo wordt dewebhulp.nl (dit blog) mogelijk nog meer een webhulp. Even een lijstje met tweaks die ik ben tegengekomen:

  1. uitlijnen van widget in WordPress
  2. validatie volgens W3 en errors oplossen
  3. lightbox laten werken in WordPress, en dan ook voor de video’s
  4. plaatsen Facebook button
  5. aanpassen kleuren
  6. plaatsen tekst binnen Shopify theme
  7. maken clickable map
  8. contactformulier repareren
  9. 4ormat website layout aanpassen
  10. update problemen WordPress
  11. tot en met 1001: alle frustraties waar u zelf tegen aan loopt bij het werken aan een website.

Bedenk hierbij dat een tweak geen 39 Euro hoeft te kosten. Diezelfde tweak kan ook 9,90 kosten. Maar dan wel alleen via een abonnement van  www.dewebmeester.nl

Hartelijke groeten,

Meindert A. Jorna

%d bloggers liken dit: