阿拉丁與QR code的結合

Technorati Tags:

本篇要將好用又方便的QRcode與阿拉丁網站做結合囉!

若能在自己的網站內容放上QRcode,能讓使用者在瀏覽網頁時,透過QRcode的感應與連結,將接觸到到更多的內容,使你的網站資訊更多元豐富唷!

 

◎何謂「QR code」?
QR碼是二維條碼的一種,來自英文「Quick Response」的縮寫,即快速反應的意思,源自發明者希望QR碼可讓其內容快速被解碼。QR碼為目前日本最流行的二維空間條碼。QR碼比普通條碼可儲存更多資料,亦無需像普通條碼般在掃描時需直線對準掃描器。

clip_image002

◎QR碼運作原理:透過手機安裝程式,將鏡頭對著QR碼,手機會自動抓取QR碼的感應資料,並透過網路連線直接進入網站。常用於名片、官方網站等用途。

clip_image004

 

 

◎以下開始教學:

Step1
要將自己的阿拉丁網站創立一個專屬的QRcode。

首先輸入網址http://goo.gl進入到google的QRcode生產器網頁,再來將阿拉丁網站的網址[複製],貼至URL空白欄位,接著按下Shortern URL生成QR碼。

clip_image006

 

 

Step2

在製造出QR碼前,會先要求輸入[驗證字元]

如果驗證碼圖示不太清楚,可以選擇更換驗證字元。

clip_image008

 

Step3

輸入完成後,會跳出屬於網站的連結網址可以複製,但若要找到QR碼,則須再下方點擊details進入。

clip_image010

 

Step4

進入畫面後,右方會出現QR碼圖示,在圖示上按右鍵,選擇[另存圖片]將其儲存起來,就是儲存屬於自己網站的QR碼圖了!

clip_image012

 

Step5

再來進入阿拉丁平台將QR碼架設在自己的網站上。

在右方[模組管理]內找[自訂模組建立],進入後輸入[模組標題]、[生效/失效日期],並勾選[純文字]介紹自己的聯絡方式,於下方勾選[有效]後,最後別忘記按下[新增]即可完成一個模組的建立。

clip_image014

 

Step6

新增模組後,再點擊一次[自訂模組建立],並點擊剛建立的模組進入畫面。

clip_image016

 

Step7

進入模組後,在畫面右方將剛剛製作的QR碼點擊[瀏覽]上傳,格式選擇[圖形檔],並點擊[使用文字]才能跳出文字介紹。最後別忘記按下[修改]才算完成設定哦!

clip_image018

 

Step8

在左方功能列中進入[首頁精靈],並點擊[下拉式選單]找到剛剛建立的[自訂模組],再按下Add後,別忘記在上方點擊[新增]鍵,才能正確將模組放置首頁哦!

clip_image020

 

Step9

最後在點擊[前端][首頁預覽]檢查看看,就可以看到QR碼圖片出現在你的個人網站上囉!

clip_image022

廣告

阿拉丁《用法Right,就愛配》讓網站好感無限加分課程(暗藏密技:製作手機行動網)影音全記錄(2012年)

pic_12

講  師:紀又倫 Master 老師

經  歷:黑快馬系統諮詢部-軟體諮詢講師

【課程資訊】第一堂

  • 時間:2012/6/13 (三) 09:30-12:30 世界大樓 W301 教室
  • 內容:《 功能大觀園 》+《 用法Right,實用又方便 》
  • 講義:點此下載
  • 課程影片實況:Part1Part2

【課程資訊】第二堂

  • 時間:2012/6/20 (三) 09:30-12:30 世界大樓 W301教室
  • 內容:《 用法Right,實用又方便 》+《 網站好感無限加分 》
  • 講義:點此下載
  • 課程影片實況:
  • 課後技巧分享(製作手機網):

繼續閱讀

※阿拉丁-手機瀏覽網頁頁面製作-第四篇

Step8

最後一步就是再確認此一連結模組(世新大學),是否已成功放置於首頁,若要再做一次設定,可以參考第一篇的[Step1]和[Step5]。

若是進入[前端]檢查網頁發現模組資料未建置成功時,可再返回後台重新放置一次。

◎以下再做叮嚀說明:

進入[首頁精靈]中做建置的設定,在最視窗左下方Add上頭找下拉式選單,按下倒三角形按鈕後,點擊[連結>世新大學](如圖中步驟1、2、3、4),最後再按下Add,即可完成啦!

clip_image001

 

◎若發現前端網頁的顯示畫面比例不對,就要返回後台調整[版面比例]唷!

請先到[首頁精靈]設定版面的比例,將[最左邊]的寬度設為100%],其餘中間與右邊的寬度比例皆為0%],設定完成後再按下[修改],才能完整儲存這次設定的內容哦!

clip_image002

 

※設定完成後,可以到[前端]檢查,看看首頁圖片名稱,與連結路徑等等,是否正確與順利唷!

clip_image003

※阿拉丁-手機瀏覽網頁頁面製作-第二篇

(PART-2)主題內頁建立

接下來我們要來學習建置重要的資料處理連結路徑囉!

請參考以下架構圖:

clip_image002

*路徑1:點擊連結→訊息或內容公告

第一個介紹的內容架構類型,就是單純的「連結點擊→出現訊息或內容公告」,通常是單一線性的資料呈現,一個標題/連結,來搭配一篇主要的內容(如下圖參考)。

clip_image004

繼續閱讀

YO!YO!輕鬆建置阿拉丁網站 3 哲學影音全記錄(2011年)

阿拉丁建網-初階、進階、美學

04月15日輕鬆建站哲學第一堂:《網站建置超Easy》

【課程資訊】

  • 講師:林頌旻 Ken
  • 時間:2011 / 04 / 15 下午 13:00~16:00 世界大樓 3 樓 W301 教室
  • 內容:阿拉丁網站基礎課程
  • 講義:點此下載
  • 影片:完整版(不分段)

04月20日輕鬆建站哲學第二堂:《進階阿拉丁讓網站犀利無法擋》

【課程資訊】

04月22日輕鬆建站哲學第三堂:《自建阿拉丁美學,創出MY風格》

【課程資訊】

  • 講師:林頌旻 Ken
  • 時間:2011 / 04 / 22 下午 13:00~16:00 世界大樓 3 樓 W301 教室
  • 內容:阿拉丁網站版型+外掛facebook、youtube..課程
  • 講義:點此下載