2016/12/15 網站建置、嵌入互動圖表

本周重點在於教導如何用WIX做出屬於自己的網站，在網站裡能夠放置自己的作品、宣傳理念，WIX幾乎是一鑑架站的好軟體！



先連上www.wix.com

• 進去WIX頁面後，點擊中間的Start Now進行註冊：

• 一開始先選擇你想建置的網頁類型（任選都可哦，跑出的模板不一樣）

• 點選右邊的 Start with WIX Editor 

• 挑選一個自己喜歡的網頁模版

• ■ WIX網頁的編輯界面
• 
  
• 「右上角」：
• Save（儲存目前修訂）、Preview（預覽目前編輯好的網頁）、Publish（發佈至網路）
• 
  
• 網站範例：

點選右上角的「Publish」即可發佈網頁內容，中間那條就是我們免費取得的網址。

在WIX編輯頁面中，下方這個「＋」可以針對選用的模板任意修改背景、文字（可輸入中文）、新增圖片、相片集、多頁の幻燈片、連結按鈕、一般色塊、線條、形狀塊、影片、音樂、社交軟體按鈕、聯絡表格、列表清單、部落格、WIX付費商店、HTML程式碼

其實「WIX編輯頁面中最重要的功能都在這邊了」。

• ■ 怎麼將 Piktochart 的圖表放入網頁，還能互動？
• 
  
• 要互動就是鑲嵌圖表程式碼就對了先點選編輯頁面中左邊的「＋」，最下面的 More 有個「HTML Code」的選項，點擊它！

接著會出現一個灰灰的 HTML Code 的盒子

開啟我們在 Piktochart 的圖表編輯頁面

點選右上角的「Share」，下方有一個 Embed Code，點它！！！！

於是乎，這張圖表程式碼就跑出來了，我們就是需要下面這段程式碼（如果覺得圖太大/太小，可以調整Width寬度與Height高度的數字）！

• 接著把這段程式碼複製，貼到剛剛從 WIX 中開啟的 灰灰 Code 盒子裡，按下Update按鈕。

具有互動性の圖表就跑出來了！（記得要把圖表四周範圍拉到最大最滿，圖表右方才不會出現捲軸）

• 點選右上角的「Preview」後就可以預覽互動式圖表，完成。

• ■ 怎麼把 Piktochart 的一串圖表分開？
• 因為 Piktochart 軟體中的一個專案（或一塊畫布）通常會分成很多塊，圖表生成程式碼並嵌入WIX網頁時，會把一整塊大畫布都輸進去，如果一次只想輸入一張圖，就要把它分成多個專案（或多塊畫布）

實例來了！

• （下面左側有個綠色數字1，代表畫布的第一個區塊）

• （下面左側有個綠色數字2，代表畫布的第二個區塊）
• 

• （下面左側有個綠色數字3，代表畫布的第三個區塊）

現在上面的三張圖表都還是在同一塊畫布上，

如果想要把圖表分開，就要開新畫布，一個畫布放一張圖！

記得！在開新畫布前，要先複製你要移轉的圖，所以如下圖先Copy那張圖表

接著在左上角的File中，點選Create New裡面的New Blank 

Canvas，開一個新專案（新畫布）

為它命名一下

新開畫布後，按下右鍵貼上你剛剛複製的圖表

確認只有一張圖表在這塊畫布上，再從右上角Share中生成程式碼，再丟進WIX裡HTML  CODE的灰色格子中！

• 
  
• 
  
• ■ WIX 要如何新增網頁編輯者？

• 先點選上面功能列表中的Site，再選 Site Manager

• 選擇最下面的「Roles & Permissions」

• 填入對方的Email，點選Send Invite，即可新增 Contributor （貢獻者）

這是本周所帶給大家的WIX軟體的大平台！一定要好好回家練習耶！

2016/12/5 視覺化概念

