Tweaker stats - Windows Phone

Door deathgrunt op donderdag 04 februari 2016 11:47 - Reacties (8)
Categorie: Apps voor Windows Phone en Android, Views: 2.441

...

In een artikel van afgelopen week schreef Tweakers over de (teloor-)gang van Windows Phone / Mobile.

Onder datzelfde artikel toonde Arnoud (de auteur) in een reactie enkele statistieken over de Windows Phone / Mobile gebruikers.

Deze waren nogal beperkt, omdat er blijkbaar een embargo op het openbaren van de cijfers stond.


...

Deathgrunt heeft natuurlijk lak aan alles dat autoritair is en het toeval wil dat ik zelf ook een "ahum" meting doe van Windows Phone / Mobile op Tweakers.net via een appje dat ik - jaren terug - had gemaakt.

Eigenlijk kijk ik nooit naar die cijfers; ik verzamel ze via Piwik op een afgeschermde server en ze zijn 100% anoniem (de laatste range uit het IP-adress wordt gewist).

In het kort zijn er iets van 20.000 unieke bezoekers per maand via die app, in het lang is hieronder een - heel snel - in elkaar gezet overzicht (klikken = groter).

Zonder context zegt het natuurlijk niet veel, maar ik vond het aardig om het eens te exporteren / openbaren. De cijfers zijn van afgelopen maand (januari 2016) - overige details zijn op aanvraag verkrijgbaar :)

...

vergroot deze afbeelding...

...

vergroot deze afbeelding...

...

vergroot deze afbeelding...

...

tweakersch - timemachine

Door deathgrunt op maandag 07 december 2015 16:21 - Reacties (21)
Categorie: Apps voor Windows Phone en Android, Views: 3.160

...

Vorige week schreef ik al dat ik een manier had gevonden om directe toegang te krijgen tot de artikelen op tweakers.net

Het leuke hiervan is dat je "alles" kan doen met de nieuwsberichten wat je maar bedenkt. Vanmiddag heb ik hier snel een eerste uitwerking aan gegeven;

De Tweakersch Tijdmasjien.


...

Tweakersch Tijdmasjien... wat is dat?

De Tweakersch Tijdmasjien laat zien wat er vandaag 15, 10 of 5 jaar geleden speelde op IT-gebied.

...

En dat is leuk?

Vind ik wel.

...

tweakers - 15 jaar geleden
- tweakers, 15 jaar geleden... -


tweakers - 10 jaar geleden
- tweakers, 10 jaar geleden... -


tweakers - 5 jaar geleden
- tweakers, 5 jaar geleden... -


de oude tweakers - op je mobiel...

- de oude tweakers, op je mobiel... -

...

tweakblogs 2.1 ...en nog wat

Door deathgrunt op vrijdag 04 december 2015 10:10 - Reacties (6)
Categorie: Apps voor Windows Phone en Android, Views: 2.232

...

Een paar dagen terug had ik een proof-of-concept gemaakt van de mogelijkheid tot een responsive tweakblog.

Het aanzetje hiertoe werd - overall - redelijk positief onthaald, inclusief enkele opbouwende kritiekpunten.

De belangrijkste twee issue's heb ik gisteravond opgelost, dus bij deze is het tijd voor... tweakblogs 2.1


...

Wat is er nieuw in versie 2.1?

Op wat bug-fixes en fine-tuning gedoe na, zijn er twee nieuwe zaken;
  • De optie om het blog te schalen.
  • Een mogelijkheid om naar andere blogs te zoeken.
...

Leuk, schalen en zoeken... hoe werkt het?

Geen idee...

click == big

- klik voor groot, vanwege kwaliteitsredenen is alles omgezet naar zwart/wit -

...

Okay, maar HOE werkt het?

Door rechtsboven te klikken op "schaal pagina" komt er een slider in beeld. Sleep je naar links... dan wordt alles kleiner, ga je naar rechts - dan wordt alles groter.

Wat er - onder water - gebeurd is eenvoudig; de site is volledig opgebouwd met een schaalbare unit, namelijk em. Standaard staat de pagina ingesteld op 1em, oftewel 100% van het originele ontwerp. Door de slider te manipuleren, stel je feitelijk een andere basis-waarde in (van 0.25em tot 2em).

