電商網站開發 - 應用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)�

YS, Fang. ys.fang@thinkinviz.com

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

YS, Fang. ys.fang@thinkinviz.com

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!

YS, Fang. ys.fang@thinkinviz.com

6

Google search: “QR-Code產生器”�

+ Generate a QR-Code with Free Service - http://www.unitaglive.com/qrcode�

YS, Fang. ys.fang@thinkinviz.com

7

來產生QR-Code吧！ http://www.unitaglive.com/qrcode�

+ Generate a QR-Code with Free Service - http://www.unitaglive.com/qrcode�

YS, Fang. ys.fang@thinkinviz.com

8

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

+ Generate a QR-Code with Free Service - http://www.unitaglive.com/qrcode�

YS, Fang. ys.fang@thinkinviz.com

9

客制化選項。�

+ Generate a QR-Code with Free Service - http://www.unitaglive.com/qrcode�

YS, Fang. ys.fang@thinkinviz.com

10

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

+ Generate a QR-Code with Free Service - http://www.unitaglive.com/qrcode�

YS, Fang. ys.fang@thinkinviz.com

11

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

+ Embed QR-Code supporting PayPal payment link in Weebly Website �

YS, Fang. ys.fang@thinkinviz.com

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. 手機掃描，完成付款。�

YS, Fang. ys.fang@thinkinviz.com

13

+Power Up Your Weebly Site!�

用互動表單元件 延伸擴增Weebly�

YS, Fang. ys.fang@thinkinviz.com 14

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

15

互動表單元件。�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

16

互動表單元件，表單選項。 設定回應要自動寄送通知的Email�

輸入接收通知的email信箱�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

17

互動表單元件。 查看目前的回應。請發佈網站，填寫表單，觀察變化！�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

18

互動表單元件。 表單記錄（可用於制作簡易訂單系統）�

+Hands on!�

n 動手作吧 請制作一個收集通訊錄的表單，可自由運用表單元件。

n 到彼此的網站去填一筆資料吧！���

n  <!> 挑戰 請參考範例���https://docs.google.com/forms/d/1hsJW-DSTwHVlhWwkA8eJ0_VyX1z-bWi3_8B32v5xR-0/viewform������用Weebly表單達成相似的效果吧

YS, Fang. ys.fang@thinkinviz.com

19

+Power Up Your Weebly Site!�

用內嵌代碼元件 延伸擴增Weebly�

YS, Fang. ys.fang@thinkinviz.com 20

+

整合以下的網站服務吧！�

Vimeo (影音網站) DISQUS (討論區服務) Google+ Facebook-POST� YS, Fang. ys.fang@thinkinviz.com

21

YS, Fang. ys.fang@thinkinviz.com

22

Vimeo�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

23

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

24

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

25

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

26

整合Vimeo網站服務。 回到Weebly來看看效果吧！�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

27

整合Vimeo網站服務。 Weebly內嵌Vimeo影片完成！�

YS, Fang. ys.fang@thinkinviz.com

28

Disqus+�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

29

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

30

整合Disqus網站服務http://disqus.com。 點擊For ＷWebsites。 Add Disqus to Your Site.�

�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

31

整合Disqus網站服務http://disqus.com。 在DISqus登記網站與註冊資料。�

�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

32

整合Disqus網站服務http://disqus.com。 選擇搭配平台。�

�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

33

整合Disqus網站服務http://disqus.com。 把code貼回weebly。�

�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

34

整合Disqus網站服務http://disqus.com。 把code貼回weebly。發佈，查看效果。�

�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

35

整合Disqus網站服務http://disqus.com。 把code貼回weebly。發佈，查看效果。�

�

YS, Fang. ys.fang@thinkinviz.com

36

Google+�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

37

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

38

整合Google +1 Button網站服務 使用+1設定按鈕

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

39

整合Google +1 Button網站服務 使用+1設定按鈕，將code貼回Weebly。

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

40

整合Google +1 Button網站服務 使用+1設定按鈕，將code貼回Weebly，查看效果。

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

41

整合Google +1 Button網站服務 使用+1設定按鈕，將code貼回Weebly，發佈，查看效果。

YS, Fang. ys.fang@thinkinviz.com

42

Facebook POST�

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

43

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

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

44

嵌入Facebook的文章(POST) 複製內嵌程式碼，貼回Weebly的embed code元件

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

45

嵌入Facebook的文章(POST) 複製內嵌程式碼，貼回Weebly的embed code元件

+網站編輯進階操作�

YS, Fang. ys.fang@thinkinviz.com

46

嵌入Facebook的文章(POST) 完成！

+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/

YS, Fang. ys.fang@thinkinviz.com

47

+ 問答時間FAQ�

YS, Fang. ys.fang@thinkinviz.com

48