解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

google chrome在76版後把chrome://flags內的autoplay policy移除了
這樣對做單機版或是需要特定網址能執行影片或聲音autoplay的開發者影響很大

經過一番搜尋研究，目前可解決的方式如下：

A.經由Chrome的設定

1. 開啟chrome的設定
   (chrome / setting)
2. 點擊左側的「進階」內的「隱私權和安全性」
   (Advanced / Privacy and Security )
3. 點擊右側視窗的「網站設定」內的「音訊」
   (Site Settings / Sound)
4. 開啟「允許網站播放音訊」的選項
   (Enable Allow Sites to Play Sound)
5. 新增允許自動播放的網址，如果檔案放在本機播放的話可輸入如下：
   localhost:8080  <-- 後面的port號視自己開放的port而定
   * 無法直接設定檔案位置 如：file://users/xxx/www/index.html 
   (Add the URL (localhost, etc) to the Allow area)
6. 關閉並重新啟動chrome，在網址列輸入localhost:8080 即可
   (Close and re-open chrome)

B.經由Command line加上參數執行chrome這一個方法，據說是google官方開發人員表明會保留的語法，那就是以command line的方式執行

MacOS :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required

Windows :
可以新增一個chrome的執行捷徑，在捷徑icon上點擊滑鼠右鍵選「內容」，在「目標」欄位內"C:\Program Files\Google\Chrome\Application\chrome.exe"的後方加上

--autoplay-policy=no-user-gesture-required

整句如下：(注意chrome.exe後方的空格)

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required

或是撰寫一個.bat檔案把執行語法加上然後丟進windows的啟動資料夾，那麼開機後就會自動執行，bat上的語法如下

@echo off
start chrome.exe http://localhost:5438/ --kiosk --autoplay-policy=no-user-gesture-required

用photoshop 壓縮優化png圖檔，減少圖檔大小 避免造成網頁loading過重

做網頁儲存png圖檔時，常常檔案很大會造成網頁loading較重
可使用photohsop內的 影像/調整/色調分離 來降低圖檔內的色階
然後再轉存，進而減少檔案的大小。

Google Chrome 全螢幕模式 --kiosk 及 --start-fullscreen

要讓chrome在一開幾就執行且以全螢幕模式開始(如同按下F11的方式)設定如下

win10的處理方式

1.先取消開機登入密碼
2.按鍵盤的windows+R，出現執行的小視窗
3.在「開啟」欄位內輸入shell:startup 按下確定，會出現啟動的資料夾內容
4.把google chrome的執行捷徑copy到這個資料夾內
5.在該捷徑上點擊右鍵，跳出的視窗選最下方的內容
6.在捷徑的目標欄位內容的最後方輸入 --kiosk(注意 --前要空一格)
*另外一個全螢幕模式為 --start-fullscreen，與kiosk的全螢幕模式不同的是
kiosk模式按f11關閉全螢幕時無作用，而 --start-fullscreen模式時按下f11可關閉全螢幕模式

在kiosk模式下執行硬碟內的檔案

在 --kiosk 後方直接加上檔案路徑即可
如： --kiosk c:\user\folderName\index.html

※kiosk模式在觸控螢幕下關閉disable pinch zoom螢幕縮放的方法

1.停用兩指放大(pinch)及左右滑動(swipe)效果

如果要停用放大跟滑動效果，讓觸控螢幕在很多隻手操作時不會被拉大，可在執行捷徑的目標欄位內容後方這樣寫：
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0  c:\user\folderName\index.html

以上語法中：
--disable-pinch就是禁止用兩指縮放螢幕
--overscroll-history-navigation=0 禁止螢幕被刷動(左右滑動)

2.使用chrome的flags來停用螢幕的兩指縮放

在瀏覽器的網址列輸入chrome：// flags /＃enable-pinch
關閉這個項目，可禁止chrome功能，但是這個項目只有在chrome舊版的才有

新版的chrome可輸入chrome://flags/#touch-events
但是就是停止所有的觸摸功能

3.在檔案內加上preventDefault()禁用所有觸摸功能

在文檔上加上

document.addEventListener('touchstart', function(event){

    event.preventDefault();

}, {passive: false});
可以禁用所有加諸於這個檔案上的觸控功能(包含縮放、滑動、觸摸)

其他google chrome的參數可參考下方文章
http://ssk7833.github.io/blog/2016/08/02/setup-Google-Chrome-as-kiosk-application-settings/


chrome kiosk mode失效時(有可能是使用者preferences檔案記住了預設的windows模式)，
可將 Chrome 設定重設為預設值即可

參考下方網址

https://askubuntu.com/questions/124564/google-chrome-kiosk-screen-does-not-maximize

chrome可設定的其他參數


同場加映：
解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

iphone,Android各硬體圖片顯示解析度

The iOS platform has these characteristics:

• iPad: 1024x768px, 132 ppi
• iPhone/iPodTouch: 320x480px, 163 ppi
• iPhone 4: 960x640px, 326 ppi

For Android it is a little different, being an open platform, you may encounter many different screen resolutions:

• Nexus One: 480x800px, 254 ppi
• Droid: 854x480px, 265 ppi
• HTC Legend: 320x480px, 180 ppi

The ICON size

The icon size for the iPhone icons is 57x57px, but the iTunes store uses a 512x512px image, so it’s better to create your icon in this size and then scale down for the icon.

iphone桌面上的icon尺寸是57x57pixel,但是在iTunes store的頁面上是使用512x512px image, 
所以最好是開啟512x512px的大小來製作icon，然後再縮小一個給iphone使用

It doesn’t need to have the rounded corners or the transparent glare -iTunes and the iPhone will do that for you automatically.

不需要在四角做圓角或是在icon上作反光，iTunes跟iPhone會自動幫icon加上這些特效

用safari下載youtube的影片檔案

Step 1.
觀看影片的頁面

Step 2.
在影片下載時

Step 3.
打開Safari上方選項列 視窗/網路活動

Step 4.
找到正在下載的路徑(下載數字一直變動的那個，通常數目也比較大)

Step 5.
雙擊路徑，就會打開下載器下載影片。

界面設計概念

界面設計最主要的就是「可用性 (Usability)」，原則如下：
a. 清楚性：i.界面文字、圖示、語音、影像，ii.功能列示，iii.隱喻。
b. 容易學習：通常包括熟悉度、單純性、一致性、容易預測等等特質。
c. 直接操弄：操作界面的直覺性很重要。
d. 操作簡單
e. 多樣性、完善之功能
f. 健全之操作輔助，充足的操作範本
g. 容易記憶或是不須記憶
h. 使用者設定 (Configurability)：容許使用者修改部份設定以儘量符合使用者個人的心智模型。
i. 使用者友善性：以使用者的邏輯來思考操作方法。
j. 控制性
k. 資料安全性
l. 容許使用者犯錯
m. 界面彈性與適應性
n. 高效率
o. 低錯誤
p. 整體美感
q. 透通性 (transparency)：界面本身的表現不應該讓使用者由他的工作內容分心來注意，界面是讓使用者完全投入在他要完成的工作上。

舉些實際的界面例子，
1)電腦軟體操作，鍵盤和滑鼠，如WORD軟體上的所有圖形，和整體佈置安排。
2)手機，按鍵，如手機內的電話簿，鈴聲設定.....
3)汽車的儀表面板、開車程序.....

產品<=軟體程式、操作程序<=界面設計=>人的眼、耳、鼻、舌、身體=>閱讀、運動、心理滿足