Gevolg hiervan is dat alle lijntjes, witmarges, fontgroottes, etc.. netjes meeschalen. Als je klaar bent met kiezen, wordt er een cookie bewaard - zodat alle blogs in de toekomst dezelfde scale-factor tonen.

...

... en het zoeken?

Dat is gewoon Zoek Henk...

...alleen staat die nu in de sidebar van het blog en worden alle gevonden blogs automatisch omgezet naar de responsive versie (behalve als het een archief / category of pager-pagina is).

Overigens knalde de zoekmasjien er in het begin nog wel eens uit, omdat ik zoekresultaten toon buiten de searchprovider om;

Ik heb nu een - soort van - loadbalancer ingebouwd, zodat de resultaten stabieler zouden moeten zijn.

...

Was zeker weer heel veel werk?

Een kwartier voor de zoekfunctie, een half uur voor het schalen.

...

Wat is je volgende project?

Iets met DOS... en een real-time Tweakers-terminal direct access protocol... #whatever ...sneak-peak;

all your newz are belong to us

- sorry tweakers, ik heb jullie cookie-wall omzeild en direct access tot alles -

...

all over da interwebs

- in zuid-afrika volgen ze me ook niet meer... -

...

syntax terror

- de tweakers site in het zuid-afrikaans, live and direct in DOS... omdat het kan -

...

tweakblogs 2.0

Door deathgrunt op maandag 30 november 2015 15:50 - Reacties (22)
Categorie: Apps voor Windows Phone en Android, Views: 4.225

...

Het is een publiek geheim dat ik een mol ben binnen het Tweakers-team.

Langzaam maar zeker neem ik namelijk hun tweakblogs over; we hadden natuurlijk al het Henk-Font, daar kwam later de Zoek-Henk bij en recentelijk werd het Tweakblog-Van-De-Maand-Snippet geïntroduceerd.

Een logische stap is Blog Henk; een modern en responsive blogplatform.


...

Sinds jaar en dag is de tweakblog-omgeving namelijk niet geupdate en begint het steeds meer schreef te lopen ten opzichte van de hedendaagse stand van zaken op het gebied van webdesign.

Wat mij betreft een blasfemie voor een platform dat zegt technologie serieus te nemen... en omdat Tweakers zelf er niets aan doet, heb ik het maar gedaan... ik presenteer u daarom... Tweakblogs 2.0

...

Wat is het?

Tweakblogs 2.0 (of in de volksmond Blog Henk) is de moderne versie van Tweakblogs 1.0

Het toont alle blogs van Tweakblogs in een moderner jasje en zorgt vooral voor een betere user experience op mobiel of kleine schermen.

...

Hoe werkt het?

Het werkt eenvoudig;

Je gaat naar Blog Henk en daar voer je het adres is van een willekeurig Tweakblog.

Vervolgens druk je op de 2.0 button en het blog wordt real-time omgezet naar een modernere versie.

Natuurlijk kan je ook kiezen voor één van de recente blogs die op de homepage van Blog Henk staan (welke live worden aangevuld als iemand een Tweakblog update of toevoegt).

...

Welke techniek zit er achter?

Het hele platform bestaat feitelijk uit slechts één simpel php-commando...

Hiermee trek je de ruwe data van een andere site binnen en vervolgens kan je daarmee doen wat je wil.

Ik heb bewust níets aan de originele data gedaan; wat je ziet op Blog Henk is dus exact hetzelfde als het originele Tweakblog.

Feitelijk wilde ik demonstreren dat je met een simpele CSS-toevoeging het hele platform kan updaten en responsive kan maken.

...

Staat het volledig op zichzelf?

In principe werkt Blog Henk stand-alone, al heb ik wel drie API's gebruikt.
  • Alle emoji's heb ik geupdate middels Emoji One, een open source emoji platform.
  • Als je een blog omzet naar 2.0 kan het adres nogal lang zijn. Wil je het nieuwe blog delen via social media, dan zit er een url-shortener ingebouwd.
  • Elk nieuw blog toont een grote avatar van de schrijver. Echter kan ik de echte avatars niet van tweakers.net halen, omdat dit op serverniveau wordt geblokkeerd. Om die reden toon ik random avatars om toch een idee te geven "van hoe het er uit zou kunnen zien".
...

Was zeker veel werk?

