Stijgende populariteit van Spiderman Webdesign Wageningen

Stijgende populariteit van Spiderman Webdesign Wageningen

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

Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook…..

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren:

Opdracht: klant heeft WordPress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook.

Spioneren van de code binnen Facebook
Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik:

<div id=”u_0_3b” class=”_30l”><span id=”u_0_2f” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);”></i></span><span id=”u_0_2g” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-d.ak.fbcdn.net/hphotos-ak-snc6/p206x206/603007_10151320424504284_10063898_n.jpg);”></i></span><span id=”u_0_2h” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/p206x206/318068_10151320424509284_1098475204_n.jpg);”></i></span><span id=”u_0_2i” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/p206x206/582526_10151320424494284_1473985989_n.jpg);”></i></span><span id=”u_0_2j” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 1;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/p206x206/47666_10151320427084284_424829715_n.jpg);”></i></span></div>

Mooie code maar de vraag is nu waar die naartoe verwijzen. Oftewel: in welke file of binnen welk script staat bijvoorbeeld het volgende gedefinieerd?:

class=”uiMediaThumb _30m uiMediaThumbMedium”

Nee, lijkt me op zich niet erg relevant. Dit is tenslotte verwijzing naar css code en betreft niet een script. Code geeft alleen de output weer van het script. Maar welk script genereert deze output? Maar even googlen op: “load preview images mouse on hover”. Geen succes. Of: “how to have images load on mouse over in wordpress plugin”. Veel informatie, nog geen antwoorden.

Mijn test op jsfiddle.com

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)

Openen video’s van youtube in Lightbox binnen WordPress slider

Vandaag bijt ik mijn tanden in een nieuwe opdracht van tweaky.com: De klant wil dat video’s geopend worden in een Lightbox binnen dezelfde pagina. Het probleem lijkt me dat de video al geintegreerd is in een slider en niet in een bericht. Mijn stappenplan:

  1. – plugin lightbox video installeren (WP Video Lightbox)
  2. – testen binnen een WordPress bericht
  3. – code controleren en kijken of dit te integreren is in slider. Deze slider is overigens onderdeel van de template en heeft een eigen beheerspanel en de klant wil natuurlijk het beheer over deze video’s binnen dit beheerspanel behouden. Kortom: ik moet niet teveel in de broncode gaan veranderen maar zoveel mogelijk werken binnen bestaande admin panel van WordPress.

Na stap 1 ga ik eerst naar de support pagina van deze plugin: http://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700#!prettyPhoto . Daar vind ik een demonstratie van de werking van de plugin en kijk via Firebug naar de code (mogelijk kan ik stap 2 overslaan?) en dan zie ik dit:

<!—<a title=”” href=”” rel=”wp-video-lightbox”><img class=”video_lightbox_anchor_image” alt=”” src=”http://www.tipsandtricks-hq.com/wp-content/uploads/2010/08/wp-video-lightbox-demo.png“></a>—>

Deze code plak ik in een Notepad+ document om te bestuderen.

Binnen de slider applicatie is een mogelijkheid om aan te geven welke image getoond moet worden en waar die image bij klikken naartoe moet leiden. Image laat ik staan en als link plaats ik de YouTube video link. Vervolgens moet ik de rel=”wp-video-lightbox” nog ergens plaats. Ik probeer die te plaatsen naast de link binnen de slider applicatie maar zonder succes. In Firebug houd ik bij hoe de code verandert en ja, ik zie de link en zelfs rel= maar code wordt toch steeds weer door elkaar gegooid door de slider applicatie. Toch maar naar de broncode van de slider?
Ook dat probeer ik. Dat had moeten werken maar kan niet goed bepalen waar ik de — rel=”wp-video-lightbox” –moet plaatsen.

De oplossing
Tjonge wat ben ik dan weer blij als het lukt. Deze keer heeft het me 2 uur gekost. Oplossing lijkt simpel: bij de slider is er een optie om een “Caption” te plaatsen. Met een beetje geluk betekent dit dat er plaats is om html te plaatsen. En dus plaats ik de hele link, inclusief rel=”wp-video-lightbox” in de Caption (de titel, of eventueel in de beschrijving). Dat ziet er zo uit:

<a href=”” rel=”wp-video-lightbox”> <em><font face=”times new roman,times,serif” size=”6″>Click to Play</font></em></a>

Het resultaat is een mooie link onderaan de foto die getoond wordt met de titel “Click to Play” en bij klikken hierop wordt de video geopend in een mooie Lightbox overlay. Zie: http://www.speedvertu.com
Hartelijke groeten.
Ook interesse in het openen van video’s in Lightbox? Neem even contact op me:— info —

%d bloggers liken dit: