deathgrunt - Wij Willen Meuk

Door deathgrunt op vrijdag 04 april 2014 12:34 - Reacties (11)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.759

In navolging van het besluit om de "MeukTracker" te hernoemen naar het generiekere "Downloads" heb ik besloten anti-cyclisch te gaan doen.

Onderstaande zal ik in de volgende iteratie van de Tweakers App voor Windows Phone nog doorvoeren;
  • Frontpage - Voorpagina
  • Pricewatch - Prijskijker
  • Reviews - Mening
  • Video's - Beeld
  • Forum - Overleg
  • IT Banen - Technologisch Werk
  • Benchmarks - Prestatiemeter
  • Tracker - Volgen
  • Tweakers.net - Aanpassen.net
...
vergroot : Tweakers WP App • nu met extra gratis MeukTracke(r)
Tweakers App voor Windows Phone  • nu met extra gratis MeukTracke(r) - klik om te vergroten

...

deathgrunt - WP apps | tips & tricks

Door deathgrunt op maandag 31 maart 2014 11:11 - Reacties (4)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.539

Sinds een tijdje ontwikkel (ook) ik apps voor het Windows Phone platform. Omdat ik niet echt thuis ben / was in de wondere wereld van C# / Visual Studio waren mijn eerste twee apps eenvoudige 'wrappers' rondom een bestaande website.

De apps (Tweakers WP en NU | Tech) kan je eventueel downloaden via de linkjes hieronder. Deze blog gaat echter niet om die twee specifieke apps, maar om iets dat ik altijd al miste - een scrollbalkje...

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in
één oogopslag op je Windows Phone.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/2f17d5f4-3922-4a17-bbbd-d2f5d149029a?imageType=ws_icon_largeNU | Tech

Het actuele en belangrijkste tech nieuws
van NU.nl direct op je Windows Phone.

...

Om toch 'app-functionaliteit' aan deze bestaande sites toe te voegen, had ik een manier ontdekt om zowel de styling (CSS) als scripting / functionaliteit (JS) van bestaande websites aan te passen.

Door het injecteren van style-sheets en javascripts werden de apps opeens een stuk uitgebreider;

Ik kon functionaliteit toevoegen (bv. het doorsturen van een volledig artikel via de email, het snel navigeren naar de reacties op een bericht, etc...). En daarnaast kon ik het ontwerp in de richting van de Metro-UI / Modern Interface trekken (bv. door de WP typografie te gebruiken en de sprites aan te passen zonder al die overbodige dropshadows, etc...).

Hieronder zie je een aantal voorbeelden van hoe sites ogen op een WP toestel en hoe het in de app oogt, dus nadat de styling en scripting zijn aangepast.

...

vergroot : Tweakers.net • homepage
Tweakers.net • homepage (links de site, rechts de app) - klik om te vergroten
vergroot : Tweakers.net • artikel
Tweakers.net • artikel (links de site, rechts de app) - klik om te vergroten

...

vergroot : Nu | Tech • homepage
Nu | Tech • homepage (links de site, rechts de app) - klik om te vergroten
vergroot : Nu | Tech • artikel
Nu | Tech • artikel (links de site, rechts de app) - klik om te vergroten

...

Alhoewel het aanpassen van de vormgeving en functionaliteit via externe scripts goed gaat, miste ik toch één (triviaal) element in mijn apps... een scrollbalkje.

Als je een website in een C# webcontrol-object embed, zie je tijdens het scrollen op je telefoon / tablet namelijk geen enkele visuele feedback over de lengte van de pagina en waar jij jezelf op dat moment in de viewport bevindt.

Open je dezelfde site in de normale browser (Mobile IE 10 of 11), dan zie je wel netjes een scrollbalk... Dit is een bekend euvel van de webcontrol en er valt niet echt iets aan te doen; er is simpelweg geen API die je kan aanroepen om een scrollbalk te tonen tijdens het scrollen binnen een app.

Omdat ik toch al veel functionaliteit aan de bestaande sites had toegevoegd, besloot ik een eenvoudig Javascript te maken, die tijdens het scrollen de positie / lengte toont. En natuurlijk met een mooiere scrollbar dan de native versie, dus in de huisstijlkleur van de website zelf.

Hieronder zie je het volledige script, die je in elke willekeurige pagina kan gebruiken. Het is een kwestie van copy / paste en je hebt een scrollbalk in je C# webcontrol.

Onder dit script staat een minfied versie (1.5kb groot).

