Hoe kan je testen of je website wel mobile-friendly is ?

Je hebt je website (laten maken), maar ben je wel zeker dat die website mobiel vriendelijk is ? Hoe ziet ze eruit op een telefoon / smartphone ?

Je kan dit natuurlijk testen door zelf eens via een of meerdere smartphones en tablets naar je website te surfen, dan zie je dit onmiddellijk.

Maar wist je dat ook Google het belangrijk vind dat je site mobiel-vriendelijk is ? Meer en meer mensen surfen mobiel, dus het wordt meer en meer belangrijk dat je site zichtbaar én leesbaar is voor deze mensen.

Indien niet goed, dan wordt je site als resultaat véél lager geplaatst in de zoekresultaten – en wordt je dus ook veel minder gevonden !

Zelfs mensen in de business durven zich hier al eens te laten vangen…

Je kan zelf testen of Google je site mobiel-vriendelijk vind door naar de volgende url te surfen :

https://www.google.com/webmasters/tools/mobile-friendly/

En daar de url in te geven. Na een korte wachttijd krijg je een positief of negatief resultaat… en dan weet je of je je site hiervoor moet aanpassen of niet .

Hotjar is bangelijk !

Ik heb een nieuwe tool ontdekt (via een opmerking van de gewaardeerde Karl Gillis van AGConsult in een presentatie van hem). En die tool noemt HotJar.

Recent gebruikt gemaakt van HotJar om wat visitors te kunnen volgen op mijn juwelen website : wow ! Voor iets dat voor basic gebruik gewoon gratis is, doet het het echt wel geweldig.

Installatie is zoals voor Google Analytics : je voegt een javascript toe, en kiest wat je wil volgen en nadien krijg je veel meer dan Google : heatmaps, replay van user experiences, funnels van pagina’s, polls, etc.

En dan moet je wachten tot er genoeg volk passeert… voor mijn site duurt dat wel enkele dagen. Maar dan kan je geweldige dingen zien. Wat *doen* die mensen die nu eigenlijk je site bezoeken ? Waar klikken ze op ? Hoe gaan ze van de ene pagina naar de andere ?

Bij HotJar kan je een dus replay zien van hun bezoek, wat ze doen, waar ze naar toe gaan. Je kan hen zelfs vragen stellen op bepaalde pagina’s, zoals bvb op de checkout pagina’s.

Want hoe meer dat je kijkt naar zo’n replays of heatmaps, hoe meer vragen je hebt. Waarom scrollen ze op die manier ? Waarom naar ringen en dan terug naar hangers en dan weg ? Het is fascinerend…

Integratie van Flask en Mollie (payment provider)

Ik doe (web) vrijwilligers werk voor Licht Voor De Wereld, een Belgische ngo die streeft om de blindheid in Afrika te verminderen. Door ondervoeding en niet genoeg vitamine zijn zeer veel mensen daar blind hoewel ze eigenlijk perfect kunnen zien na een eenvoudige operatie.

Recent hadden ze een probleem : hun donatie pagina was gemaakt en gehost door een extern bedrijf, en dat bouwde zijn website af.  Ze hadden daardoor vrij snel een nieuwe donatie pagina nodig, en omdat ze ook nog eens hun eigen website aan het bijspijkeren waren, was er een probleem van het genre kip en ei : de donatie pagina moet op de nieuwe website komen, maar de nieuwe website is nog niet af. En een extern alternatief was niet direct zo gemakkelijk te vinden.

Ondertussen heb ik een tussenoplossing op poten gezet : ik heb over de loop van een week of 2,3 in mijn vrije avonduren een (basic) online donatie site opgezet voor hen, gebruik makend van Flask en met integratie van de API van Mollie.be, hun payment provider die de eigenlijke betaling afhandelt. De design kan inderdaad beter, maar mijn focus lag vooral op het doen werken van de betalingen !

Online LFTW donatie pagina
Online donatie pagina opgezet in vrijwilligerswerk.

Ik moet zeggen dat het vrij goed meeviel om de donatie pagina op te zetten, en de mannen en vrouwen van Mollie zijn beslist bij de pinken. Ik had een paar vragen over hun webhook (=zij geven een melding aan je webserver als de betaling (niet) gebeurd is) en had direct de morgen nadien antwoord, met inbegrip van het oplossen van een stomme bug waar ik me al een paar uren op aan het blindstaren was.

Verder is hun documentatie up-to-date en kon ik hun voorbeelden bij wijze van spreken doornemen en implementeren (het had iets meer voeten in de aarde dan dat, maar goed). Ik heb zelfs een github request of twee aangemaakt voor het gebruik van een andere python library zodat ik ook op windows lokaal kon testen.

Als je denkt dat het het waard, mag je ook een donatie gaan doen (klik op de image hierboven om direct naar de site te gaan) – zo kunnen weer een paar mensen meer het licht in de ogen terugkrijgen !

