數位敘事工作坊 - 手把手教你做數位報導
==

###### tags: `淡江`

<div style="font-size: 40px; color: tomato;">https://reurl.cc/yZexl6</div>

## :hammer: 工具
* [Google My Map](https://www.google.com.tw/intl/zh-TW/maps/about/mymaps/)
* [Plot DB](https://plotdb.com/)
* [Infogram](https://infogram.com/)
* [Wix](https://wix.com/)

---

## :round_pushpin: 資訊圖表

### Google My Map - 口罩地圖

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D3SWLYCsAAPj5LuDyoPxnkqRJCFzNksn" width="100%" height="480" style="border:none;"></iframe>

資訊來源：[g0v - 口罩供需資訊平台](https://g0v.hackmd.io/@kiang/mask-info)

:::warning
:mega: GeoJSON 是一種對地理資訊結構進行編碼的格式
:::

GeoJSON 轉成 CSV 的 [線上工具](http://convertcsv.com/geojson-to-csv.htm)

:open_file_folder: [數據](https://docs.google.com/spreadsheets/d/1sucynsNC0Fm5DAEHxdXrQN6NAcOYwb1Z_CPeynYvJPo/edit?usp=sharing)

#### 流程：
* 資料整理
* 匯入至地圖
* 隱藏不必要欄位
* 更改地圖樣式
* 修改資訊
* 手動增加地點＆畫出區域

### Plot DB - 全球冠狀病毒確診地圖

<div style="width:100%"><div style="position:relative;height:0;overflow:hidden;padding-bottom:75%"><iframe src="https://plotdb.io/v/chart/24785" frameborder="0" allowfullscreen="true" style="position:absolute;top:0;left:0;width:100%;height:100%;border: none;"></iframe></div></div>

資訊來源：[Google Coronavirus Map](https://google.org/crisisresponse/covid19-map)

:open_file_folder: [數據](https://docs.google.com/spreadsheets/d/1d0Nq7mhVIQ09_6KP0rKke8DVWfvJR6btHQkNAJN4MBI/edit?usp=sharing)

:::warning
:mega: Google Sheet 合併兩表方法

=ArrayFormula(
   {
     工作表1,
     vlookup(識別欄位,工作表2,COLUMN(Indirect("R1C2:R1C"&COLUMNS(工作表2),0)),0)
   }
)

:::

### Plot DB - 全球確診、死亡、痊癒比例

<iframe src="https://plotdb.io/v/chart/24787" width="100%" height="600px" allowfullscreen="true" frameborder="0" style="border: none;"></iframe>

### Inforgram - 全球確診成長圖

<iframe src="https://e.infogram.com/509b2438-7fe3-48b2-908a-2c1db0167e42?src=embed" title="aaaaa" width="100%" height="599" scrolling="no" frameborder="0" style="border:none;" allowfullscreen="allowfullscreen"></iframe>

---

## WIX 網站建置

#### 網站架構：頁首、內容、頁尾
* 頁首：Logo、社群連結、分享
* 頁尾：copyright


:earth_africa: [範例網站](https://tiffk935.wixsite.com/0327)
:open_file_folder: [素材](https://drive.google.com/drive/folders/1rvR6tsVh7oNgEUYsz21FSbJcqEdn1Ok7?usp=sharing)

### :point_right: 背景
顏色/圖片/影片

### :point_right: 置頂頁首
logo：新增->圖片->我上傳的檔案
連結：網址->新視窗
置頂：右鍵->設定

### :point_right: 社群分享
新增->社群

### :point_right: 文字
新增->文字
加入動畫：滾動頁面至該位置時顯示的動畫

:::warning
:mega: **網站SEO優化技巧**
- 一個網頁裡一定要有一個「標題1」，並且包含關鍵字
- 其他從大項目到小項目的標題分別設定標題2~6
- 一般內文選擇「段落」
:::

### :point_right: 動態 Banner
帶狀圖片->經典->影片
延伸：設定成全螢幕寬
parallax 滾動式差

### :point_right: YouTube 影片
新增->影片->單一影片播放器->Youtube

> 「帶狀圖片」與「影片」的差別為
> 「帶狀圖片」的影片會自動播放，無控制列，並且為靜音狀態
> 「影片」有控制列，可選擇是否自動播放

### :point_right: 圖集
新增->圖庫

:::warning
:mega: **網站SEO優化技巧**
圖片檔案不要太大（小於 1 MB），電腦看看不出差別，太大或導致載入時間過長，使得google扣分
:::

### :point_right: 永遠在右下角的 Back To Top 按鈕
1. 加入 icon：新增->形狀->箭頭
2. 設定連結：網頁頂端/底部->頂端
3. 設定位置：右鍵->專貼至螢幕（釘選設定）

### :point_right: 嵌入 HTML
新增->更多->自訂嵌入->HTML iFrame

iFrame 語法：

<iframe width="" height="" src="..."></iframe>

:bulb: 可將 ==width== 設為 ==100%== 與容器同寬

### :iphone: 手機版
設定某些東西只顯示於電腦版或手機版
- 元件只顯示於電腦版：切換至手機版編輯模式，對該元件按右鍵->隱藏
- 元件只顯示於手機版：
- 切換至電腦版編輯模式
- 開啟 工具->屬性面板
- 點選該元件並在屬性面把「載入時隱藏」＆「載入時折疊」打勾

:::warning
:warning: 注意
- 置頂頁首要重新設定是否置頂
- 帶狀圖片的影片要重新設定自動播放
- [手機版無法設定釘選](https://support.wix.com/en/article/pinned-elements-in-the-mobile-editor)，可以改用 **行動工具**->**回到頂端按鈕** 代替
:::

### :+1: 搜尋引擎最佳化
選單和網頁->網站選單->搜尋引擎最佳化

### :100: 發布

### :boy::girl: 使用者行為追蹤 - Hotjar
- 讀者使用電腦＆手機的比例
- 從讀者操作中調整設計，例如：做了按鈕或連結卻沒人按，是不是位置或設計得不夠明顯？
- 讀者是否只看圖＆影片，不愛看字？圖文穿插比例如何拿捏？
- 從畫面停留的時間判斷出讀者可能有興趣的議題