電商網站開發 - 應用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. [email protected]

+ QR-Code E-commerce/M-commerce Application�

QR-Code商務應用�

YS, Fang. [email protected] 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� YS, Fang. [email protected]

21


22

Vimeo�



23

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



24

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



25

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



26

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



27

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


28

Disqus+�



29

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



30

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

�



31

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

�



32

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

�



33

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

�



34

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

�



35

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

�


36

Google+�



37

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



38

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



39

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



40

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



41

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


42

Facebook POST�



43

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



44

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



45

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



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/


47

+ 問答時間FAQ�


48

電商網站開發 - 應用weebly (part 3 qrcode與其他服務)

Business