Framework7 and IONIC video #2 T-shirt order

Framework7

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:  {{object.property 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 “size.id 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
$scope.data = {‘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.(object.property)

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

ART299: Mobile App Spec. Updated from Nov 2

Design of Mobile App

-Brief on The Process-
  1. Conceptualization

What are the objectives of the EMF mobile app?

The primary objective is to inform the levels of EMF of each location in Honolulu to raise the awareness of environmental EMF in our daily life visible to people.
The secondly objective is learn to create a mobile app to understand workings of front-end and back-end programming.

One of the model for the primary objective is the case of  safecast.org where people learn and actively performing the scientific activities of building tools to measuring radiation levels.

  1. Underlying Theoretical Frame

My thoughts on “Meaning emerges in relations to other (objects etc.)”.
Theoretical Frame (P. Dourish’s Context and Social Settings)
“‘Context’ has entered the realm of computational design”
“‘Context’ arises from the activity (Dourish, 2004)

  1. Who are the potential users?

Concerned parents for their children’s exposure. EMF sensitive individuals. Someone who is seeking information on EMF. People who does not know anything about EMF.

  1. Feeling & Atmosphere of the site

Neutral, trustworthy, approachable, and informative, and users feel like they want to come back for new information. Open data of EMF levels of people’s environment.

  1. Identity – Logo, Color, Typeface
  1. Development
    • PhaseI – A stable map with pointers which is clickable. If the pointer is clicked it will display a photo indicating the EMF level. Lower half of the page is a linked list of locations with thumb nail photos.
    • PhaseII – PhaseI + map is pinch and spread to move around the map.
    • PhaseIII – PhaseII + a user login and photo uploading capabilities  from mobile phones. The photo with EMF reading is stored in the database with date and location stamp.
    • PhaseIV – PhaseIII + registration to friendly users who can login and upload Acousticom 2 photos. That is multiple users loading information on db.
    • PhaseV – Acousticom 2 directly access to load necessary information to DB directly. (Acousticom 2 must have an output which would connect to some device  that connect to Internet.)

Dourish, P. (2004). What we talk about when we talk about context. Personal and Ubiquitous Computing, Volume 8 (1), pp. 19-30.

ART258: WP Child Themes, AWS, etc.

The process is  detailed at https://www.creativemedia.space/intro-to-cms-via-wordpress/

ChildTheme
Woo Commerce
Github create new project
use  VScode changes on code

Info on AWS from Chris. – I think what they call “serverless” is you don’t have to manage your server, create your database, and authentification, etc. It will be done by AWS (Amazon S3 for static site (html, css, and js stored), Amazon Cognito User Pool for user registration and authentication, Amazon API and Rambda to DB) Amazon provides easier package to do all. It is not serverless, but servers are packaged by Amazon interfaces. That what I think.

 

 

 

Map EMF Project – Design Philosophy(Dourish), Approach, and Phases. Nov 2

Design of Mobile App -Brief on The Process- Nov 2, 2018
1. Conceptualization

What are the objectives of the EMF mobile app?
The primary objective is to introduce the invisible EMF visible to  everyone.
The secondly objective is learn to create a mobile app to understand workings of front-end and back-end programming.
One of the model for the primary objective is the case of  safecast.org where people learn and actively performing the scientific activities of building tools to measuring radiation levels.
1. Underlying Theoretical Frame

My thoughts on “Meaning emerges in relations to other (objects etc.)”.
Theoretical Frame (P. Dourish’s Context and Social Settings)
”‘Context’ has entered the realm of computational design”
”‘Context’ arises from the activity (Dourish, 2004)
1. Feeling & Atmosphere of the site

Neutral, trustworthy, approachable, and informative, and users feel like they want to come back for new information. Open data of EMF levels of people’s environment.
1. Identity – Logo, Color, Typeface

1. Development Stages

◦ PhaseI – A stable map with pointers which is clickable. If the pointer is clicked it will display a photo indicating the EMF level. Lower half of the page is a linked list of locations with thumb nail photos.
◦ PhaseII – PhaseI + map is pinch and spread to move around the map.
◦ PhaseIII – PhaseII + a user login and photo uploading capabilities  from mobile phones. The photo with EMF reading is stored in the database with date and location stamp.
◦ PhaseIV – PhaseIII + registration to friendly users who can login and upload Acousticom 2 photos. That is multiple users loading information on db.
◦ PhaseV – Acousticom 2 directly access to load necessary information to DB directly. (Acousticom 2 must have an output which would connect to some device  that connect to Internet.)

Dourish, P. (2004). What we talk about when we talk about context. Personal and Ubiquitous Computing, Volume 8 (1), pp. 19-30.

A distinguished Japanese editor, Seigo Matsuoka,