Er zit niet heel veel werk in.

Ik heb er ongeveer vier uurtjes aan gewerkt, verdeeld over een paar avonden.

...

Mag dit wel, qua auteursrechten?

Blog Henk moet gezien worden als een proof of concept, niet als een alternatief voor de echte Tweakblogs.

Verder verander ik niets aan de teksten of afbeeldingen (behalve dat ik alle video's, illustraties, teksten, etc... responsive toon).

Mocht je niet willen dat je blog via Blog Henk openbaart wordt, DM me dan en ik zet je op de blacklist.

...

Genoeg geluld, laat eens wat zien!

Okay...

(Alle afbeeldingen zijn klikbaar, zodat je naar de achterliggende pagina gaat).

...



- Lampen schakelen van WeeJeWel, het origineel... -




- ...en de versie op Blog Henk -

...



- De beste telefoon van 2015, 1.0... -




- ...en de beste telefoon 2.0 -

...



- Reacties en smileys op het origineel... -




- ...en de high-res retina smileys op Blog Henk -

...



- Een lamp schakelen op een klein display... -




- ...en de responsive versie van het lampje -

...



- Knutselen met Bas, als het niet lekker pas(t)... -




- ...Blog Henk weet hem passend te krijgen -

...



- De beste telefoon... gezien vanaf een telefoon... -




- ...en dezelfde telefoon, gezien vanaf Blog Henk -


...

Tim! - een universele, universal app (Android en Windows Phone)

Door deathgrunt op donderdag 26 november 2015 10:10 - Reacties (9)
Categorie: Apps voor Windows Phone en Android, Views: 4.139

...

Voor mensen die niet van een lang verhaal houden; mijn nieuwste app heet Tim! en is een interactief stripverhaal over... Tim!

Een jongen die er van droomt om astronaut te zijn. Als hij in slaap valt, wordt zijn droom werkelijkheid en beleeft hij de meest spannende avonturen...

De app valt gratis te downloaden, de linkjes staan onderaan dit blog.


...

Tim in de ruimte!

Deze meest recente app is tegelijkertijd ook een Golden Oldie, of in ieder geval een Oldie; ik had de originele versie jaren terug al gemaakt, toen ik enkel een Android 2.1 tablet had om op te ontwikkelen...

Tim!

- Android 2.1 met een origineel echt serieus Bluetooth keyboard van nog geen 10 euro... -

...

De Android-versie van de app zag er (rond 2010) zo uit...

Tim!


...en onlangs heb ik besloten om er een universele (Android / Windows Phone app) van te maken;

Tim!

...

HTML apps

Zoals al mijn apps is ook de oer-versie van Tim! volledig gebouwd in HTML / Javascript. We hebben het dan echter wel over 2010 dus de stock-browser was een stuk trager en beperkter in wat hij kon tonen.

Phonegap was toen nog maar net enkele maanden uit en bleef (in ieder geval voor mij) redelijk onder de radar;

Om die reden heb ik toentertijd zelf een framework (in Java) geprogrammeerd, welke een full-screen browser toonde en enkele eenvoudige API's kon aansturen. Javascript fungeerde hierbij als bridge / intermediair tussen de native browser-code en native Java-code).

Tim!

- een stuk van de bridge-code die zorgt voor de uitwisseling van gegevens en functionaliteit tussen de browser en de achterliggende (native) code -

...

Bridge / intermediar

Via de bridge-functie kon je bijvoorbeeld gebruikersvoorkeuren opslaan (cookies werkte niet in Android 2.1 als je ze lokaal opsloeg), cross-reference AJAX-calls doen (fragmented URL's waren door Google van de één op de andere dag onklaar gemaakt) en geluid afspelen via de mediaplayer (HTML5 audio werkte alleen als je het op een server plaatste, dus niet "in-app").

De interface van de app was eenvoudig; een beeldvullende afbeelding, met bovenin de titelbalk / app-menu (waren er toen al hamburger-icons?) en onderin een navigatiebalk met alle thumbnails op een rijtje.

Tim!

- de basis interface, de gekleurde blokjes zijn mask-areas om de juiste (bitmap) sprites mee te kunnen genereren -

...

Schaalbare interface

Omdat je in die tijd (ook al...) een grote verscheidenheid aan Android devices had, moest ik echter wel iets verzinnen om de interface op alle schermen gelijk te krijgen. Ik wilde immers niet dat het beeldvullend was op een 3.2" scherm en dat er witruimte overbleef op een 4" scherm. Om dit probleem op te lossen heb ik toen een algoritme gemaakt dat puur HTML / CSS kon opschalen, aan de hand van een verdeelsleutel.

Zonder al te ver in detail te gaan, berekende ik met een eenvoudig Javascript het aantal pixels in de hoogte en breedte van het scherm en distilleerde ik daar een onderlinge verhouding uit. Bijvoorbeeld 4:3 of 3:2 of desnoods 16:9. Dit leverde uiteindelijk een vergrotingsfactor op die ik los liet op alle interface elementen;

Een vierkantje dat 32 bij 32 pixels was (in mijn originele striptekening) werd op grotere schermen vanzelf 48 bij 48 pixels. Als een textballoon een outline van 1 pixel had op een 3" scherm, dan werd dit bijvoorbeeld een outline van 2 pixels op een groter scherm. En als een poppetje op een 4:3 scherm 25 pixels van de rand afstond, dan stond hij op een 3:2 scherm 35 pixels van de rand af (de getallen zijn puur indicatief natuurlijk).

Tim!

- de functie die er voor zorgt dat alle elementen geschaald worden, op basis van de omvang van je display -

...

Good old Flash...

Het gevolg was dat ik dus een dynamische lay-out had, die net zo schaalbaar was als een Flash-object; vergroot je je browser, dan schaalt Flash perfect mee zonder verlies aan kwaliteit.

Als je browser "staand" was en het Flash-object "liggend" dan krijg je rondom gewoon wat meer witruimte, maar blijft de integriteit van het ontwerp (in het Flash-object) wel 100% gewaarborgd.

Om geen scherpteverlies te tonen in de illustraties, had ik deze op 300dpi ontworpen - zodat het ook op de Motorola Xoom tablet (Android 3) en Samsung Galaxy Tab (Android 2.2) er nog goed uitzag.

...

Beeldverhoudingen

Omdat de beeldverhouding van alle tablets en telefoons wel totaal verschilde, ontkwam ik er niet aan dat er soms witruimte rondom mijn illustraties ontstond. Dit loste ik echter op door simpelweg de sterrenachtergrond te "tilen" (naadloos herhalen van een grafisch patroon) tot in het oneindige...

De interface was geoptimaliseerd voor landscape-mode...

Tim!


...als je een afwijkend beeldformaat had, bleef het beeld intact en kreeg je gewoon meer sterren te zien.

Tim!

...

Interactieve hotspots

Je ziet al wel meteen wat er gebeurde als iemand een afwijkende beeldverhouding had, of bijvoorbeeld de strip in portrait-mode wilde lezen...

Alles schaalt perfect mee, maar omdat de lay-out zich niet (adaptief) aanpaste tussen staand en liggend, kreeg je bij een staande interface een redelijk vertekend ontwerp.

Om het mezelf niet nog moeilijker te maken, had ik dan ook maar besloten om de app geforceerd in landscape-mode te tonen; voor een tablet ligt dat het lekkerst in de hand en bij een telefoon is het ook goed te doen.

Nu ik de interface had bepaald en het probleem met het schalen had opgelost, kon ik dus met het echte werk beginnen; het tekenen van alle losse illustraties.

Daarbij was elke tekening ook nog eens interactief; de objecten in de illustratie waren namelijk aanklikbaar. Als je op een (natuurlijk wederom schaalbare) hotspot drukte, dan hoorde je een bijpassend geluid en veranderde het beeld.

Op die manier werd het stripverhaal een stuk leuker; je kon immers zelf van alles ontdekken en beïnvloeden!

Tim!

- de geaccentueerde vlakken zijn interactief en veranderen het beeld / geluid -

...

Voice-over

En om het helemaal af te maken, had ik een professionele voice-over gekocht die (meertalig) het verhaal voorlas. Als je tussen de pagina's door navigeerde vertelde deze dame wat je zag, in een taal naar keuze...

In de nieuwste versie van de app heeft de voice-over het overigens helaas niet gered;

Het toevoegen van een meertalige (synchrone) voice-over was erg arbeidsintensief - zeker met het oog op toekomstige nieuwe strip-apps...

Maar los daarvan was de toegevoegde functionaliteit van de voice-over alle extra inspanningen zeker waard!


- enkele voorbeelden van de voice-over... een meer dan rijke aanvulling! -

...

Werkwijze

Ik zal niet elke illustratie uitwerken (daarvoor kan je de gratis app downloaden, zie linkjes onderaan dit blog) - maar zal aan de hand van één pagina tonen hoe ik ongeveer te werk ben gegaan.

Tim!

- de ruwe opzet, linksboven zie je nog de mouse-coördinaten voor debug doeleinden (in chrome 4.1) -

 
Tim!

- de eerste potloodschets, op basis van het ruwe ontwerp -


Tim!

- de geïnkte lijntekening, nog wel met de potlood 'blueprint' (bij gebrek aan een gum) -

 
Tim!

- de geoptimaliseerde (en doorzichtige) lijntekening, de gumlijn is gewoon weggefilterd -

 
Tim!

- de losse kleuren, waar de transparante inktlijn later overheen geplaatst wordt -

 
Tim!

- de uiteindelijke versie in de nieuwe lay-out (de originele versie staat bovenin dit blog) -

...

De lancering

Alles bij elkaar was het maken van de app wel een flinke klus... in de tijd tekende ik ook elke dag een cartoon voor tweakers.net en had ik natuurlijk mijn dagelijkse (zakelijke) bezigheden.

Het bouwen van de app, het tekenen van de illustraties en het uiteindelijke samenvoegen van beeld, codes, geluid en functionaliteit nam dan ook ruim een jaar de tijd in beslag.

Toen de app eenmaal af was, had ik er eigenlijk ook al weer genoeg van; ik heb hem met stille trom geïntroduceerd in de Android Store en daar is hij met 13 downloads een nog stillere dood gestorven...

Tim!

- de originele banner uit 2010... de qr-code heb ik aangepast naar de huidige download-locatie -

...

Tim in de ruimte, 2.0

Tijdens het opruimen van mijn backup-drives kwam ik de (inmiddels bejaarde) app weer tegen. Inmiddels zijn we jaren verder en bouw ik nu apps voor zowel Android, als Windows Phone - met dank aan het Cordova framework.

In retrospectief gezien was de Tim! dus een soort Phonegap avant la lettre; inmiddels lang en breed ingehaald door de realiteit - maar al wel gebruikmakend van een ander interessant concept - namelijke schaalbare, universele apps.

Bij die laatste ontwikkeling gebruik je niet alleen één code-base die op alle systemen draait (net als bijvoorbeeld Cordova doet) maar past de interface zich ook aan, aan de hardware waarop je de app gebruikt. Op een telefoon heb je daardoor een andere interface dan op een tablet, terwijl de user-eperience (als je het goed doet...) gewaarborgd blijft.

Nieuwsgierig geworden door deze nieuwe ontwikkelingen besloot ik daarom enkele maanden terug om Tim! een tweede leven te gunnen. Ditmaal echter niet als "Android only" app, maar als een universele app die zowel draait op Android als op Windows Phone. En aangezien alles toch al schaalbaar was, ook maar direct op tablets, desktops en laptops...

Mijn concept voor "een universele, universal app" was geboren; een app die, met één code-base, draait op alle systemen en displays ter wereld.


- Tim in de ruimte, 2.0 (promo video) -

...

Chrome & Internet Exporer...

Tijdens het ontwikkelen had ik de app vooral getest en gedebugd in Chrome (het is immers een 100% html-app, dus een IDE of iets dergelijks heb je niet nodig).

Aan de ene kant omdat ik de developers console (zeker in 2010) één van de betere vind en aan de andere kant omdat deze net als de Android-browser webkit-based is (wat voorkomt dat iets het wel doet op je desktop, maar niet op Android).

Nu ik de app ook voor Windows (Phone) wilde maken, was ik benieuwd of de app goed zou draaien binnen Internet Explorer. Windows Phone heeft namelijk een 100% "volwaardige" Internet Explorer aan boord. De interface en mogelijkheden zijn natuurlijk anders dan zijn grote broer op de desktop, maar de render-engine is volledig identiek.

Vol verwachting draaide ik de html-codes van de app in Internet Explorer en... op het eerste oog werkte het zo waar ook nog! Ik had beeld en kon navigeren van pagina naar pagina, wat wil je nog meer.

Aanvankelijk dacht ik dus snel klaar te zijn en rekende ik me al rijk. Nadere inspectie toonde echter een ander beeld, helaas...

Tim!

- het splashscreen van de app in 2010 -

...

Quirks 'n Hacks

De Android-browser uit 2010 kon namelijk bar weinig, dus voor veel standaard zaken had ik toentertijd veel quirks en hacks moeten toepassen (html5 audio werkte niet, user-settings opslaan in een cookie was onbetrouwbaar, fragmented URL's waren niet meer toegestaan en zelfs het swipen moest via een script ondervangen worden).

Uiteindelijk werkte alles wel op Android, maar door het grote aantal work-arounds was het gevolg dat juiste alle "geavanceerdere" zaken niet binnen Internet Explorer werkte.

Los daarvan was ik in 2010 ook zo eigenwijs geweest om een eigen Javascript (en Java, maar dat staat hier los van) framework te schrijven. Ik gebruikte dus geen jQuery of iets dergelijks, maar een volledig eigen library.

Leuk, maar niet heel praktisch qua snelheid en flexibiliteit.

Doordat de app an-sich dus niet goed werkte als universele html-app én het gemis van een standaard-framework deden met uiteindelijk besluiten de hele app vanaf nul opnieuw te maken...

Het enige dat ik kon hergebruiken was het art-work (de tekeningen, teksten en geluiden), maar verder heb ik alles weggegooid en ben ik met een - letterlijk - witte pagina html aan de slag gegaan.

Tim!

- ...en het equivalent in 2015 (voor de windows phone versie, that is...) -

...

Broncode

Hoe ik alles inhoudelijk heb opgelost, zal ik hier verder niet beschrijven; het meeste is gewoon standaard HTML, Javascript (jQuery) en CSS3. De broncode van de pagina zelf (de hele app is één pagina die met AJAX wordt gevuld) is ook lekker eenvoudig;

Gewoon wat lege placeholders die uiteindelijk alle teksten, geluiden en afbeeldingen voortbrachten.

Tim!

- de broncode van de html-pagina, niet echt heel complex... -

...

Hammer.js

Om het swipen cross-device te krijgen heb ik een fork gemaakt van hammer.js, een script dat geavanceerde swipe en gestures mogelijk maakt. De fork was trouwens nodig omdat ik me richtte op alle Android versie vanaf 4.x en juist deze versies gaan erg slecht met html-standaarden om.

De reden waarom ik niet direct voor bijvoorbeeld Android 5.0 ben gegaan is simpel; marktaandeel.

Het aandeel van Android 4.0 is verwaarloosbaar, maar 4.2, 4.3 en 4.4 samen valt niet te negeren. De hele 4.x branch is zelfs bijna groter dan 5.0 en 6.0, dus het loont om wat extra moeite te doen voor de 4.x branche. Natuurlijk had ik 4.1 en 4.2 kunnen laten vallen, maar zeker op browsergebied zijn er niet veel verschillen tussen 4.0 en 4.4 - feitelijk kunnen ze allemaal bar weinig is mijn ervaring; zelfs bij de meest simpele zaken laat de browser steken vallen.

Zo wilde ik gebruik maken van een schaalbare interface (net als de originele app) maar dan wel op een nette manier; mijn eigen scale-script werkte fantastisch, maar was wel een eigen brouwsel.

Tegenwoordig kan je gewoon gebruik maken van CSS-units als VW (viewport-width) en VH (viewport-height) om al je content te schalen op basis van de resolutie / verhouding van je scherm.


- testen van de schaling en oriëntatie van de nieuwe app in wording... -

...

Viewport width / height

Echter... Android 4.x ondersteunt geen VW- / VH-units... jawel; een mobiele browser die geen viewport-units accepteert... Gelukkig zijn er veel oplossingen hiervoor gevonden; zo kan je ook met de REM-unit een schaalbare interface maken. REM is de afkorting voor Root Element, en daarmee bepaal je als het ware de schaalfactor van je interface.

Eén nadeel.. Android ondersteunt ook geen REM-units... uiteindelijk ben ik uitgekomen bij een goed werkende buggyfill voor het schaalprobleem. Het werkt een beetje vreemd, maar wel goed; je declareert in je CSS gewoon de VW- en VH-units, zodat browsers die het wel ondersteunen er mee uit de voeten kunnen. Als fallback plaats je exact die units nog een keer in de "content" css-tag.

Een simpel scriptje berekent tijdens het renderen van de pagina on-the-fly hoe groot een element dan zou moeten zijn, op basis van de schermgrootte en de schaalbare opmaak in je "content-tag".

Op wat oudere Android-devices zie je (soms) dus de opbouw even knipperen tijdens het rekenen, maar echt opvallen doet dat niet (of je moet heel snel je telefoon roteren, omdat de interface zich dan volledig aanpast)

Tim!

- moderne browsers gebruiken de "viewport-width / -height units", Android leest de content-tag uit... -

...

Formaat- en oriëntatie-onafhankelijk

Zoals ik hierboven al schreef, past de lay-out van de app zich niet alleen aan, aan de schermgrootte - maar ook aan de oriëntatie. De app ziet er liggend dus anders uit dan staand.

Om dit te realiseren heb ik de interface zó gemaakt dat hij feitelijk vierkant is; de belangrijkste zaken van de illustratie zitten aan de linkerkant van de afbeelding, met een vierkante verhouding.

Houd je de app staand, dan zie je enkel dat vierkant - met de tekst en thumbnails er onder. Draai je de app, zodat hij liggend wordt, dan zie je datzelfde vierkant, maar ernaast zie je dan de tekst samen met wat "loze" illustraties (die meer voor de opvulling zijn, dan dat ze van belang zijn voor het verhaal zelf).

Tim!

- de liggende versie van de homepage, de tekst wordt over de afbeelding heen gezet -


Tim!

- als je het device roteert, past de lay-out zich automatisch aan zodat de ruimte optimaal benut wordt -


Tim!

- het gedeelte "achter" de tekst bevat minder relevante beeldinformatie -


Tim!

- het belangrijkste illustratie gedeelte is gecontamineerd tot een vierkant -

...

Levensgrootte menu's

Door alle elementaire zaken in het "vierkant" te plaatsen en de tekst / interface naar gelang er onder of er naast te zetten, werkt de app dus in elke houding.

Soms was het wel even meten en passen om het altijd goed te krijgen; zeker de menu's waren wat lastiger, omdat het ook weer niet te klein moest worden.

Tim!

- universele app = universele app, dus ook op big-ass monitoren moet de interface meeschalen...


Tim!

- liggend of staand... alle menu's passen zich netjes aan, aan de actieve oriëntatie van de app -


Tim!

- de grootte van de buttons, teksten en bullets wordt bepaald door de resolutie van het scherm -

...

Een universele, univeral app

Uiteindelijk is het me gelukt om de volledige "oude" app om te zetten naar de nieuwe, universele versie; de interface heb ik iets moderner gemaakt, maar verder is het een 100% kloon geworden.

Een app die draait op - letterlijk - alle systemen die we kennen; mobiel, tablet, desktop, laptop, etc... En dan ook nog op alle resoluties; van een 3" telefoon uit 2008 tot een 21" breedbeeldscherm uit 2015.

De app valt gratis te downloaden in zowel de Android, als Windows store. Als experiment om te kijken of ik er wat mee zou kunnen verdienen heb ik ook nog een uitgebreidere versie gemaakt, waarmee je kleurplaten kan downloaden, extra pagina's krijgt en meer interactieve mogelijkheden.

Maar als onderbouwing voor dit blog is de gratis versie natuurlijk goed genoeg!

Tim!

- hoe universeel wil je het krijgen? de app draait letterlijk op alle systemen ter wereld... -

...

Tim!


download de Android versie / download de Windows Phone versie -

 
Tim!

Tim!

...

- offtopic - Voor diegenen die denken dat app-development een dure hobby is; dat valt (vind ik zelf) wel mee.

Ik heb alles gebouwd in de gratis Visual Studio Community Edition en ook mijn hardware-wagenpark kost niet heel veel; de computer heb ik gekocht in 2007 en de rest is gedurende een periode van ongeveer 10 jaar (nieuw) aangeschaft.

De totaalprijs van het hele plaatje is zelfs minder dan die van een gemiddelde Mac Book Pro :)

Tim!

...