本周重點在於將數據「視覺化」，解釋一張易讀性高的圖表該包含哪些元素，以及如何用正確的圖表表達資訊。


→建議閱讀：性別暴力解碼計畫駭客松　goo.gl/fWNXUK

• 整理好數據，作圖前可以先參考這張建議圖：

　　

▲這裡提供大家一個超簡單的視覺化軟體─piktochart

→視覺化工具連結：https://piktochart.com


它能夠做資訊圖表、簡報、一般圖表、印刷品(海報)，進入網站登入後有許多模板可以選擇，為一成不變的報告增添不同樣態。

1. 點進去先從右上角的 Sign Up 註冊帳號



進去後可以任選模板。

左邊第一個Dashboard會顯示目前已哪些做過的成品。



左邊的 Infographics 是資訊圖表，有非常多模板可以直接套用



Printable 是可以到影印店或印刷廠實際印出的海報及報表尺寸。




選一個自己喜歡的，點選進去後會要等套件Loading完成（也要看網速），會先顯示Starting Up



工具：裡面有Charts、Maps、Videos



選擇左邊的Text ，可以新增不同字型的文字



Background 可以改變背景，除了選擇下面免費素材外，還可以在上方修改背景顏色，如果有自己喜歡的色票號碼，可以直接在框框內輸入。




Uploads 可以上傳自己的照片或圖片（免費版最多40MB）



Graphics 有不同的 圖型、ICON、相框可以選擇





在完成設計編排後，可以按下右上角的Download 開始「輸出」！
有粉紅Level Up字樣表示要付費才有的功能。

若免費版只能下載成圖片檔，畫質可以選Original（800 x 1813 px）、Medium（1200 x 2679 px）兩種。



也因為免費版的關係，它會有Piktochart 的浮水印（watermark）在你的作品的最下方（詳見下方的輸出作品）




除了輸出圖檔外，還可以變成程式碼，鑲嵌在你的網站或網頁裡

首先要點下右上角的 SHARE



由於它在一開始編輯時，是呈現未發佈的狀態，若要將作品變成程式碼的話需要先發佈到網路上，將這個作品集的名字取好後（60字元），點選Public，讓它公開！



點選之後，它會跳出一個警告提醒你，一旦發佈成Public後，就無法更改連結網址



點選OK後就發佈成功囉！



下來在下方會看到一個 Embed Code，請點它



這邊就會出現程式碼（藍色框起來的地方）
有程式碼的好處就是：今天把這些作品集放到網站上面，解析度不會因為上傳而壓縮變模糊，而是完整無損呈現，這樣就OK了！

以上是這周教導的視覺化軟體PiktoChart。

2016/11/21 利用google試算表函式處理數據

本周重點為利用google試算表裡的函式，將數據從網頁上抓下來，也可以將某特定數(平均數、總和)算出，以便製圖前獲取該有的材料。

※回顧上週：

1. tabula是針對「無法複製」的pdf檔而設計，推薦使用。

2.若專題的數據難找，建議可以先從新聞報導中的「資料來源」中獲得「原始資料」。

3.傳播與文化這門課是將有文化反堵概念的報導，以資料新聞學的方式呈現，內容含括數據及圖表。

→建議閱讀：

報導者─我住在全國最大污染場址旁、旗山找「碴」當農地變成掩埋場 - 報導者、

如何處理數據？

本次練習將數據放置在google試算表內，進行函示運算。

1.      利用函式將網路數據放進試算表

2. 開啟一個新的google試算表，至1-1格，輸入importhtml，依照指示將網址貼進格式內，完成了資料匯入。

3.  SUM(A:A) 可以將A範圍中的數據加總。

4. COUNTA(A:A) 可以計算出A範圍中的個數

5.UNIQUE(A:A) 可以計算出A範圍中不重複的項目，將以列表產生結果，也就是能將重複的數值省略，變成單一數值呈現。

記得看完要練習一下哦!