電商網站開發 - 應用Weebly (Part 3 QRcode與其他服務)

+
Website Solution
Advance –
二維條碼應用
(QRCODE)
與其他

+
Outline
n Advance
n 二維碼應用 QRcode Application
n 延伸擴增Weebly
n 互動表單元件
n 運用embed code元件
整合其他服務
n VIMEO
n DISQUS
n Google+
n Facebook POST
n 成果展示與問答 (15 min)
YS, Fang. ys.fang@thinkinviz.com

+ QR-Code
E-commerce/M-commerce
Application
QR-Code商務應用
YS, Fang. ys.fang@thinkinviz.com 3

+ QR-Code Case Study: eMart Sunny
Sale (South Korea)
4
QR-Code 應用案例: eMart
https://www.youtube.com/watch?
v=EvIJfUySmY0

+
What is a QR-Code?
n http://en.wikipedia.org/wiki/
QR_code
n Quick Response Code
n Automotive industry in
Japan (Toyota)
n four standardized types
("modes") of data (numeric,
alphanumeric, byte / binary,
Kanji)
n Google Chart Tool API:
https://
developers.google.com/
chart/infographics/?hl=zh-
TW&csw=1
5
QR-Code可以藏什麼？

+
How to generate a QR-Code?
n http://www.unitaglive.com/qrcode
n http://www.qrhacker.com/
n http://quickmark.com.tw/cht/qrcode-datamatrix-generator/
default.asp?qrLink
n à 只要是一個URL，就可以轉成QR-CODE!
Let’s Do it!
6
Google search: “QR-Code產生器”

+ Generate a QR-Code with Free
Service - http://www.unitaglive.com/qrcode
7
來產生QR-Code吧！ http://www.unitaglive.com/qrcode

8
選擇「WebLink」，把PayPal的結帳連結貼上去吧！
Confirm.

9
客制化選項。

10
QR-Code完成，使用QRcode掃描器試試吧！

11
QR-Code掃描畫面，顏色、圖樣越多越複雜，辨識度下
降，請確認可以存取！

+ Embed QR-Code supporting PayPal
payment link in Weebly Website
12
在Weebly中嵌入可支援PayPal結帳連結的QR-Code吧！

+
Hands on!
n 動手作吧
n 1. PayPal 產生付款按鈕
n 2. 選擇為Email-link取得付款的URL
n 3. 製作QR-CODE
n 4. 將QR-CODE圖檔放在Weebly上
n 5. 手機掃描，完成付款。
13

+
Power Up Your Weebly Site!
用互動表單元件
延伸擴增Weebly

+ 網站編輯進階操作
15
互動表單元件。

16
互動表單元件，表單選項。
設定回應要自動寄送通知的Email
輸入接收通知的email信箱

17
查看目前的回應。請發佈網站，填寫表單，觀察變化！

18
表單記錄（可用於制作簡易訂單系統）

+
Hands on!
n 動手作吧
請制作一個收集通訊錄
的表單，可自由運用表
單元件。
n 到彼此的網站去填一筆
資料吧！
n ! 挑戰請參考範例
https://docs.google.com/forms/d/
1hsJW-DSTwHVlhWwkA8eJ0_VyX1z-bWi3_
8B32v5xR-0/viewform

用Weebly表單達成相似的效果吧
19

+
Power Up Your Weebly Site!
用內嵌代碼元件
延伸擴增Weebly

+
整合以下的網站服務吧！
Vimeo (影音網站)
DISQUS (討論區服務)
Google+
Facebook-POST
21

22
Vimeo

23
整合Vimeo網站服務。Vimeo提供HD的影片服務，類似
Youtube。

24
整合Vimeo網站服務。找一則影片，
http://vimeo.com/32823310，點下Share按鈕。

25
整合Vimeo網站服務。
設定Embed區段。複製HTML Code貼回Weebly。

26
回到Weebly來看看效果吧！

27
Weebly內嵌Vimeo影片完成！

28
Disqus+

29
整合Disqus網站服務http://disqus.com。
Disqus提供論壇的服務。

30
點擊For ＷWebsites。 Add Disqus to Your Site.

31
在DISqus登記網站與註冊資料。

32
選擇搭配平台。

33
把code貼回weebly。

34
把code貼回weebly。發佈，查看效果。

35
把code貼回weebly。發佈，查看效果。

36
Google+

37
整合Google +1 Button網站服務
http://www.google.com/intl/zh-TW/+1/button/

38
使用+1設定按鈕

39
使用+1設定按鈕，將code貼回Weebly。

40
使用+1設定按鈕，將code貼回Weebly，查看效果。

41
使用+1設定按鈕，將code貼回Weebly，發佈，查看效果。

42
Facebook POST

43
嵌入Facebook的文章(POST)
找到任一篇文章(任何一則公開的推文、粉絲專頁貼文)

44
複製內嵌程式碼，貼回Weebly的embed code元件

45
複製內嵌程式碼，貼回Weebly的embed code元件

46
完成！

+
Hands on!
n 動手作吧
請練習使用embed code元
件，制作一個新分頁放
置討論區DISQUS並加入+1
按鈕。
n 到彼此的網站去發文討
論與按+1吧！
n ？挑戰還有哪些網站服務有
提供內嵌程式碼的服務呢？
Dropbox 整合?
n https://www.dropbox.com/
developers/dropins
n http://www.freegroup.org/
2013/08/jotform-dropbox-forms/
47

+ 問答時間FAQ
48

電商網站開發 - 應用Weebly (Part 3 QRcode與其他服務)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to 電商網站開發 - 應用Weebly (Part 3 QRcode與其他服務)

Similar to 電商網站開發 - 應用Weebly (Part 3 QRcode與其他服務) (20)

電商網站開發 - 應用Weebly (Part 3 QRcode與其他服務)