他山之石可以攻玉

BeeFree

BeeFree 免費、免註冊、零技巧製作精美排版電子報，也是不必登入帳號就能編輯電子報，最後再用Send test寄給自己就能利用之。

還有一種HTML Email平台是提供HTML編輯器模式，讓我們可以貼上HTML語法，並測試寄出HTML郵件。

在談Eddystone之前，你應該已經知道 iBeacon的基本用途了吧。

Eddystone是Google定義的新一代iBeacon，有什麼不同呢?

⬛ 譬如Samsonite行李箱的“Track&Go” ( https://youtu.be/YLsjvrvSivw?t=13s https://youtu.be/mWtA535QTRc )，可能還看不太出來跟以往的iBeacon應用有什麼太大不同。
⬛ iBeacon vs Eddystone: Which one works better for your Pilot Project?

Eddystone的基本技術規格資訊:

⬛ 封包格式中的 UriBeacon advertising packet specs
⬛ How is iBeacon different from Eddystone
⬛ Eddystone format
⬛ Specification for Eddystone, an open beacon format from Google
⬛ Google Beacon Dashoard (YouTube)
⬛ Google Beacon Tools APP
⬛ Google Proximity Beacon API

什麼是Physical Web呢? 在Google還沒有提出這個概念之前，最接近的例子應該是 Bubble: Your Websites on iBeacon ，可是這個平台現在已經不存在了。

⬛ Setting up Physical Web in Chrome https://google.github.io/physical-web/try-physical-web
⬛ Physical Web官網介紹的一些應用示範 https://google.github.io/physical-web/examples
⬛ 其中的Parking Meter，想想看可以怎麼延伸應用呢?
⬛ 其中的Restaurant Buzzer，想想看可以怎麼延伸應用呢?
這個示範讓我想到六福村為了遊樂設施用掃描iBeacon排隊而特別做一個Lineup APP ，恐怕沒幾家攤販餐館能投資做這個，做小本生意的業者可能需要的是類似Qless這種通用型的排隊機制。
⬛ 其中的Lost Dog，想想看可以怎麼延伸應用呢?
⬛ 其中的Voting Screen，想想看可以怎麼延伸應用呢?
⬛ 其中的Photo Wall，想想看可以怎麼延伸應用呢?
⬛ 至於下列的例子就要將Eddystone與一些控制機制結合了
Vending Machines
Tiny Vending Machine
Tiny Toy
BLE off the shelf toy
"walk up and use anything" demo using the micro:bit
RC Car Prototype
Flying a Drone

基於Eddystone發展出來的服務平台PHY.net

⬛ 實例 https://www.digitalcommerce360.com/2016/01/14/beacons-go-school/
⬛ PHY.net的Installation操作 https://youtu.be/dA1Eu_-OAio 以及Scheduled URL Redirects https://youtu.be/7Xrp6FxcxAY
⬛ PHY.net後來再推出CoverCard https://bkon.com/blog/covercards-metadata-control/ 但是另外用一個APP來做到CoverCard的呈現 https://bkon.com/blog/better-physical-web/

基於Eddystone發展出來的One-Stop Solution服務平台beaconstac

⬛ 開箱操作 https://youtu.be/Ii6O2jiulng?t=1m6s
⬛ 後台操作 https://youtu.be/2woxPZSbDFE

在還沒有Eddystone之前，其實也有BrandStreet是基於iBeacon而發展出來的

⬛ 網站 http://brandstreet.com/merchant-landing
⬛ 後台 https://youtu.be/CbQc5xglru4
⬛ APP https://youtu.be/NlgRto_2WTQ

Google Sites示範站台

https://sites.google.com/view/2017-iscb-charter-ceremony/

https://sites.google.com/lexnetcrm.com/new-sites-demo/

全新 Google 協作平台推出，做漂亮網站跟編輯文件一樣簡單
http://www.playpcesor.com/2016/11/google-sites-new.html

G Suite 協作平台
https://gsuite.google.com.tw/intl/zh-TW/products/sites/

G Suite 協作平台提供哪些功能
https://gsuite.google.com.tw/learning-center/products/sites/get-started/

New Google Sites - Deeper Dive
https://youtu.be/xiuOfpI75s4

Insert Google Slides to New Google Sites
https://youtu.be/odYSrELZEPc?t=10s

Put Cropped YouTube Videos Into New Google Sites
https://youtu.be/9UxuO4sIRW4

Insert Maps with Multiple locations to The New Google Sites
https://youtu.be/HYU0Rc4uO58

Mobirise是一個完全以拖曳方式就能建立OnePage Style Website的軟體，而且最後產出的是Bootstrap-based Site，整個資料夾就包含一個網站的完整檔案，放上有Web Service的伺服器也就可以啟用該網站。請看下列重點介紹:

建立OnePage只要拖曳組合區塊 (New Mobirise Website Builder 3.0 )
更多page建立與選單連結
專案檔及網站檔案的匯出
Banner可以採用影片背景
網頁可以有Slide區塊
有過場特效的WOW Slide(要付費購買模組)
區塊還可以嵌入code(要付費購買模組)
還支援已PayPal付款的Shopping Cart功能(要付費購買模組)
所有版型

更多資訊，參閱.....
http://practical-dbm.blogspot.tw/2015/01/awesome-tablemobirise.html

VENNGAGE

Pricing - https://venngage.com/pricing/
需要做互動式資訊圖表嗎？試試看Venngage 吧！

Easel.ly

Infogr.am

Picktochart

Visme

Optoma - 以短焦投影創造沉浸式互動故事牆

How does it work - https://www.mapbox.com/help/studio-manual/#how-does-it-work

Tutorials and Examples - https://www.mapbox.com/help/studio-manual-tutorials/

Build an interactive route planner - https://blog.mapbox.com/build-an-interactive-route-planner-for-fleet-management-f259f517ee7c

Sneak peek at heatmaps - https://blog.mapbox.com/sneak-peek-at-heatmaps-in-mapbox-gl-73b41d4b16ae

Pricing - https://www.mapbox.com/pricing/

PocketSights

Timescape的範例 - https://www.timescape.io/unesco-9yf-1

用電腦、手機開啟範例看看 : https://izi.travel/en/94d8-hop-on-hop-off-broek-in-waterland/en#2193c311-3832-4190-83ef-36b5d9d34d40

操作教學影片請看 : http://academy.izi.travel/help/production/video-lessons/

Juxtapose.JS

用手機試看看閱讀範例 : https://storyform.co/demo/rainier

免費帳號只能到用一種版型 : https://storyform.co/templates

免費帳號只能儲存一個故事 : https://storyform.co/upgrade

YouVisit VR

YouVisit VR

在這個平台上已經有數以千計的校園導覽內容，像是哈佛、普林斯頓、...

在這平台上最受歡迎的導覽內容也非常值得一看，像是巴黎、紐約、...

如果要練習在這個平台製作導覽內容，得要先準備好720度的全景照片，你可以用相關的器材拍攝，也可以先從網路上找找可用的照片(像是品味北京、樣品屋、樣品屋、咖啡館、故宮、.將軍廟、南通體育館、北京網絡台、香港客運、Meilenwerk Düsseldorf)。

啟雲科技推出3D拍拍App，簡單製作個人專屬的3D公仔

下列影片記錄了我們試用操作過程...

Ricoh Theta S全景攝影機

詳見:
Ricoh Theta 無線星球相機，360度、球型全景攝影一鍵搞定
理光Ricoh Theta 360度全景相機拍照也要無死角
一按 360° 全景零死角：Ricoh THETA 試玩
360°零死角 Ricoh Theta 360
Ricoh THETA 360 超簡便一按即拍環迥360度全景相機，室內、室外、日間、夜間相片樣本
Ricoh THETA 360 FAQ 常見問題

參考看看吧...
KISS原則又來了，線上和Android剪接器WeVideo
Android版WeVideo - 幫你輕鬆快速的建立自已的超讚影片

以動畫人物結合背景圖片進行數位說故事
更多參考...
A Handful of Ideas for Using Tellagami In School
Augmented Reality + Avatars + Video = Fun Storytelling

下列影片記錄了我們試用操作過程及成果...

在電腦上以Chrome瀏覽器連上Johnny踹貢網頁，並以手機任何一個可掃瞄QRcode的App掃瞄你開啟網頁上的QRcode，在出現導向網址時請選擇以手機上的Chrome瀏覽器開啟網址。(不要掃瞄上圖的 QRcode喔，因每次開啟該網頁都會產生不同的QRcode！而手機沒有安裝Chrome瀏覽器，就要記得先到Google Play下載安裝。)

於是在電腦上看到網頁顯示手機正在連線中... 確定連線後就拿著手機做出朝拜的動作...

三次朝拜後(幅度要夠)就會顯示這個畫面... 最後測字結果就出來了...

以上將手機與電腦網頁互動的例子很有趣吧，裡面的核心技術就是node.js，類似的互動例子還有：

要著手做出這類的應用，可參考下列介紹跟著做做看：

下列是我們做出來的雛形展示：

Prototype Demo - Chrome Sync Web Game for Digital Curation

Pricing - http://datamatic.io/pricing.html

要把大量數據做視覺化呈現就可以用這個來開發程式

參考看看囉...
First glance on D3.js
Scott Murray's D3.js Tutorials
Dashing D3.js
mbostock / d3 Tutorials
Data Visualization with D3 Cookbook
Interactive Data Visualization for the Web
D3.js Intro Tutorial Video Series
d3Vienno
The Big List of D3.js Examples

相關推薦...
向 Web 開發人員推薦35款 JavaScript 圖形圖表庫

參考看看.....
Gallery - http://rawgraphs.io/gallery/
How to make a treemap - http://rawgraphs.io/learning/how-to-make-a-treemap/
(例如"THDL臺灣總督府抄錄契書地區分析"就用Treemap概念來作呈現)
How to make a scatterplot - http://rawgraphs.io/learning/how-to-make-a-scatterplot/
How to make an alluvial diagram - http://rawgraphs.io/learning/how-to-make-an-alluvial-diagram/
How to make a bump chart - http://rawgraphs.io/learning/how-to-make-a-bump-chart/
How to create hexagonal binnings - http://rawgraphs.io/learning/how-to-create-hexagonal-binnings/

HTML5 eLearning Content Development with H5P – Open Source and Free to Use!
H5P Roadmap
H5P Documentation
A site for demonstrating H5P content and applications

25 HTML5 e-Learning Authoring Tools

有關H5P的Image Hotspots功能(而且另外還有可安裝在Wordpress、Moodle、Drupal的套件喔)，非常適合用來製作圖說，下列是用湖心亭的照片做了一個範例:

https://h5p.org/node/125733

其建立方式如下(參閱Image Hotspots Tutorial):

Step 1: Create New Content

Step 2: 輸入Title，並選擇建立類型為 Image Hotspots

Step 3: 先上傳一張Background image

Step 4: 再一一建立每個Hotspot的內容。先指定Hotspot position，並勾選"Cover entire background image"。然後建立第一個item為Text類型，輸入要說明的文字。再建立第二個item為Image類型，上傳照片。依此類推，用ADD HOTSPOT將每個特寫照片都逐一建立起來.....