Hosting Flask on Webfaction

Ik host nogal wat websites via Webfaction, die je toelaten om voor een vaste prijs per maand te kunnen experimenteren met Python, PHP, nodejs en nog andere programmeer talen.

Als je ziet wat je allemaal met je account kan (mag) doen, dan is het eigenlijk een gunstprijs.

Recent moest ik een Flask applicatie die ik geschreven had opladen. Configuratie op de server was toch nog eventjes anders dan op mijn localhost. Daar had ik alles bijeen gegooid, en gebruikte ik de ingebouwde Flask server om het snel te testen.

Maar op de server staat er een echte front-end webserver voor, Nginx of Apache, want een debug Flask server is echt voor het testen, niet voor productie omgevingen.

Die webserver heeft natuurlijk een andere configuratie, en daarom moet je eigenlijk de app die schrijft importeren vanuit index.py.

Wat links die me verder geholpen hebben :

  • Deploying A Flask App on Webfaction : vrij compleet en logisch opgezet, hoewel ik geen Virtual Environment setup gebruikte, en ook geen link naar mijn static folder moest toevoegen in de Apache config (mét werkte het gewoon niet meer). Ik had wat last met het begrijpen van de commando’s in puntje zes van zijn lijst, maar dat is omdat ik module imports niet veel gebruik, en dus ook niet helemaal onder de knie heb – nu al wat meer 🙂
  • Een oudere versie maar gelijkaardige manier van setup, meer kompleet maar minder transparant, kan je vinden op het Webfaction community forum : Installing Flask on Webfaction.

Wat ik het moeilijkste vond was de import van de app. Je importeert vanuit module x (waar x eigenlijk de folder is waarin je __init__.py staat) de app die je beschrijft in diezelfde __init__.py. Daar heb ik toch wel efkes op gevloekt tot het werkte.

Pandas, QGis en de opcentiemen in Vlaanderen

Ik wilde wat meer leren over Pandas, de data-analytics tool die je kan (leren) gebruiken in Python, en had daarvoor een dataset nodig die niet té groot was, zodat ik ook kon controleren wat ik deed in Excel.

Daarvoor heb ik de open data van de Vlaamse overheid over de opcentiemen gebruikt.

Van de ene opzoeking kwam de andere vaststelling, en uiteindelijk heb ik genoeg cijfers en graphics over de data gemaakt dat ik er ineens maar een kleine presentatie van gemaakt hebt.

Je vind deze op slideshare :

Gebruikte tools :
* Pandas en Python
* Bokeh voor sommige graphs
* Keynote voor de presentatie in te maken
* QGis voor het maken van de mapping van de opcentiemen naar een grafische kaart op slide 5

Er is wat tijd in gekropen, maar al bij al heb ik weeral enkele dingen bijgeleerd !

Even zitten spelen met een foto van Kaai16

Wat zegt dat eigenlijk over u, als je in plaats van Watch_Dogs te gaan spelen zoals je dacht te doen, je je een uurtje of 2,3 bezig houdt met 1 foto, met nog wat vegas javascript, om opeens te beseffen dat je eigenlijk een responsive mini-website hebt gemaakt ?

Gedreven ? Zot ? Van het goede teveel ?

Ik heb er in ieder geval veel plezier aan gehad, aan dit prutsen:

test site

 

Je kan het zelf (eventjes) gaan ontdekken op http://demo.eventconnect.be

 

Netflix komt naar Belgie, en nu Google Films

Nadat Netflix aankondigde dat ze naar België kwamen, heeft Google in alle stilte zijn film dienst voor België geactiveerd.

Allemaal goed voor die Chromecast dongle die ik heb, dat kan ie namelijk ook !

Zo kan je dus voor waarschijnlijk 9.99 eur de maand een volwaardig TV-kanaal hebben. Het enige waar je nog schrik van moet hebben is Telenet zijn downloadlimiet waar je mogelijks gaat doorheen knallen…

Google ChromeCast is een leuk hebbeding

Chromecast dongle
Chromecast

Vorige week naar Frankrijk geweest voor een kort uitstapje. Terwijl we daar toch waren, even een nieuwe winkel gaan ontdekken ( Boulanger ) om de prijzen te gaan vergelijken.

Blijkt dat men in Frankrijk al een paar maanden de Google ChromeCast verkoopt – een kleine dongle van Google die je kan inpluggen in een vrije HDMI poort van je TV en die je moet toelaten om rechtstreeks via een wifi verbinding met je netwerk content te gaan streamen op je TV.

