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.

Advertisements

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,

ART258: Google fonts, Typekit, @fontface as Typographic

How Setup Fonts for Your Website.

Educational and Professional use of typefaces are different. For commercial use, make sure you use “100% free for commercial use.”

Today, Chris lectured, how to use Google fonts, @font-face, and Adobe Typekit.

@font-face can access to fonts if Google fonts does not have the fonts you want to use. For example, you can use free “ALEO” from fontsquirrel.com.

1. how to use google fonts

  1. Use Sassy-base development folder/directory,
  2. Download from Github.com Zip to your computer
  3. Drop the folder to Prepros
  4. Drop it also to the code editor you use such as Visual Studio Code, Atom, or Brackets.
  5. Change the body color in editor to see the web if body color to set “$type-color-body: red;” in the “_typography.scss” partial scss file, then add define “color: $type-color-body;” in style.scss file then check on web to see if it is updated. (updated massage will show on the screen)
  6. Check web to see if the index.html file is updated
  7. Google fonts use one for the body and one for the heading.
  8. Copy link html add to your index.html file at <head></head>
  9. Add index.html <link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>
  10. Add a line to SCSS file “font-family: ‘Roboto’, sans-serif;”
  11. What is the negative part of Google fonts? You don’t have a internet connection, you don’t get the fonts. Also if the Google fonts goes down you your web can’t use the fonts.
  12. @fontface 2008 changed every thing. One CSS declaration of @font-face.
  13. 10 years ago used – image replacement technic (text is there and the image shows).

WOFF- supported IE-9 on and others, TTF- for other than MS, EOT- for MS only, SVG check if all the browser supports by checking “can I use” website.

OTF – Adobe website says, “OpenType, as jointly defined by Microsoft and Adobe Systems, is technically an extension of Microsoft’s TrueType Open format, which can contain either PostScript font outlines (.otf) or TrueType font outlines (.ttf).” PostScript is for high resolution printing.

Fonts are available at:

The development folder, “sassy-base” has the following entries:

  • –css
  • –fonts –aleo–aleo.woff
  • –index.html
  • –prepros-6.config
  • –README.md
  • –scss

2. To Use Fonts using @font-face:

Add the following code in style.scss<pre>

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

</pre>

Add the following code in style.scss

<pre>

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

</pre>

To see how it is working by

Recommended way to use font is to use Google fonts, because Adobe Typekit does not work smoothly. It often requires some troubleshooting.

How to use typekits is part of Adobe-> performance is bad. Seems to take more time to load to cache memory. Used Brother-1816 for NMW

3. How to use adobe typekit

  1. Goto Typekit.com and click “Add to Kit.”-> kit setting and give the url then “Publish”.

You have to be careful using pseudo bold and pseudo italics in Typekit. Typekit is also server dependent.

Bold some weighted by using thin Brother-1816 and make it weight to be 900 instead matching 100.

ART258: Design Advice and Code Exercise

Lecture Notes

  • You can upgrade/brush-up your logo design by focusing detail and subtlety referencing website like “MailChimp” by a typographer, Jessica Hische.
  • Check to Google “Date UI” and “Time UI” how you can present dates and time on graphical design.
  • JAZZ visual design can add the mood or 何々風 backdrop.
  • The design could commit to Art Deco style all the way. Get design inspirations by searching images by “Art Deco.”
  • What is Humanist style.
  • Another good inspirations/reference from ART OF TITLES
  • Paul Rand design of “Catch Me If you Can
  • “Seven” whoes design?
  • Saul Bass – “The man with the golden arm””North by Northwest”
  • Search for “Art Deco” in Google fonts in it has any.