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

Alternative to Adobe CC?

Is there alternative to Adobe CC?

Here is an assessment by Joel Lee on  article: The Best Ways to Open a PSD File Without Photoshop..

GIMP(free), runs on Windows, Mac, and Linux, can read PSD files.

Paint.NET + PSD Plugin (free and paid versions), Photopea Online Editor, XnView (Windows), IrfanView (Windows) are mainly use as an image viewer and converter.

If you want to view PSD file, use Google Drive; and if you want to convert PSD file to formats like JPG and PNG, use Go2Convert(free).

“Use Photoshop if you are a photographer.”

GIMP 2.10.0 (Release Notes) is here! I think it’s worth testing it out.

And there is Affinity Photo and Affinity Design.

 

 

299: Mike King Presentation

Mike King’s Portfolio Page     http://mikeking.io

Mike King’s Codepen     https://codepen.io/micjamking/#

Mike King’s Github     https://github.com/micjamking

He walked through his new portfolio pages of each project case studies at Ikayzo with various functions that he performed (from intern to manager in design department?)  for the last seven years after graduating KCC NMA. He also showed his new projects at Google also. My thoughts was that working with a smaller company you get to see entire process and may have opportunities to perform many different functions.

Clearstream project: Existed a lot of overhead and needed to redesign the platform—started from creating vocabulary for the project. Needs to be responsive ->SVG.

GoHawaii Mobile App project:

TourAloha projet: Pearl Harbor survivor voice can be heard at the site.

Teacup App project: The analytics that supplies what google analetics can’t provide.

Google’s Grasshopper: Mobile App using JavaScript.

 

How He Learned Javascript Coding: His sup. at Ikayzo, eventually went to Google, suggested him a book: Foundation HTML5 Animation with JavaScript (He mention something about Ch13.) He did lot of exercises and you can see on his Codepen https://codepen.io/collection/AMgkZv/#.

He also did many courses and tutorials other medium such as Codeacademy provides.

Work Time Allocation at Google: At Google, 80% work and 20% what you want to do. His 27 year-old supervisor, younger than him, coded internationalization software which replaced people who had been doing long hand. This person became the manager of this tool group, where Michael King is a member of.

Sketch: At Google, people uses Sketch, Photoshop, and Illustrator, but currently it is the direction of Sketch. He uses Sketch for everything.

Final Code Launch Process at Google: Eeach group has its autonomy. There is development, QA, and CEO checks it against some check list(?) before launching the page. That’s all.

Mike mentioned two websites: grow.io and blinkk.com(Mikes group?).

His concept of CMS(Content Management System) has been changed working at Google – use Google spreadsheet instead (db).

On His Animation: VR app(?) in mind, he created the HERO image/animation. Star is PNG, Halo effect png, CSS box shadow is used, pseudo element line?, CSS animation -transform, @keyframes(?). iframe animation, HTML <canvaselement.

He uses scroll based animation. Add and clear elements.

SVG: all elements are SVG because it is flexible, small, crisp, also you can animate it.

Animated GIFs and SVG:

Animated Gif may cause some performance issues for mobile (mobile network issue with iterative or recursive codes?)

SVG is great for vector in browser – individual element can be modified like illustrator.

 

Animation such as 60 frames in a second (16milisec) but browser manages the best performance. Screen canvas context.

 

Page download speed, video is next best. Animation interactive.

Other Misc. He is working hero image(?) section @home and others work header, collocal node, grid module, cha??, module is ??? Coders difficulty with Photoshop and Illustrator. Mike can work with those no problem. Multiple people working different responsibilities on the page. Designers need to use Sketch so they just place flatenned image paste to Sketch. Tools they use.

I was wondering how mobile network work with gaming data in WCDMA?

 

Platform Capitalism Reading List

Platform Capitalism Reading Group at the University of Cambridge

They have a few interesting reading list:

Vid: Keynote von Evgeny Morozov

Radicalization of Utopian Dreams

Two Narratives of Platform Capitalism

Engineering the public: Big date, surveillance, and computational politics

Also, educators: https://cpgjcam.net/

 

 

My Home Page WriteUp

木の葉の間を通り抜けた光が地面で舞う。

The light that passed through the leaves of the trees dance on the ground.

La lumière qui traverse les feuilles des arbres danse sur le sol.

我々の未来のスピリットがコンピュータのスクリーン上に形成しつつ有る(生まれてつつある)。
The spirit of our future is being formed on the surface of computer screen.
L’esprit de notre futur se forme à la surface de l’écran d’ordinateur.
我們的未來精神正在電腦屏幕上形成。
Дух нашего будущего формируется на поверхности экрана компьютера.

未来はここにある。

l’avenir se déroule(takes place) ici.
future unfolds here.
будущее здесь.
未来就在这里(Le futur est là)(The future is here)
未來在這裡展開。(L’avenir commencera ici.)(The future unfolds here.)(未来はここから始まります。)

遠くに見える海の白い波。(遠くに海の白い波が見える。)
木の葉の間を通り抜けた光が地面で舞う。
柔らかい風が通り過ぎる。
我々の未来のスピリットがコンピュータのスクリーン上に形成しつつ有る(生まれてつつある)。
未来はここにある。

White sea waves in the distant ocean.(White waves are visible in the distant ocean.)
The sunlight that passes through the leaves of the trees dances on the ground.
(The light that passed through the leaves of the trees dance on the ground.)
A gentle wind passes through.
The spirit of our future is being formed on the surface of computer screen.
future unfolds here.

Les vagues blanches sont visibles dans l’océan lointain.

Vagues blanches dans la mer lointaine.

(Vagues blanches de la mer au loin.こっちかも)
La lumière du soleil qui passe à travers les feuilles des arbres dansent sur le terrain.
(La lumière qui traverse les feuilles des arbres danse sur le sol.)
vent doux de passer à travers.
(L’esprit de notre futur se forme à la surface de l’écran d’ordinateur.)
L’esprit de notre futur forme la surface de l’écran d’ordinateur.
l’avenir se déroule(takes place) ici.

(在遙遠的大海中的白色波浪。これかも)

遠白海的波浪。(白色的波浪在遠處的海洋中可見。)
穿過樹葉的太陽光浮在地上。
軟風通過。
(電腦屏幕表面形成了我們未來的精神。Not quite?どっち?)
我們的未來精神正在電腦屏幕上形成。
未来就在这里

Белые морские волны в далеком океане.
Солнечный свет, который проходит через листья деревьев, танцует на земле.
(Дух нашего будущего формируется на поверхности экрана компьютера.)
Дух нашего будущего формирует поверхность экрана компьютера.
будущее здесь.