Wat moet je je voorstellen van zo’n dongle ?

  • het is klein, het plugt in op je hdmi poort : je hebt dus een vrije hdmi poort nodig, als je er maar 1 hebt die al gebruikt is, ben je de pineut.
  • je hebt ook nog stroom nodig voor de dongle : hiervoor moet je de dongle verbinden via een extra kabeltje naar een usb poort (van je tv) leiden. Heb je geen usb poort op je tv ? Er is een adapter voorzien om in een stopcontact te duwen, maar het is niet de mooiste oplossing.
  • de aansluiting is supergemakkelijk, zolang je eerst de chromecast app installeert en je je maar het wifi paswoord herinnert van je netwerk.

Wat kan zo’n Chromecast doen ?

In short : niets meer maar ook niets minder dan “content streamen”. En wat betekent content streamen ? Het betekent dat je alle soorten visuele data kan doorgeven naar dat bakje – via je smartphone, iphone of tablet.

Enkele voorbeelden:

  • Foto’s en Video’s die op je mobile device staan : via het “cast” icoontje kan je deze doorsturen naar je TV.
  • Youtube kanaal : het youtube filmpje wordt doorgestuurd via wifi naar je chromecasted TV.
  • Films en Muziek aangekocht via de Google Play Now winkel
  • Plex : via de plex app op je smartphone (verbonden met de Plex Media server, een software die je filmbibliotheek beheert op je pc of NAS) kan je films zien. Plex ondersteunt Chromecast en kan deze dus via de chromecast op je tv laten toekomen.
  • Chrome browser : via een plugin laat deze ook toe om de content te “casten”

Hier is een artikel met nog wat meer info over de verschillende mogelijkheden.

En dat is het voorlopig zowat. Ideaal om zelf foto’s en videos door te sturen, of een youtube filmke. Een leuk hebbeding, zeker handig in sommige gevallen, omdat het je voor een kleine prijs toelaat om via je smartphone of tablet op een gemakkelijke manier “media” op je tv te kunnen laten afspelen.Maar dat is het dan ook.

Let wel op dat dit nog een vrij jong toestel is, en dat er nog voortdurend nieuwe apps bijkomen.

In de US verwerken de meesten hun sociale media via hun smartphone

Net een bericht van ComScore gelezen dat de volgende grafiek had :

 

US-Share-of-Time-Spent-on-Social-Networks-Between-Platforms1

Als je daar even naar kijkt, kan je verduiveld goed zien dat zowat het merendeel van de gebruikers zijn sociale media consummeert via zijn smartphone. Facebook een beetje en LinkedIn en Tumblr worden nog gebruikt op de desktop, maar de andere sociale netwerken vooral via de smartphone. Sommigen zoals Snapchat zijn voor de volle 100% enkel beschikbaar op mobile.

Moraal van het verhaal : als je iets via Sociale Media de wereld instuurt, met een link naar een webpagina / email / whatever, zorg er voor dat het ook op zijn mobiels gelezen kan worden !!

Magento error : Item (Mage_Eav_Model_Entity_Attribute_Option) with the same id “22” already exist

Als je per toeval met MagMi zou aan het werken zijn, en je krijgt volgende error “Item (Mage_Eav_Model_Entity_Attribute_Option) with the same id “” already exist” na een csv import, dan zit er in een database een duplicate ID van een bepaald item.

Typisch is dan ook dat de indexatie van de “category search” dan niet meer werkt, en je website meestal ook niet meer 🙂

Het volgende is een oplossing die voor mij werkte :

(always make a backup of your database first !!!!!)

1. Copy the number from the error msg ( ex: Item (Mage_Eav_Model_Entity_Attribute_Option) with the same id “721” already exist )
2. Go to PhpAdmin , choose your database and click Search on top. Paste or write the number. Choose “eav_attribute_option_value” from “Inside table(s):” and click GO.
3. Click Browse from the search result. If you see 2 rows which have the same option_id , delete the second one.
(meer uitleg hieronder, oa ook met multistore !!)

Vrij vertaald :
0. MAAK EEN DUMP VAN JE DATABASE !
1. Noteer het nummer dat in de foutboodschap staat (in mijn geval “22”)
2. Ga naar PHPAdmin, kies uw magenta database en zoek rechts boven naar “Search”. Klik erop en je krijgt een nieuw scherm. Voer het nummer in (zonder de quotes er rond). Eronder zie je de lijst van tabellen staan waarin je kan zoeken : Kies de tabel “eav_attribute_option_value” en klik dan op “GO” rechtsonder.
3. Browse het resultaat : je ziet normaal een tabel met rijen waaronder een kolom “option_id”. Kijk of er dubbele ingaves zijn voor “option_id”, maar OPGEPAST ! Indien je een multistore website hebt (dus eentje bvb met verschillende talen) dan moet je rekening houden met de combinatie option_id EN store. Dus een 22 voor option_id en 0 voor store NL zijn *niet* hetzelfde als een 22 voor option_id en een 1 voor store FR !
4. Verwijder de dubbele entree waar het option_id en de store id hetzelfde zijn als in een bovenstaande rij.
5. Alles zou weer moeten werken.