Technology and Inside Bruegel


Your Apps Know Where You Were Last Night, and They’re Not Keeping It Secret.

Aerial Photography

Peeling back the Paint to Discover Bruegel’s Secrets (NYT)

Kunst Historisches Museum Wien


Framework7 and IONIC video #2 T-shirt order


Framework7 Github

IONIC video #2 T-shirt order on Laulima ITS381/resource/video
Passing data from one page to another page. Ionic use radial button list, spacer, order button will keep space between items.
Page1: Order Enter
Angularjs template tags with object model:  {{ of the object}} How controller knows {{data.size}} {{data.color}} {{data.note}} etc,

+ add options -> Angular directives
fill “ng-model”  -> fill “data.size”  -> go to CODE section at right bottom.

function($scope, stateParams) { //This is basically page controller
//$scope where all the data resides.
$scope.sizes [{“id”:”xsmall”, “label”:”X-Small”}{“id”:”small”, “label”:”Small”}{“id”:”midium”, “label”:”Medium”}{“id”:”large”, “label”:”Large”}] // here creating drop-down menu selection.

+add option
fill “ng-options” -> fill “ as size.labels for size in sizes” -> go to CODE section at right bottom.

+ add options -> Angular directives
fill “ng-model”  -> fill “data.graphic”
fill “ng-value”  -> fill “Blue”  -> go to CODE section at right bottom.
Do all for the radial button.

Size {{data.size}} Type {{data.graphic}} Note {{data.note}} Rush shipping {{data.rushshipping}}
Rush shipping toggle true/false

In CODE section, define/assign all default values
$ = {‘size’: $scope.sizes[0].id, ‘graphic’:’blue’, ‘note’:”}

Page2: Order confirm
Create a new page “order confirm” and drag paragraph icon, orderdata
The key is function($scope, $stateParam){$scope.orderdata=’size’: ‘$stateParams.size’, ‘graphic’:$stateParam.graphic, ‘note’:$stateParam.note,’rushshippng’:$stateParam.rushshipping} which assign $stateParam to the array of varialbes in page2 which is orderdata.

{{orderdata.size}} can display the value.(

Mobile App: New Trend in Design 2018

mobile app design trends 2018

  • from static to dynamic
  • full screen experience – frameless
  • gestures – swipe, scrolling, and new gestures for UI
  • design approach – minimalism, material design, cards,
  • change in navigation – hidden nav, no hamburger nemu,
  • scrolling – modular scrolling for content heavy applications
  • user-appropriate design – failure mapping
  • fresh and bright design