Het leuke van die minified versie is dat je hem ook kan gebruiken buiten een app om;
  • Open in je browser de Developers Console (meestal via F12) en ga naar de tab 'console'.
  • Copy / Paste de minified code in de openstaande terminal-regel en druk op <enter> / <run>.
  • Als je nu scrollt, zie je (naast de bestaande scrollbalk) het equivalent in Javascript.
...

Scrollbar - Javascript - Development

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
////////////////////////////////////////////////////////////////////// 
//    DEBUG SHIZZLE 
////////////////////////////////////////////////////////////////////// 

var wpApp_debugger     = 1

function wpApp_debug(message){if(window.console)console.log(message);} 

////////////////////////////////////////////////////////////////////// 
//    CLEAR ALL @DOM-READY 
////////////////////////////////////////////////////////////////////// 

document.addEventListener('DOMContentLoaded'function() 
    { 
wpApp_afterLoad(); 
    }); 

////////////////////////////////////////////////////////////////////// 
//    CREATE SCROLLBAR 
////////////////////////////////////////////////////////////////////// 

function wpApp_afterLoad() 
    {
if(!document.getElementById('wpScroll')) 
    {
wpApp_scroll                        = 1;
wpApp_scrollBar                        = document.createElement('div'); 
wpApp_scrollBar.style.width            = '3px'
wpApp_scrollBar.style.height        = '50px'
wpApp_scrollBar.style.background    = 'rgba(180,16,57,.75)'
wpApp_scrollBar.style.opacity        = 0
wpApp_scrollBar.style.position        = 'fixed'
wpApp_scrollBar.style.top            = 0
wpApp_scrollBar.style.right            = 0
wpApp_scrollBar.style.borderRadius    = '3px'
wpApp_scrollBar.style.zIndex        = 2147483646
wpApp_scrollBar.style.transition    = 'opacity .5s ease-in-out'
wpApp_scrollBar.id                    = 'wpScroll'
document.body.appendChild(wpApp_scrollBar); 
if(wpApp_debugger)wpApp_debug('[scrollbar created]');
clearInterval(wpApp_beforeLoad);wpApp_scrollListener();
    }
    }

var wpApp_beforeLoad = setInterval(function(){wpApp_afterLoad()},10);

////////////////////////////////////////////////////////////////////// 
//    SET LISTENERS 
////////////////////////////////////////////////////////////////////// 

wpApp_scrollStart = wpApp_scrollPosition = 0;

function wpApp_scrollListener()
    {
window.onscroll = function (e
    {
///////////////////////////
// 'listener' @scrollSTART 
///////////////////////////

    if(wpApp_scrollStart == 0
        {
    wpApp_scrollStart            = 1
    wpApp_documentHeight        = document.body.scrollHeight /* http://stackoverflow.com/questions/1145850 */
    wpApp_screenHeight             = document.documentElement.clientHeight
    
    wpApp_scrollPositionPrev    = wpApp_scrollEnd = 0
    wpApp_scrollBar.style.opacity = 1
    wpApp_scrollChecker            = setInterval(function(){wpApp_scrollCheck()},500); 
    if(wpApp_debugger)wpApp_debug('[scroll #start]'); 
        } 

wpApp_scrollPercentage        = (window.pageYOffset/(wpApp_documentHeight-wpApp_screenHeight))*100
wpApp_scrollPosition        = (wpApp_screenHeight/100)*wpApp_scrollPercentage
wpApp_scrollPosition        = wpApp_scrollPosition-(wpApp_scrollPercentage*(parseInt(wpApp_scrollBar.style.height))/100); 
wpApp_scrollBar.style.top    = wpApp_scrollPosition.toFixed(0)+'px'

// if(wpApp_debugger)wpApp_debug(wpApp_scrollPercentage.toFixed(1)+'% - '+wpApp_scrollPosition.toFixed(0)+'px'); 
    }

function wpApp_scrollCheck() 
    {

///////////////////////////
// 'listener' @scrollEND 
///////////////////////////

    if(wpApp_scrollPositionPrev == wpApp_scrollPosition
        { 
    wpApp_scrollBar.style.opacity = 0
    wpApp_scrollEnd               = 1
    wpApp_scrollStart             = 0
    clearInterval(wpApp_scrollChecker); 
    if(wpApp_debugger)wpApp_debug('[scroll #end]'); 
        } 

// if(wpApp_debugger && !wpApp_scrollEnd)wpApp_debug('prev : ' + wpApp_scrollPositionPrev + ' | current : ' + wpApp_scrollPosition); 
wpApp_scrollPositionPrev = wpApp_scrollPosition;  
    }

if(wpApp_debugger)wpApp_debug('[scroll-listeners set]');
    }



Scrollbar - Javascript - Minified

JavaScript:
1
function wpApp_debug(p){window.console&&console.log(p)}function wpApp_afterLoad(){document.getElementById("wpScroll")||(wpApp_scroll=1,wpApp_scrollBar=document.createElement("div"),wpApp_scrollBar.style.width="3px",wpApp_scrollBar.style.height="50px",wpApp_scrollBar.style.background="rgba(180,16,57,.75)",wpApp_scrollBar.style.opacity=0,wpApp_scrollBar.style.position="fixed",wpApp_scrollBar.style.top=0,wpApp_scrollBar.style.right=0,wpApp_scrollBar.style.borderRadius="3px",wpApp_scrollBar.style.zIndex=2147483646,wpApp_scrollBar.style.transition="opacity .5s ease-in-out",wpApp_scrollBar.id="wpScroll",document.body.appendChild(wpApp_scrollBar),wpApp_debugger&&wpApp_debug("[scrollbar created]"),clearInterval(wpApp_beforeLoad),wpApp_scrollListener())}function wpApp_scrollListener(){function p(){wpApp_scrollPositionPrev==wpApp_scrollPosition&&(wpApp_scrollBar.style.opacity=0,wpApp_scrollEnd=1,wpApp_scrollStart=0,clearInterval(wpApp_scrollChecker),wpApp_debugger&&wpApp_debug("[scroll #end]")),wpApp_scrollPositionPrev=wpApp_scrollPosition}window.onscroll=function(){0==wpApp_scrollStart&&(wpApp_scrollStart=1,wpApp_documentHeight=document.body.scrollHeight,wpApp_screenHeight=document.documentElement.clientHeight,wpApp_scrollPositionPrev=wpApp_scrollEnd=0,wpApp_scrollBar.style.opacity=1,wpApp_scrollChecker=setInterval(function(){p()},500),wpApp_debugger&&wpApp_debug("[scroll #start]")),wpApp_scrollPercentage=window.pageYOffset/(wpApp_documentHeight-wpApp_screenHeight)*100,wpApp_scrollPosition=wpApp_screenHeight/100*wpApp_scrollPercentage,wpApp_scrollPosition-=wpApp_scrollPercentage*parseInt(wpApp_scrollBar.style.height)/100,wpApp_scrollBar.style.top=wpApp_scrollPosition.toFixed(0)+"px"},wpApp_debugger&&wpApp_debug("[scroll-listeners set]")}var wpApp_debugger=0;document.addEventListener("DOMContentLoaded",function(){wpApp_afterLoad()});var wpApp_beforeLoad=setInterval(function(){wpApp_afterLoad()},10);wpApp_scrollStart=wpApp_scrollPosition=0;


...

Tweakers WP • nu met extra gratis scrollbar

...

O ja, ik heb bewust geen Jquery (of een ander framework) gebruikt.

Het is dus plain 'n old Javascript - no dependencies.

Het hele scroll-script is nu 1.5kb groot, terwijl jQuery zelf al snel +/- 75kb is. Daarnaast gebruik ik het puur om het te injecteren in sites van derden. En dan is het meestal niet echt good practice om een exotisch framework in te laden.

Tenslotte heb ik geen wel alias-listeners op 'window resize' of 'orientation change' gezet, of en dus rekening gehouden met dynamisch langer wordende pagina's (AJAX call). Dit zou wel wel moeten 'in de echte wereld', maar omdat ik het puur in geconditioneerde omgevingen gebruik, is dat niet van toepassing.

...

Update : code iets aangepast, zodat de scrollbalk zich on-the-fly aanpast aan dynamische content (en dus variabele pagina-hoogtes).

...

deathgrunt - WP apps | round-up

Door deathgrunt op zondag 23 februari 2014 13:37 - Reacties (2)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.934

Sinds een maand of twee maak (ook) ik hier en daar een app voor Windows Phone. En wat kan je op een rustige zondagmiddag beter doen, dan jezelf ongegeneerd lekker te pluggen (punt intended)?

...

http://deathgrunt.com/img/tweak/apps/blog_yuis.png

http://cdn.marketplaceimages.windowsphone.com/v8/images/5df29e17-913e-45bd-b5ac-410076e88adb?imageType=ws_icon_largeYUIS?!

A trusted and elegant designed WHOIS look-up tool. See - and share - the most important site information.

...

http://deathgrunt.com/img/tweak/apps/blog_tweakers_wp.png

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Het belangrijkste nieuws van je favoriete site in één oogopslag op je Windows Phone.

...

http://deathgrunt.com/img/tweak/apps/blog_suriname_nieuws.png

http://cdn.marketplaceimages.windowsphone.com/v8/images/abc37fb2-ba90-411a-9007-c2a7bd87c9f4?imageType=ws_icon_largeSuriname Nieuws

Het belangrijkste nieuws uit- en over Suriname in één oogopslag op je Windows Phone.

...

http://deathgrunt.com/img/tweak/apps/blog_nutech.png

http://cdn.marketplaceimages.windowsphone.com/v8/images/2f17d5f4-3922-4a17-bbbd-d2f5d149029a?imageType=ws_icon_largeNU | tech

Het actuele en belangrijkste technologie-nieuws van NU.nl rechtstreeks op je Windows Phone.

...

deathgrunt : tweakers app - windows phone

Door deathgrunt op maandag 13 januari 2014 13:37 - Reacties (12)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 2.249

download de gratis Windows Phone App - Tweakers WP


Tweakers.net heeft onlangs haar responsive design geïntroduceerd. Voor mij (en velen met mij) was dat een mooi moment om een Windows Phone App te maken, gebaseerd op dit nieuwe ontwerp;


Tweakers WP is een gratis app voor Windows Phone 8 en biedt ten opzichte van de standaard browser enkele voordelen. Ik heb me vooral gericht op een betere UX (User Experience) tijdens het browsen.

Extra app-functionaliteit heb ik bewust niet ingebouwd; Tweakers.net zelf faseert immers haar Android- en iOS apps de komende tijd uit, en ik zie geen reden om daar anti-cyclisch in te gaan developen...

...

De voordelen van deze nieuwe Tweakers app zijn onder andere;

T W E A K E R S    W P
  • Full-screen browsen (dus geen overbodige system-tray en adres-balk)
  • Volledige browser-navigatie (back, forward, reload, etc...)
  • Makkelijk pinnen van een start-tile vanuit het menu
  • Eenvoudig delen / openen van een pagina via de standaard WP functies
  • Splashscreen / menu-balk in de huisstijl van Tweakers.net
  • Slechts 100kb groot
De app valt gratis te downloaden door te klikken op de banner bovenaan deze pagina of door de QR-code te scannen met je WP telefoon.

...

vergroot : Tweakers WP - scherm 1vergroot : Tweakers WP - scherm 2vergroot : Tweakers WP - scherm 3vergroot : Tweakers WP - scherm 4vergroot : Tweakers WP - scherm 5
Tweakers WP (klik om te vergroten)


Overigens is dit mijn eerste (Windows Phone) app. Het ontwikkelen voor Windows Phone is (voor mij) extra aantrekkelijk, omdat veel toch al html5-based is.

Voorheen werkte ik vooral voor Android - maar momenteel heeft Windows Phone voor mij de voorkeur...


...

deathgrunt : gratis strip-app

Door deathgrunt op donderdag 26 december 2013 13:37 - Reacties (14)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 2.892

download de gratis Android App - Tim in de Ruimte!


DEATHGRUNT... wie herinnert zich hem niet? Ik gelukkig ook niet meer en om dat te vieren heb ik een gratis Android stripboek-app gemaakt;

Tim in de Ruimte!

Tim in de ruimte! is een interactief stripboek over Tim, een jongen die er van droomt astronaut te zijn. Wanneer Tim in slaap valt, wordt zijn droom werkelijkheid...

De app valt gratis te downloaden door te klikken op de banner bovenaan deze pagina of door de QR-code te scannen met je Android telefoon- of tablet.

...

vergroot : Tim in de Ruimte! - scherm 1vergroot : Tim in de Ruimte! - scherm 2vergroot : Tim in de Ruimte! - scherm 3vergroot : Tim in de Ruimte! - scherm 4vergroot : Tim in de Ruimte! - scherm 5
Tim in de Ruimte! (klik om te vergroten)

...

T I M    I N    D E    R U I M T E !
  • Meertalig (Nederlands en Engels)
  • Geschreven én gesproken tekst (voice-over)
  • Interactieve onderdelen met geluid
  • Alles handgetekend (en met de hand geprogrammeerd)
...en voor de tweakers onder ons; alles is geschreven in HTML, CSS en JS - lekker oldskool, dus. Op die manier valt het voor mij makkelijker te porten naar bijvoorbeeld Windows Phone.

...