成為前端工程師｜JavaScript 入門：帶你逐步培養網頁開發技能
104學習
JavaScript
這項技能是前端開發的核心語言，負責網頁互動效果和動態內容呈現。擅長此技能能讓你打造使用者體驗佳的網站和應用程式，並且與後端系統有效溝通。隨著單頁應用（SPA）和跨平台開發需求增加，具備此技能在職場上競爭力高，廣泛應用於網路公司、科技新創與數位行銷產業。掌握相關框架如React、Vue或Angular，更能提升就業及專案開發機會。
提升你的實力，朝專業更進一步
精選課程
充實自己，讓能力持續成長
成為前端工程師｜jQuery 入門密技，愉快打造互動式網頁不求人
成為後端工程師 | 踏上程式起點，逐步掌握 Java 語言特性與物件導向程式設計
學程式也能很好玩：不背語法寫Java
成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (上集)
JSP + Servlet | 吳永志Java Web 技術開發
成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (下集)
Cursor AI全端開發所：Java 網站系統獨立製作全攻略
【線上課程】 Python 基礎程式設計｜開外掛勇闖 Python 異世界
工程師救星-用Bootstrap速成響應式網頁開發
精選證照
考取專業證照，讓能力被市場看見
ITS JavaScript 程式語言核心能力
Information Technology Specialist（IT 資訊科技專家認證），簡稱 ITS，是Pearson VUE／Certiport 推出符合產業趨勢的初階資訊科技認證，涵蓋 IT 資訊技術、資料庫、軟體研發、新興科技四大領域，共十三個科目，透過 IT 資訊科技專家訓練課程，可驗證考生是否具備雇主所需的 IT 技能，幫助考生為未來職涯做好準備。
即使是國際性的專業認證、英文證書，但是在試題上可以自由選擇語系，因此，在國內的 ITS 認證考試亦提供有正體中文化試題，只要通過 Certiport 的認證考試，即頒發全球通用的國際性證書。
IT 資訊科技專家課程的目標對象為正在考慮或剛剛開始踏上資訊科技職涯的人士。考生能夠驗證他們在各個 IT 領域中的知識，其中包含軟體開發、資料庫管理、網路與安全、行動與裝置管理、程式開發、編程與代碼、雲端運算以及人工智慧。
Certiport
SSE Java程式語言國際認證
Java程式語言已經是目前欲進入資訊科技殿堂最重要的程式語言，也是最全方位的程式語言，目前大部分的網路應用程式、電子商務，人工智慧，跨平台開發、手機app開發等都是使用Java語言完成。掌握Java語言是軟體工程師最重要的技能。讓你在各個不同領域都能得心應手完成困難的工作。通過我們的認證，你將證明自己具備高人一等的Java語言開發能力。
Silicon Stone Education (SSE)
OCP Java Dev.
Oracle Java Developer (Java 語言開發人員) 是針對擁有Java開發技術的人員提供。以Java程式語言為開發工具，從事設計、製作與維護網際網路應用軟體，以及建立具動態特性的網頁。OCP Java Dev.證照，目前已停止發放。
Oracle
乙級電腦軟體設計技術士-Java
乙級為具備能從事程式設計、測試、維護及系統文件製作，並能協助甲級（帶領丙級）電腦軟體設計人員從事（進行）程式設計工作之能力。
勞動部勞動力發展署技能檢定中心
Adobe Photoshop
Adobe Photoshop是一個由Adobe Systems出品的專業影像處理軟體。跟公司的其它軟體一樣，Photoshop適用於Mac OS及Microsoft Windows兩個作業系統，同時公司也發布了Unix作業系統上的版本。
Photoshop主要處理以畫素（Pixels）所構成的數位影像。利用其廣泛的編修與繪圖工具，可以有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能，能讓使用者可以方便的測試效果。對各種濾鏡的支援更令使用者能夠輕鬆創造出各種奇幻的效果。目前，Photoshop 也正在被廣範地應用在網路影像處理。Photoshop的幾個後續版本中搭配了一個獨立的軟體ImageReady，其加強了Photoshop對網路影像（主要是GIF圖檔）的支援功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3以上版本允許使用者更新以容易操作的方式升級到最新的硬體平台。
Photoshop被大部份的人認為是最好的影像處理軟體，但與著名的3D Studio Max一樣，價格昂貴使其難以普及。這也令Jasc Software公司的Paint Shop Pro，GIMP小組的GIMP和友立資訊的Ulead PhotoImpact佔領了不少的市場佔有率。
Adobe
物件導向視窗及資料庫程式設計 (Java/C#/VisualBasic)
「物件導向視窗及資料庫程式設計」證照核心旨在驗證開發者融合物件導向理論、視窗圖形使用者介面與資料庫應用的綜合實務能力。不論使用 Java、C# 或 Visual Basic 語法，持證者皆具備利用類別與物件建構視窗應用程式的技術，並能熟練處理事件驅動程式設計。此外，持證者亦精通資料庫連線、SQL 指令操作及資料存取邏輯，具備將前台介面與後端資料庫無縫整合的關鍵職能，是企業評估現代視窗軟體開發與資料庫應用人才的專業客觀指標。
尚未查核發照單位
精選貼文，掌握第一手知識
前端工程師2025年必學技能清單：10大工具與技術指南，職場增能懶人包整理
前端工程師需要掌握的技能和專業涵蓋了多個方面(HTML、CSS 、 JavaScrip...等)，包括基礎的網頁開發知識、前端框架、以及與團隊合作的工具等。本篇文章將深入探討前端工程師必備的 10 大核心技能與工具，幫助您在職涯中站穩腳步，開發出高效且吸引人的網站與應用。
1. HTML、CSS 和 JavaScript
HTML: 用於結構化網頁內容，是前端開發的基礎語言。
CSS: 負責設計和佈局，使網站具有視覺吸引力。
Java Script: 增加互動性，處理用戶事件和動態內容。
⚡推薦課程⚡
成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (上集)
https://nabi.104.com.tw/course/tibame/f5b246b2-ec79-4f0d-8ef5-2fdf8d6f5bcb
成為前端工程師｜Java Script 入門：帶你逐步培養網頁開發技能
https://nabi.104.com.tw/course/tibame/830671fb-2c58-48fa-9a5a-6c1f1798598a
【更多課程學習】https://user266414.pse.is/6ps94k
2. 前端框架和庫
React.js: 一個用於構建用戶界面的 JavaScript 庫，能夠快速開發單頁應用（SPA）。
Vue.js: 一個漸進式框架，適合於小型到大型應用的開發。
Angular: 一個全面的前端框架，適合大型企業級應用。
Svelte: 新興的前端框架，以其高效的性能和簡化的開發體驗而受歡迎。
⚡推薦課程⚡
Let’s Vue! 前端開發入門到實戰
https://nabi.104.com.tw/course/tibame/ee965aa9-eb02-43d5-ae79-1dcd50f965dc
3. 版本控制工具
Git: 版本控制系統，用於跟蹤代碼變更，方便團隊協作。
GitHub 或 GitLab: 托管代碼庫，協作開發和版本管理的主要平台
⚡推薦課程⚡
Git 速成攻略：2.5 小時變身版本控制達人
https://nabi.104.com.tw/course/tibame/20a2bbd6-ee21-4d92-8899-18e59ea3b97f
AI助理GitHub Copilot | 提升前端開發效率
https://nabi.104.com.tw/course/tibame/c4795096-ae10-43a5-b5e3-2a6548c30e8c
GitHub Copilot AI賦能開發實戰訓練班
https://nabi.104.com.tw/course/tibame/2617c99d-b815-442d-89b4-aa35a360273a
4. 預處理與構建工具
Sass 或 Less: CSS 預處理器，能夠提高樣式表的可維護性和可重用性。
Webpack、Parcel 或 Vite: 模塊打包工具，用於優化資源加載、處理 JavaScript 模塊化等。
【更多課程學習】https://user266414.pse.is/6psa64
5. 響應式設計與跨平台兼容
響應式網頁設計: 掌握使用 CSS 媒體查詢（Media Queries）以適應不同屏幕尺寸的布局技巧。
跨瀏覽器兼容性: 確保網站在不同的瀏覽器（如 Chrome、Firefox、Safari、Edge）上的一致性。
⚡推薦課程⚡
RWD響應式網頁設計入門
https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8
工程師救星-用Bootstrap速成響應式網頁開發
https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8
6. 調試與測試
Chrome DevTools: 瀏覽器內建的開發者工具，用於調試 JavaScript、分析網頁性能。
前端測試框架: 如 Jest、Mocha、Cypress，用於自動化測試和單元測試。
7. API 與 AJAX 技術
Fetch API 或 Axios: 用於與後端服務進行 HTTP 通信，拉取數據或發送數據。
RESTful API 與 GraphQL: 理解如何與 API 交互並消費 API 提供的數據。
8. 設計工具和基礎設計原則
Figma 或 Adobe XD: 瞭解設計工具以便與設計師協作。
UX/UI 基礎: 基本的用戶體驗和用戶界面設計原則，確保設計既美觀又實用。
⚡推薦課程⚡
UI/UX 新時代指南：產品設計 x 商業思維 x AI 工具
https://nabi.104.com.tw/course/ppa/d9785ca3-7de2-4567-aae5-2c771a5471e8
UI/UX新手實務班｜UI介面設計，洞悉使用者體驗
https://nabi.104.com.tw/course/tibame/1550e806-07b1-49a2-a8e8-42668911d4ca
9. 性能優化
代碼分割與懶加載: 減少初次加載時間，提升網站性能。
圖片優化與資源壓縮: 優化圖片格式與大小，減少網頁加載時間。
10. SEO（搜索引擎優化）
理解基本的 SEO 概念，確保網站在搜索引擎中具有良好的可見度，包括結構化數據的應用和適當的標題標籤。
⚡推薦課程⚡
SEO搜尋引擎優化七大密技｜攻上頂端排名寶座
https://nabi.104.com.tw/course/tibame/b0d286b0-9106-406c-beff-c53918ab2270
具備以上這些技能，能幫助前端工程師在現代網頁開發中具備更強的競爭力與靈活性。
前端/後端/全端工程師的必備工具與證照有哪些?相關懶人包整理
前端工程師需要掌握的技能和專業涵蓋了多個方面，包括基礎的網頁開發知識（ HTML、CSS 和 Java Script）、前端框架（ React.js、Vue.js 和 Angular．．等）、以及與團隊合作的工具等。以下是前端工程師的必備技能清單：
前端工程師
必備工具：
⭕ HTML/CSS/Java Script: 這三者是前端開發的基礎技能，用於設計和構建網站的視覺層。
⭕ React、Vue 或 Angular: 主流前端框架，幫助開發者更有效率地構建交互式網頁應用。
⭕ Git: 版本控制工具，幫助團隊協作並管理代碼變更。
⭕ Webpack、Parcel: 模組打包工具，優化前端資源的加載和編譯。
⭕ Figma、Sketch、Adobe XD: 設計工具，與設計師溝通並將設計轉換成實際前端代碼。
推薦證照：
⭕ Microsoft Certified: Azure Developer Associate: 如在雲端平台上進行前端開發，Azure的證書會讓你對雲端部署有更深的理解。
⭕ Google Mobile Web Specialist Certification: 專注於前端開發的移動端最佳實踐。
⭕ Certified Web Professional - Web Developer: 國際網頁專業人士協會頒發，涵蓋網頁開發的核心技能。
相關課程推薦：
Let’s Vue! 前端開發入門到實戰
https://nabi.104.com.tw/course/tibame/ee965aa9-eb02-43d5-ae79-1dcd50f965dc
成為前端工程師｜Java Script 入門：帶你逐步培養網頁開發技能
https://nabi.104.com.tw/course/tibame/9e6b7b79-2849-4f24-80ef-a620b94471a5
第一次就上手，前端工程新手指南
https://nabi.104.com.tw/course/tibame/6e43b10e-45e7-40e2-92c0-1b4d6aeb955c
後端工程師
必備工具：
⚡ SQL（PostgreSQL、MySQL）及 NoSQL（MongoDB）: 數據庫管理技能是後端工程師的核心能力之一。
⚡ Node js、Python、Java 或 Ruby: 這些後端編程語言被廣泛用於構建伺服器端邏輯。
⚡ Docker、Kubernetes: 容器化技術和編排工具，用於構建、測試和部署應用程序。
⚡ RESTful APIs 和 GraphQL: 這些技術用於實現應用的後端與前端、第三方系統之間的通信。
⚡ CI/CD 工具: 自動化流程，確保代碼更快更安全地進入生產環境。
推薦證照：
⚡ AWS Certified Solutions Architect – Associate: 了解如何在AWS雲上設計和部署後端應用程式。
⚡ Microsoft Certified: Azure Administrator Associate: 若專注於Azure雲平台，這是不可錯過的證書。
⚡ Oracle Certified Professional, MySQL Database Administrator: 確保後端數據庫管理的穩定和高效運作。
推薦課程：
成為後端工程師 | 踏上程式起點，逐步掌握 Java 語言特性與物件導向程式設計
https://nabi.104.com.tw/course/tibame/c24de9ca-27e6-46cb-80f4-9d7b27d9ca47
全端工程師
必備工具：
🔵 HTML/CSS/Java Script + React/Vue/Angular: 熟悉前端開發工具與框架，確保網頁的視覺與交互效果。
🔵 Node js、Express 或 Django: 這些是全端工程師通常選擇的後端框架，用於建立伺服器端邏輯。
🔵 Git、GitHub: 版本控制與協作工具，用於管理全端工程中的代碼。
🔵 Docker、CI/CD 工具: 幫助全端工程師部署整體應用，確保端到端流程的流暢運行。
🔵 GraphQL、RESTful APIs: 掌握API設計，讓前後端溝通順暢。
推薦證照：
🔵 AWS Certified Developer – Associate: 強化在雲端上開發全端應用的能力。
🔵 Certified Full Stack Developer: Coursera或Udacity上的全端開發認證，涵蓋從前端到後端的各項技能。
🔵 Google Cloud Professional Cloud Developer: 若專注於Google Cloud，這張證書能幫助掌握雲端環境下的全端開發技能。
工具與證書是工程師專業技能的一部分。無論你是專注於前端、後端還是全端開發，選擇合適的工具、掌握相關技能並考取相關證書，都是提升專業能力和職業發展的關鍵。保持學習的動力，不斷提升自我，是在快速變化的技術領域中保持競爭力的必備條件。
前端/後端/全端工程師的必備工具與證照有哪些?相關懶人包整理
前端工程師需要掌握的技能和專業涵蓋了多個方面，包括基礎的網頁開發知識（ HTML、CSS 和 JavaScript）、前端框架（ React.js、Vue.js 和 Angular．．等）、以及與團隊合作的工具等。以下是前端工程師的必備技能清單：
前端工程師
必備工具：
⭕ HTML/CSS/JavaScript: 這三者是前端開發的基礎技能，用於設計和構建網站的視覺層。
⭕ React、Vue 或 Angular: 主流前端框架，幫助開發者更有效率地構建交互式網頁應用。
⭕ Git: 版本控制工具，幫助團隊協作並管理代碼變更。
⭕ Webpack、Parcel: 模組打包工具，優化前端資源的加載和編譯。
⭕ Figma、Sketch、Adobe XD: 設計工具，與設計師溝通並將設計轉換成實際前端代碼。
推薦證照：
⭕ Microsoft Certified: Azure Developer Associate: 如在雲端平台上進行前端開發，Azure的證書會讓你對雲端部署有更深的理解。
⭕ Google Mobile Web Specialist Certification: 專注於前端開發的移動端最佳實踐。
⭕ Certified Web Professional - Web Developer: 國際網頁專業人士協會頒發，涵蓋網頁開發的核心技能。
相關課程推薦：
Let’s Vue! 前端開發入門到實戰
後端工程師
必備工具：
⚡ SQL（PostgreSQL、MySQL）及 NoSQL（MongoDB）: 數據庫管理技能是後端工程師的核心能力之一。
⚡ Node js、Python、Java 或 Ruby: 這些後端編程語言被廣泛用於構建伺服器端邏輯。
⚡ Docker、Kubernetes: 容器化技術和編排工具，用於構建、測試和部署應用程序。
⚡ RESTful APIs 和 GraphQL: 這些技術用於實現應用的後端與前端、第三方系統之間的通信。
⚡ CI/CD 工具: 自動化流程，確保代碼更快更安全地進入生產環境。
推薦證照：
⚡ AWS Certified Solutions Architect – Associate: 了解如何在AWS雲上設計和部署後端應用程式。
⚡ Microsoft Certified: Azure Administrator Associate: 若專注於Azure雲平台，這是不可錯過的證書。
⚡ Oracle Certified Professional, MySQL Database Administrator: 確保後端數據庫管理的穩定和高效運作。
全端工程師
必備工具：
🔵 HTML/CSS/JavaScript + React/Vue/Angular: 熟悉前端開發工具與框架，確保網頁的視覺與交互效果。
🔵 Node js、Express 或 Django: 這些是全端工程師通常選擇的後端框架，用於建立伺服器端邏輯。
🔵 Git、GitHub: 版本控制與協作工具，用於管理全端工程中的代碼。
🔵 Docker、CI/CD 工具: 幫助全端工程師部署整體應用，確保端到端流程的流暢運行。
🔵 GraphQL、RESTful APIs: 掌握API設計，讓前後端溝通順暢。
推薦證照：
🔵 AWS Certified Developer – Associate: 強化在雲端上開發全端應用的能力。
🔵 Certified Full Stack Developer: Coursera或Udacity上的全端開發認證，涵蓋從前端到後端的各項技能。
🔵 Google Cloud Professional Cloud Developer: 若專注於Google Cloud，這張證書能幫助掌握雲端環境下的全端開發技能。
工具與證書是工程師專業技能的一部分。無論你是專注於前端、後端還是全端開發，選擇合適的工具、掌握相關技能並考取相關證書，都是提升專業能力和職業發展的關鍵。保持學習的動力，不斷提升自我，是在快速變化的技術領域中保持競爭力的必備條件。
相關課程推薦：
Let’s Vue! 前端開發入門到實戰
1234
一頁式網站是什麼？一頁式網頁設計優缺點與費用解析
很多人的第一個網站是被一則廣告逼出來的。點進一個連結，畫面一路往下滑，商品或方案從頭講到尾，滑到底的時候旁邊跳出填寫框，人就順手把手機號碼留了下來。整個過程沒有換過頁面，也沒有點過任何選單。這種把一件事從頭講到尾的頁面，就是一頁式網站（One Page Website），也有人說一頁式網頁、單頁網站。
它聽起來像一句行銷話術，其實是很樸素的工具：把該說的資訊排成一條動線，讓人不用自己找路。下面把一頁式網站能做的事、不能做的事，以及我們實際做過的幾種型態講清楚，幫你在決定花錢之前，先想明白自己到底需不需要。
一、一頁式網站是什麼
一頁式網站的全部內容都在同一個網址裡。首頁上方有主視覺和一句主打的話，往下依序排服務介紹、案例、價格、常見問題，最後放聯絡表單。頁面頂端通常會留一個選單，點了不會跳到別的頁面，而是往下滑到這一段。這種跳法叫錨點跳轉，是長頁能讀得下去的前提。
和多頁式網站比起來，差別在資訊的位置。多頁式網站把公司介紹放在「關於我們」，產品放在「產品專區」，案例放在「案例分享」，訪客要自己點進去找；一頁式網站把這些東西排在一起，順序由你決定。訪客的差別是，前者要做出選擇，後者只要一直滑。
順帶講一個常被混用的名詞。Landing Page（著陸頁）講的是位置，也就是「訪客從廣告點進來後抵達的那一頁」；一頁式網站講的是形式，也就是「這頁總共只有一頁」。位置和形式是兩件事，一頁式網站可以當著陸頁用，你官網裡的某一個服務頁也可能是著陸頁，只是它不是單頁。
同場加映：月光創意另寫了一篇一頁式網站與 Landing Page 中文意思的完整版文章：https://www.moon-d.com/blog/one-page-website.php
一頁式網頁設計這幾個字在業界被使用得很寬鬆，實際上做的事情差很多。有的是把公司現有的簡介貼成一頁，動一下滑就到底；有的是花時間重新安排內容節奏、處理視覺階層、把表單和追蹤都接好。兩者外觀看起來都像一頁式網站，做出來能不能用，是兩回事。
二、你到底該不該做一頁式網站
在動工之前，先回答五個問題，問完大概就有答案了。
第一，你的網站要回答的問題是不是只有一個？「我們做什麼、為什麼值得信、要怎麼找我」，三句話講完就沒了，適合一頁式。如果對方會問到你沒做的部分，例如各項方案的差異、服務據點、維修收費、多年案例，那就需要多頁式。
第二，商品或服務的數量是不是收斂的？一個課程、一檔新商品、一次促銷、一項專業服務，都是好例子。整間公司二十條產品線擺進一頁，會變成一張沒人想讀的清單。
第三，你的流量從哪裡來？如果主要靠 Google 自然搜尋，建議直接跳過這個選項，理由下一節會說明。如果是投廣告、發社群、寄電子報、印在名片或 DM 上讓人掃碼，流量來源集中在一兩個地方，一頁式非常合用。
第四，內容會不會一直長下去？每月都要新增文章或案例的網站，單頁結構會很快撐不住。反過來，內容穩定、期數固定的頁面，用一頁式最省事。
第五，你要訪客做的動作是同一件事嗎？「填表預約」是，「填表之後還要選加購、加入會員、下載應用程式」就不是。一頁式的力量來自專心，如果頁面上同時有六個按鈕要人選，等於把難度還給了訪客。
五個問題裡，只要「要做 SEO」或「服務項目很多」任一成立，就該認真考慮多頁式。其餘都偏向可以使用一頁式網站。
三、一頁式網站的好處
動線短，是最實在的一項。訪客從點進來到按下送出，中間沒有換頁、沒有開新視窗、沒有回到上一頁找路。每多一個跳出點，就多一次放棄的機會，尤其是手機上。表單放在頁尾，不代表它一定被填，但它至少在視線內。
手機閱讀友善是另一個好處。現在多數人上網的動作就是滑，滑這個動作不需要學習，也不需要等頁面載入。一頁式網站的節奏本來就適合手機，設計時把手機版當主版本就好，不會出現「桌機版很好看，手機版擠成一團」的窘況。
製作快，後續修改也單純。頁面只有一個，東西要改就是改那一處，不會出現「首頁改了，內頁沒改」的情況。對只有一兩個人要維護的團隊來說，這點很實際。
還有一個比較少被講的好處：訊息會被迫一致。當你只有一個頁面可以放內容，產品文案、服務說明和價格就不容易各說各話。資訊一集中，矛盾的地方反而會自己浮出來。
四、缺點，以及最常見的三個誤區
第一個誤區是「一頁式網站也能做 SEO」。實情是它先天吃虧。所有主題共用一個網址，等於只有一個標題、一組網頁描述可以寫。你想同時被「XX 室內設計」「XX 維修」「新北 裝修推薦」找到，需要的是多個頁面各自對應一個搜尋意圖，單一長頁做不到。這不代表一頁式網站完全不會被搜尋到，而是它很難成為自然流量的主力。若網站存在的目的就是讓不認識你的人從 Google 找到你，請把預算留給多頁式。
第二個誤區是「只有一頁，所以便宜」。頁面數量不等於工作量。訪談、文案、圖片、影片授權、響應式適配、表單串接、追蹤設定、測試與上線，每一項都跟頁數無關，還常常是一頁式專案最花時間的部分。真正會讓報價拉開差距的，是這些工作有沒有被認真做。
第三個誤區是「看起來比較有規模」。這正好講反了。在金融、醫療、法律、上市上櫃這些產業，一頁式網站常被讀成小公司、沒制度、隨便做做。所以這類客戶通常會把一頁式網頁用在活動或產品募資上，正式的企業形象還是做多頁式官網。
還有幾個實際限制要知道。所有東西共用一個網址，之後想分析「哪一段的訪客最多、哪一段開始離開」，資料會比較難拆解。滑完就走的人很多，又沒有其他頁面可以逛，跳出率看起來會偏高，拿它跟多頁式官網直接相比沒有意義。頁面拉得太長也會有後果：圖片太多會拖慢載入，區塊順序亂會讓人滑到一半就放棄。一頁式能塞多少字，最後是由訪客的耐心決定，跟版面空間無關。
五、我們做過的三種一頁式網站
講完道理，換三個我們真的做過的案子，差別會比較清楚。
第一個是金融投信推出的黃金礦業 ETF 募集頁。這種頁面要在很短的時間內讓投資人相信這檔標的值得研究，所以視覺走黑金路線：深色岩質底襯出金色的光澤，標的代碼用大字級的金屬質感字型放在第一眼的位置，資訊則用比較克制的排版往下列。重點不在裝飾，而在於把「這是什麼」和「我要做什麼」分開處理。頁面右側做了懸浮的快捷工具列，申購單與銷售機構的入口一直掛在畫面上，訪客不論滑到哪一段都能立刻行動，不必回頭找。
第二個是電商通路品牌的活動頁，背景是一整檔檔的促銷套組。這種頁面最怕滑到底還是不知道要買哪一組，所以節奏比資訊更重要。做法上，讓背景的雲朵與愛心有呼吸感的微動態，商品和「立即購買」按鈕在滑入時做漸顯與微幅放大，讓「點這裡」的手感成立；影片與底部按鈕的切換也刻意調過節奏，避免看起來像被塞進去的廣告。這種頁面沒有太多字，設計的任務就是讓手指繼續往下滑。
第三個是醫療健檢中心的一頁式官網。這個型態真正的難題是信任，視覺只是外層。健檢是低頻、高單價、又牽涉身體的消費，訪客在意的是項目內容、檢查流程、院所環境、醫師陣容與預約方式。這頁的排法是照著看診的順序走：健檢項目與差別、流程說明、環境照片、醫師介紹、費用與預約入口。資訊夠完整，信任感才有地方生出來；這也是為什麼它不能只做漂亮，內容深度得跟上一頁。
三個案子擺在一起，同一種形式的側重點可以差很多。募集頁要的是權威感與行動捷徑，活動頁要的是節奏與衝動，官網要的是資訊完整與可信度。動工前先決定這一頁要說服誰，設計才有依據。
六、從想法到上線的流程
第一步，寫出一句話說明這頁要對誰說什麼。如果這一句話需要三個不同的受眾、五項服務和四種行動才能講完，問題不在頁面太短，在於任務還沒拆開。
第二步，排區塊順序。順序要照訪客的疑問走，不照公司的組織圖。訪客通常先問「這是什麼」，再問「跟你競爭的有什麼不同」，然後才問「要多少錢」「怎麼找你」。誰先誰後要想清楚。
第三步，備素材。文字、照片、影片、標誌、價格與常見問題，缺一項就會在製作階段卡住。照片建議一次備齊同尺寸，影片要先確認長度與比例。這一步沒做，後面會一直等。
第四步，決定誰做。這是整個流程裡最關鍵的一個決定，下一節會講。
第五步，驗收，而且用手機驗。檢查項目不多：首屏的主張和按鈕有沒有被蓋住、表單能不能真的收到、頁面在慢速網路下會不會卡、每張圖片有沒有替代文字、按鈕點下去有沒有被記錄。這五項沒過，不要上線。
七、自己做，還是找人做
誠實講，一頁式網站確實有免費工具能用。個人作品集、履歷、單一課程的招生頁、一次性的活動，這些用現成平台或自己動手做得又快又省錢，這點不用否定。
撐不住的情況是另一種：頁面要自己長期更新、要在上面賣東西、要能被 Google 找到、要代表一家有規模的公司、還要在手機上又快又穩。這種情況自己做的成本通常比想像中高，因為時間會卡在你根本不熟的地方，美化反而不是瓶頸。
我們（月光創意網頁設計）做的是後半段：客製化的一頁式網頁設計、響應式適配、把內容節奏重新排過、表單與系統串接、追蹤設定，以及最重要的——上線之後還可以繼續幫你改內容、追蹤數據並調整。這種頁面最好在規劃階段就把後續維護一起談掉，因為一頁式網站的內容要更新，沒有後台可以靠就會變成一份靜態文件。
八、常見問題
一頁式網站等於著陸頁嗎？
不對等。著陸頁描述的是訪客從哪裡進來，一頁式網站描述的是頁面有幾頁。前者可以有多頁，後者只有一頁。
一頁式網站能放多少商品？
沒有固定數字，判準是「滑到底還願不願意讀」。實務上把十來件、差異明確的商品放在一頁是讀得完的，數量再往上，建議改用多頁式加上分類。
做一頁式網站還需要做響應式嗎？
需要，而且建議直接以手機版為主版本再放大到桌機。絕大多數訪客是拿手機進來的，先做桌機再等比例縮小，字級和間距會一直卡住。
之後想擴充成多頁式，可以嗎？
可以，但成本不等於把頁面切開。內容重新歸類、導覽重新設計、網址與標題重新規劃都要重做。所以如果本來就預計三年內會擴充，一開始就做多頁式比較省。
九、如果還在猶豫怎麼開始
一頁式網站能不能用，取決於你的內容能不能收斂成一條線。收斂得了，它是最省力的做法；收斂不了，多花時間做也只會得到一張很長的網頁。
如果你手上的素材很多，卻不確定該排成活動頁、募集頁還是一頁式官網，可以先看月光創意整理的「一頁式網站完整指南」： https://www.moon-d.com/blog/one-page-website.php
裡面把一頁式網站的定義、與 Landing Page（著陸頁）的差別、優缺點、設計原則、報價行情與免費平台比較整理成一頁，也放了可互動的範例，建議直接存起來。
歡迎直接帶著你的需求來聊，我們會先幫你確認這一頁該不該做成一頁式。
月光創意網頁設計：https://www.moon-d.com/
🔥 社群防呆包：拯救小編智商，薪水翻倍爽漲！
【 J 篇：20 個 J 開頭術語一次搞懂！】
J 字頭術語不多，但每一個都很「聚焦」，
不管是 JavaScript、JPEG 還是 Journeys，
你不懂，它們照樣搞死你！
🤯「JavaScript 又壞了？那關我什麼事我只是小編！」
😅「JPEG 傳上去畫質爆掉怎麼辦？」
今天 Steven 小編就來幫你破解這些少數但常見、常踩雷的 J 字頭術語！
📌 建議收藏＋貼給那位還在用 800KB JPEG 當主視覺的社群菜鳥！
🚩【 J 篇 】數位社群行銷術語防呆包
01. JavaScript（JS）
👉 讓網頁會動的程式語言，小編不會寫，但它壞了全案 delay。
02. JPEG（圖檔格式）
👉 壓縮後輕巧方便，壓過頭畫質像馬賽克，小編壓力也同步模糊。
03. Jargon（術語行話）
👉 老闆每句話都夾雜三個，小編只想默默 Google 翻譯。
04. Journey Mapping（用戶旅程圖）
👉 畫出使用者互動路徑，看起來超專業，但誰能幫小編畫出口？
05. JSON（JavaScript Object Notation）
👉 資料交換格式，小編永遠只會 Ctrl+C + Ctrl+V，希望別錯。
06. Jump Rate（跳離率）
👉 用戶一進網站立刻跳出＝你的內容真的無法留下人。
07. Job Title Tagging（職稱標籤）
👉 廣告受眾設定時的秘技，想找 HR、CEO？靠這招！
08. Journeys（自動化流程）
👉 EDM 的自動排程邏輯設定，小編設完後就要開始祈禱。
09. Join Rate（加入率）
👉 活動或名單成長的關鍵指標，低到爆時只想裝死。
10. Jingle（品牌配樂）
👉 三秒洗腦旋律讓人記住品牌，但預算高到只能在夢裡聽。
11. Java（不是咖啡）
👉 常跟 JavaScript 搞混的程式語言，小編只想跳過它。
12. Just-In-Time Content（即時內容）
👉 熱點來就衝文，來不及想創意只好交給迷因。
13. Jump Link（錨點連結）
👉 點一下自動跳到頁面某處，操作好用，設錯位置會引起暈眩。
14. Jitter（網路延遲抖動）
👉 直播 lag 爆時小編最常被問：「是不是你 Wi-Fi 壞了？」
15. Job Scheduler（任務排程器）
👉 自動化貼文工具排程的底層技術，壞了就變成小編手動地獄。
16. Junk Traffic（無效流量）
👉 數字好看但沒轉換，老闆高興兩秒後就質疑你買假粉。
17. Jump Cut（影片剪輯跳接）
👉 小編剪片省時大法，跳得好叫節奏，跳太快像鬼片。
18. Joomla（網站內容管理系統）
👉 和 WordPress 差不多的東西，但工程師聽了都沉默。
19. Java Applet（舊世代網頁小程式）
👉 現在已經不流行了，但如果你還看到＝你該更新網頁了。
20. Justification（文案合理化）
👉 客戶永遠要你解釋為什麼這樣寫，寫得太有創意反而要被審問。
💬 還有什麼 J 字頭的術語你想補充？
歡迎留言，小編幫你一起收錄進防呆包！
#社群防呆包 #小編智商救援計畫 #數位社群行銷術語A到Z #Steven數位社群行銷研究室
ChatGPT可以轉檔JPG、Word、PDF嗎？讓AI一站式解決20種轉檔任務
想把圖片如PNG、JPG轉成其他格式，或把Word等文字檔案轉檔，或將PDF合併成報告，這些瑣碎的任務能用AI完成嗎？解析如何透過ChatGPT等AI工具，一站式完成Word、JPG、PDF、Excel等多達20種轉檔任務，無需再依賴多款軟體，節省大量時間與精力，讓AI成為你的最佳工作助手！本文節錄自《30個必學的AI行政工作術》。
文／賴彥廷
本文目錄（點擊可快速前往）
讓AI幫你轉檔！ChatGPT一站式處理轉檔工作【STEP 1】快速掌握20種ChatGPT轉檔功能問題：ChatGPT可以轉檔影片嗎？【STEP 2】設計ChatGPT轉檔指令3大重點【STEP 3】出現缺頁或文字亂碼？讓ChatGPT修正錯誤【STEP 4】下載檔案【技巧升級】快速下載多個檔案的訣竅
在工作中，你是否經常需要做各種「轉檔」工作？早已準備好多款不同的應用軟體，還是每次遇到問題才急急忙忙尋找線上工具？
轉檔是職場生活中既不起眼又耗時的繁瑣事務。舉例來說，把多份PDF檔案合併成完整報告，或是將圖片轉換為指定格式。
雖然市面上有不少線上工具可以處理這些任務，但真正的麻煩在於，我們必須適應多種軟體，才能應付五花八門的轉檔任務。
試想一下，PDF合併需要一種工具，照片格式調整用另一種，至於影片處理、錄音格式轉換，甚至將網址製作成QR Code，都需要用不同的軟體來處理。更麻煩的是，找到操作簡單、功能強大的工具往往需要花不少時間試用和篩選。
如果能有一個「一站式」工具解決大多數的轉檔工作，省去來回切換軟體的麻煩，那該有多好！
讓AI幫你轉檔！ChatGPT一站式處理轉檔工作
ChatGPT在文案寫作、圖像生成、程式碼撰寫等方面的表現令人津津樂道，但它還有一個較不為人知且相當實用的功能：「轉檔」。
ChatGPT轉換多種不同類型檔案格式的品質都很好，有了它幫忙，我們就不必在各種軟體之間疲於奔命了！
【STEP 1】快速掌握20種ChatGPT轉檔功能
轉檔工作雖然不起眼，卻幾乎無所不在。無論是將文件轉換成適當的格式備份，還是將數據轉為兼容格式以供特定軟體處理。
此外，檔案的分割與合併也是常見的行政工作。在這些瑣碎繁雜的工作項目上，ChatGPT能幫上忙的地方比我們想像中更多。
以下列出7大類、超過20種轉檔相關的任務情境，每一項ChatGPT都能迅速完善地交付成果。
ChatGPT轉檔轉檔任務情境文字檔案轉換● Word檔案（.docx、.doc）、純文字文件（.txt）以及Markdown文件（.md）相關的檔案格式轉換。數據資料檔案轉換● Excel 檔案（.xlsx、.xls）、CSV 檔案（.csv）、JSON格式以及XML格式相關的檔案類型轉換。圖片檔案轉換● JPG、PNG、BMP等圖片檔案的格式轉換。PDF檔案分割與合併● 依照特定頁數範圍分割。● 奇數頁偶數頁分別獨立存放。● 單獨提取特定頁數。● 將多份檔案合併為一份。音訊檔案轉換、分割與合併● 不同音訊檔案（.mp3、.wav、.flac）的格式轉換。● 將一份音檔按照指定的時間區段，分割為幾個獨立的檔案。● 合併多份音檔。影片檔案分割與合併● 將影片檔案（.mp4、.avi、.mov、.mkv）按照指定的時間區段，分割為數個小片段。● 按照指定的檔案大小分割。● 將多段影片拼接成一個完整的影片。其他實用功能● 將彩色圖片轉換為灰階。● 圖片尺寸縮放。● 在圖片上套用簡單的濾鏡效果，比如復古風格或是負片效果。● 在圖片上的特定位置添加浮水印或是時間戳記。● 根據指定的排列方式，將多個圖片合併為一張圖。● 壓縮圖片以降低檔案大小。● 將網址製作成QR Code。
問題：ChatGPT可以轉檔影片嗎？
看完以上五花八門的功能或許有人會好奇：ChatGPT可以圖片轉檔，音樂轉檔，但是沒辦法將影片轉檔嗎？
答案是可以，但是失敗率高，限制也多。
原因在於影片的檔案容量通常比較大，轉換過程更為複雜又耗時，在處理中常常因為時間限制或網路不穩定，導致轉檔中斷而失敗。
根據經驗，目前ChatGPT只適合處理容量小、時間短的影片轉檔工作（分割與合併功能則不在此限），但相信AI科技一日千里，未來用ChatGPT處理幾小時長的影片不會是夢。
介紹完ChatGPT擅長的轉檔工作之後，接著就要設計指令囉！
【STEP 2】設計ChatGPT轉檔指令3大重點
工作上轉檔有很多情況，對ChatGPT下的指令也會各不相同。整體來說，轉檔指令可以簡化為3個重點：「輸入什麼、設定條件、輸出什麼」。
以切分一個PDF檔案為例。
輸入什麼：這份PDF檔案。
設定條件：照著1-5頁、6-10頁、10-15頁的順序分割。
輸出什麼：3份檔案。
將這3個重點整合成一段話就是：「請將這份PDF檔案依照1-5頁、6-10頁、10-15頁的順序，分割為3份獨立的檔案。」
透過這樣的方式，我們就能快速將工作需求轉為ChatGPT可以理解的指令，不必多費心力來思考指令該怎麼寫。
值得一提的是，如果要同時處理多份檔案，例如合併好幾份PDF文件，該如何告訴ChatGPT誰在前、誰在後呢？
這裡有個實用小技巧：「將每個檔案的名稱改為數字」，就能直接用數字檔名告訴ChatGPT排列順序囉！
【STEP 3】出現缺頁或文字亂碼？讓ChatGPT修正錯誤
如果發現轉檔後的檔案出現缺頁或是文字亂碼等錯誤，只要請ChatGPT重新處理一次即可排除問題。
舉例來說，近期ChatGPT處理JSON與XML兩種資料格式時，比較容易出現中文字亂碼。這時候我們可以輸入指令：「請修正這份檔案的中文編碼問題，並確保所有資料按照正確的格式顯示」，ChatGPT就會自動修正錯誤。
【STEP 4】下載檔案
轉檔完成後，點擊ChatGPT提供的下載連結，就能儲存檔案。
唯一要注意的是，下載連結有時效性，最好立刻將檔案儲存到自己的電腦。連結若是逾期失效，轉檔成果都會付諸流水！
【技巧升級】快速下載多個檔案的訣竅
當我們連續處理了好幾個轉檔，ChatGPT生成許多不同的下載連結，如果想簡化下載步驟，我們可以告訴ChatGPT：「將所有成果打包成壓縮檔」，就不需要手動下載多個檔案，省了許多麻煩。
節錄自：商周出版《30個必學的AI行政工作術：搞定會議、行程、簡報、文書、圖表、影音、資料庫，事半功倍，準時下班！》／賴彥廷 著
更多【AI工作術】推薦給你：
4步驟學會運用AI關鍵能力！16種AI工具應用解析｜行銷策略指令範例
用AI快速寫Email！ChatGPT Writer、Copilot等中英文電子郵件生成
ChatGPT一鍵生成簡報！Slides Maker讓AI幫你快速做完整簡報
會議紀錄用AI怎麼做？會議逐字稿如何整理？｜AI語音轉逐字稿教學
用ChatGPT準備面試練習！AI履歷撰寫和模擬面試必學指令
軟體業Technical Writer工作在做什麼？技術文件為何不是由PM寫？
軟體產業的Technical Writer工作在做什麼？和PM產品經理工作有什麼差異？Technical Writer職位結合「內容寫作」和「技術寫作」的專業，可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術＋商業內容。本文作者以自身經驗分享，解答包括Technical Writer工作內容及為什麼不由PM來寫技術文件。
文／朱麒
本文目錄（點擊可快速前往）
1. Technical Writer到底要幹嘛？2. 為什麼需要Technical Writer？3. 為什麼不由PM來寫技術文件？
我曾經擔任PM將近6年的時間、在新職位—Technical Writer工作也已經快9個月的時間，這篇文章想分享關於「寫文件」這件事情。
一開始有許多朋友和我討論說「為什麼不交給PM做就好？」在親身體驗與想過之後，我發現這兩者的定位與價值是完全不同的。這篇文章分享Technical Writer在做些什麼，以及簡單比較跟「產品經理（Product Manager）」的差異。
如果你對軟體產業有興趣、正在當PM的人、或是潛在想當Technical Writer的人看（有這樣的朋友嗎），一起來看看這篇文章吧。
備註：請留意此篇文章的脈絡都是以「軟體開發」的角度來談。
1. Technical Writer到底要幹嘛？
簡單說，就是替公司的產品寫一份「攻略本」。
攻略本是電玩產業的詞，能幫助新手玩家快速學會操作方法、了解遊戲目標，接著就可以比較開心的在遊戲的世界中玩耍。
而「技術寫作（Technical Writing）」就是替公司的產品寫使用文件，用來引導消費者更好地使用公司產品。技術寫作也可以視為公司品牌、產品使用體驗的一環，能影響消費者對於公司產品的整體觀感。
這就像「攻略本」會先告訴新手玩家基本的操作方法，讓玩家在別在超大的遊戲世界中不知所措的亂跑、被怪打死而感到挫折（可能一開始連「基礎戰鬥知識」都沒有就跑出新手村）。
好的技術文件，應該能夠把公司產品複雜的功能與規格，在適當的時間點、用適當的方式告訴使用者。
2. 為什麼需要Technical Writer？
對呀，為什麼不由最熟悉產品功能與規格的程式開發者或產品經理，來寫技術文件就好了呢？
先從「軟體開發者」的角度來說。由於技術文件（例如API Documentation）是技術含量相當高的文件，最好的寫作者當然是由開發者來寫。
然而多數的開發者在寫文件的時候，容易從非常技術的角度撰寫文件—多數狀況是「只解釋程式功能，但不解釋程式對於使用者的目的」。由於程式往往有自己的商業邏輯（例如建立訂單的流程、訂單對帳與請款的方式），使用者在不清楚商業邏輯的前提下直接閱讀，往往一頭霧水。
因此Technical Writier誕生了，這個職位結合「內容寫作（Content writing）」和「技術寫作（Technical Writing）」的專業，可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術＋商業內容。
Technical writer像是一位翻譯員，要把「技術」國家的語言翻譯給「商業」國家的人理解。
3. 為什麼不由PM來寫技術文件？
行行好，放過PM吧！
PM的工作包山包海，要跟業務單位／客戶對需求、花時間整理規格、跟設計師／工程師／QA／營運團隊溝通。
PM職責範圍確實也包含寫產品的規格與規劃，例如：
使用者故事（User Story）： 即 As a（使用者）, I want（做什麼事情）, so that（得到什麼成果），讓產品團隊理解每個功能為誰而做、要做什麼、做完成果。
User Story Acceptance Criteria Test Cases：寫完User Story後，必須要進一步描述這個功能的細節，透過「Given（在什麼情況下），When（當使用者做了什麼），Then（會發生什麼事情）」才能讓工程師與QA（測試工程師）執行。
Product Roadmap：告訴C字輩的老闆接下來的產品發展，這一季要做什麼、為什麼要做、要打哪些用戶、如何衡量成效、成效好與不好的相對應措施是什麼。
可以看到，PM的寫作文件通常是「對內」，告訴團隊接下來要做些什麼、不做些什麼；但Technical Writer通常是「對外（外部使用者）」，告訴使用者產品從哪裡開始用、要完成對應的事情該怎麼做、技術細節要到哪裡去查……等。
PM和Technical Writer的技能樹不同，前者更多在溝通、後者更多在引導。更多文章分享，可至「朱騏部落格」閱讀。
（原文標題：軟體產業中的 Technical Writer 在做些什麼，為什麼「寫文件」這件事情不都交給 PM 做就好？）
[joblist_plugin title='更多104【Technical Writer】工作機會' url='https://www.104.com.tw/jobs/search/?keyword=Technical%20Writer' amount='4']
軟體工程師技能找工作
點擊技能可到對應的職缺工作區
PHPJavaPythonJavaScriptNode.jsHTMLCSSSassLinuxGitMySQLCC++SQLAngularRXcodeReactJSVueGolang程式語言找工作
PHP工作機會
[joblist_plugin title='【PHP】精選職缺' url='https://www.104.com.tw/jobs/search/?jobsource=blog_skill&mode=s&page=1&keyword=PHP&order=15' amount='4']
Java工作機會
[joblist_plugin title='【Java】精選職缺' url='https://www.104.com.tw/jobs/search/?jobsource=blog_skill&mode=s&page=1&keyword=Java&order=15' amount='4']
軟體工程師薪水找工作
月薪5萬月薪6萬月薪7萬月薪8萬年薪100萬待遇面議
ChatGPT生成Apps Script程式碼4技巧！Google Sheets自動化範例用AI加持
想把重複的Google Sheets試算表工作自動化，用ChatGPT就可以快速生出可用的Apps Script程式碼，相較於手動編寫、錄製巨集，使用生成式AI的技術門檻最低！作者分享2個範例，並提醒用AI生成Apps Script程式碼的Prompting技巧。本文節錄自《AI 加持！Google Sheets 超級工作流》。
文／杜昕 Mic Tu
本文目錄（點擊可快速前往）
撰寫Apps Script程式碼的3種方式使用生成式AI生成Apps Script程式碼▶ 範例1：資料統計▶ 範例2：生成圖表用AI生成Apps Script程式碼的Prompting技巧
Google Apps Script（以下簡稱Apps Script）是一個強大的雲端腳本語言，讓使用者能透過類似JavaScript的程式碼整合Google的試算表、文件、簡報、日曆等功能，自動化重複性的工作，完全免費且不需要安裝任何開發環境即可完成。
若要在Google Sheets中使用Apps Script，只要點選「擴充功能 → Apps Script」進入Apps Script的編輯器介面，便能開始撰寫程式。
撰寫Apps Script程式碼的3種方式
撰寫Apps Script程式碼的方式可分成手動編寫、錄製巨集、使用生成式AI 3種，優缺點分別如下：
撰寫方式優點缺點手動編寫完全根據需求客製化程度高。需要花較多的時間學習與實際撰寫。錄製巨集錄製後自動生成程式碼，只需根據需求手動調整即可。錄製的程式碼較基本，複雜的需求可能要大幅的手動調整，因此仍需具備程式基礎。使用生成式AI可直接複製貼上生成的程式碼，大幅提高撰寫效率，也能解決較複雜的案例。撰寫程式碼時會備註各程式碼的用途，可供快速學習。較冷門的需求可能會回答錯誤，若要提升生成品質則會需要訂閱。有時程式碼較冗餘，影響執行效能與可閱讀性。
雖然3種方式皆有優缺點，但使用生成式AI需要的時間、技術門檻最低，因此後續各章節主要會使用ChatGPT生成程式碼，提供輸入的Prompt及對應的輸出。
使用生成式AI生成Apps Script程式碼
本節將使用兩個範例說明如何使用ChatGPT生成程式碼，只要將程式碼複製到Apps Script中並執行函式即可，兩範例的需求、Prompt與ChatGPT (4o mini)生成程式碼如下：
本節範例使用之「會員資料檔」Google Sheets
會員資料檔範例（圖／旗標）
▶ 範例1：資料統計
需求：統計會員資料檔中的會員職業，各職業依會員數多到少排序。
問：生成Apps Script程式碼，統計工作表「會員資料檔」的 E2:E 每個值出現的次數，依次數由高到低輸出到工作表「5.4.3 使用生成式 AI 生成程式碼」的 A:B 中，並將兩欄的標題分別設為「職業」和「會員數」。
ChatGPT輸出結果（以下為作者撰寫時生成之版本，每次生成可能有些許差異，請各位讀者稍加留意）：
▶ 範例2：生成圖表
需求：延續上例，將統計結果繪製成柱狀圖。
問：生成Apps Script程式碼，將工作表「5.4.3 使用生成式AI生成程式碼」的 A2:B 繪製成柱狀圖，兩欄分別為「職業」和「會員數」，並貼上至工作表的 C1 儲存格中。
ChatGPT 輸出結果：
兩範例的最終結果如下圖所示：
（圖／旗標）
用AI生成Apps Script程式碼的Prompting技巧
在撰寫Prompt時要清楚描述需求，以增加生成式AI正確的機率，可以使用以下的Prompting架構增加正確輸出的機率：
問：(1) 生成Apps Script程式碼，(2) 完成以下步驟：1. (3) 將工作表「○○○」的 ○○:○○ 儲存格 (4) 匯總 / 繪製圖表 / 計算...，其中 A / B / C 欄位依序為 △△△ / △△△ / △△△…。2. 將 …3. 將 …，(3) 把最終結果輸出至工作表「○○○」的 ○○ 儲存格。
(1) 在一開始就提及Apps Script，避免AI輸出其他程式語言。
(2) 若要求非常複雜時，建議化為多個步驟，或是分多次Prompt漸進式說明。
(3) 清楚說明資料來源與最終輸出的位置，提及「工作表/儲存格/範圍/欄/列」避免判斷錯誤，並建議用括號標示工作表名稱。
(4) 說明計算過程時可以說明應用場景，但要說明各欄位的名稱，避免判斷錯誤。若欄位的名稱較難判斷資料型態時，可以增加舉例說明。
節錄自：旗標《AI 加持！Google Sheets 超級工作流》／杜昕 Mic Tu 著
推薦閱讀：
AI家教上線！ChatGPT和Gemini學習模式實測4招馬上用
AWS免費課程幫你打造AI「學力」證明，攻搶12萬AI職缺！
除了ChatGPT還有哪些生成式AI？16種AI工具應用解析
【Windows表情符號快捷鍵／截圖快捷鍵】呼叫內建Windows Emoji、顏文字、特殊符號和功能增進工作效率
使用Windows電腦鍵盤輸入時，表情符號快捷鍵怎麼打？除了剪下貼上，還有哪些功能性快捷鍵可增加效率？《職場力》為您整理了常用的Windows快捷鍵大全，透過快捷鍵增進溝通及工作效率。
文／《104職場力》
本文導覽
Windows表情符號快捷鍵 「Windows＋﹒」，呼叫隱藏版表情圖示鍵盤Windows 10系統Emoji快捷鍵Windows 11系統Emoji快捷鍵透過快捷鍵組合輸入特殊符號與字元功能性Windows快捷鍵：取代滑鼠的便利用法常用Windows快捷鍵
許多智慧型手機內建輸入法、通訊軟體內建表情符號鍵盤，讓對話、聊天不再只是純文字，透過表情符號傳遞心情、當下情緒，讓訊息不再冷冰冰。
如今在現代職場，也不像過去要求繁瑣的禮節和制式書信體裁，甚至部分單位使用通訊軟體溝通時，也能使用較為輕鬆的口吻、表情符號來談話。
電腦打字想使用「表情符號」、卻一時半刻找不到，不知該如何輸入嗎？其實今日微軟作業系統已經內建「emoji」、顏文字等表情鍵盤，只要簡單透過幾個按鍵叫出「隱藏版鍵盤」，就能透過快捷鍵顯示所有表情圖示囉！(❁´◡`❁)
Windows表情符號快捷鍵 「Windows＋﹒」，呼叫隱藏版表情圖示鍵盤
Windows 10系統Emoji快捷鍵
如要使用各式各樣Windows Emoji，可以於輸入文字時，輸入「Windows標誌鍵」+「 . (句號) .」，表情圖示鍵盤隨即顯示。
接者利用滑鼠選取表情圖示，或者繼續鍵入以搜尋您喜歡的表情圖示。
Windows 表情圖示鍵盤圖片來源：微軟支援
表情圖示鍵盤不僅有Emoji，點選「;-)」提供各式各樣的顏文字；點選「Ω」符號則可選擇各式特殊符號。
微軟也提示使用者，在任何的應用程式中都可以透過此種方式開啟表情符號鍵盤。但如果有些頁面或編輯器僅能顯示單色字元，就無法出現彩色的 Emoji、顏文字及特殊符號。
如Windows內建記事本僅能單色顯示
Windows 11系統Emoji快捷鍵
而微軟最新作業系統Windows 11同樣可以輸入「Windows標誌鍵」+「 . (句號) .」，顯示表情圖示鍵盤。
並利用滑鼠選取表情圖示，或者繼續鍵入以搜尋您喜歡的表情圖示。比起Windows 10，11更多出GIF等其他顏文字可以選擇。
Windows 表情圖示鍵盤圖片來源：微軟支援
透過快捷鍵組合輸入特殊符號與字元
如果想要快速鍵入鍵盤沒有的特殊符號或字元，例如長破折號 「—」 或版權符號「©」時，也可以利用鍵盤快捷鍵組合鍵入，而不必再透過複製製貼上，省時有效率。
因此，若使用的鍵盤配置具有數字鍵台，即可依照下列方式輸入特殊字元：
按住鍵盤上的 Alt 鍵。
按住 Alt 鍵後，為所需的字元，在數字鍵台上鍵入四位代碼（如果需要，請包括前置 0）。
放開 Alt 鍵。
附註：此種方式僅適用於數字鍵台， 不適用於鍵盤上方的數字列。
符號名稱Alt 代碼©版權符號Alt+0169®註冊商標符號Alt+0174™商標Alt+0153•清單點Alt+0149§章節符號Alt+0167†單劍註釋符號Alt+0134‡雙劍註釋符號Alt+0135–短破折號Alt+0150—長破折號Alt+0151¶段落符號（Pilcrow）Alt+0182¡上下顛倒的驚嘆號Alt+0161¿上下顛倒的問號Alt+0191¢一分符號Alt+0162£英鎊Alt+0163Є歐元貨幣Alt+0128¥日圓Alt+0165
但也提醒，討論公事、溝通業務時盡量避免頻繁使用emoji或顏文字，反而可能造成訊息難以閱讀、資訊雜亂等，造成對方困擾的情況發生。
可以觀察辦公室、同事溝通交流的方式，於輕鬆、閒暇、閒聊時使用，給對方加油打氣、舒緩緊張情緒、傳遞心情，也能維持良好職場禮儀！
功能性Windows快捷鍵：取代滑鼠的便利用法
雙手在鍵盤上飛速打字時，如果還要分神操控滑鼠或觸控板，可能會覺得不方便且浪費時間。不如就把下列鍵盤快捷鍵背起來，提升工作效率吧！
常用Windows快捷鍵
功能快捷鍵複製Ctrl + C剪下Ctrl + X貼上Ctrl + V最大化視窗F11或Windows標誌鍵 + 向上鍵 開啟工作視圖Windows標誌鍵 + Tab顯示及隱藏桌面Windows標誌鍵 + D 在開啟的應用程式之間切換Alt + Tab開啟快速連結功能表Windows標誌鍵 + X鎖定電腦Windows 標誌鍵 + L截圖Windows 標誌鍵 + Shift + S資料來源：微軟
資料來源：微軟
更詳盡的Windows快捷鍵請參考：Windows中的鍵盤快速鍵
更多職場力精選，提升【職場工作術】就看這：
專案管理常用的甘特圖（Gantt Chart）是什麼？怎麼做？如何用Excel繪製甘特圖？
SWOT分析是什麼？怎麼做？沒想到，求職也能用SWOT分析自我優勢
2024年超實用PPT模板推薦！8個高質感免費簡報範本網站
簡報結束後才是戰場，面對提問的3大應對技巧｜職場工作術
成功人士高效率「時間管理」的秘訣？想辦法吃到屬於你的「無敵星星」
為什麼我發的Mail，都沒人要回我信？
Claude Cowork新增內建瀏覽器！不用裝外掛，AI可直接開網頁、填表單
Claude Cowork推出內建瀏覽器，可直接蒐集網頁資料、擷取Dashboard數據與填寫表單。本文整理功能用途、付費方案、與Claude in Chrome差異及使用注意事項。
文／《104職場力》
本文目錄（點擊可快速前往）
Claude Cowork有內建瀏覽器了，可以做什麼？Claude Cowork內建瀏覽器和Claude in Chrome差在哪？哪些方案可以使用？使用仍要注意資安風險
Anthropic於美國時間8月26日宣布，Claude Cowork桌面版新增內建瀏覽器（Built-in browser）。當任務需要使用網站時，Claude可以直接在桌面版應用程式側邊開啟自己的瀏覽器，瀏覽網頁、讀取內容、點擊以及輸入文字，不必另外安裝Chrome瀏覽器擴充功能。
這也代表，除了分析電腦裡的文件、使用Connectors串接服務之外，部分原本必須進入網站才能完成的工作，現在可以直接交給Cowork處理。
使用工具：Claude Cowork桌面版是否付費：付費方案限定（Pro、Max、Team、Enterprise）網頁版：https://claude.ai/電腦版：https://claude.com/download手機APP：iOS下載、Android下載
Claude Cowork有內建瀏覽器了，可以做什麼？
過去若要讓Cowork操作網站，需要透過Claude in Chrome擴充功能來操作使用者的Chrome瀏覽器；這次更新後，Claude有了一個與個人瀏覽器分開的內建瀏覽器。
Anthropic舉例，可以把以下工作交給Claude：
蒐集網頁上的研究資料
從Dashboard擷取數據
填寫網頁表單
從供應商Portal收集發票
操作沒有Connector可以串接的網站
例如準備報告時，可以讓Claude上網蒐集資料；處理行政工作時，也可以請它進入網站取得需要的資訊。
Claude Cowork內建瀏覽器和Claude in Chrome差在哪？
兩項功能都能讓Claude操作網頁，但使用情境不同：
Cowork內建瀏覽器：使用Claude自己的獨立瀏覽器，不會直接看到使用者個人瀏覽器裡的分頁、書籤或密碼，適合將一段網頁工作交給Claude處理。若有需要，也可以逐一將網站登入狀態帶入，目前macOS支援從Chrome、Edge、Firefox移轉，而Windows與Linux僅支援Firefox；銀行、電子郵件與單一登入（SSO）網站預設不會移轉，除非使用者自行選擇加入。
Claude in Chrome：是操作使用者已經開啟的Chrome頁面，適合處理已經開啟或登入中的網頁，例如更新CRM、處理收件匣或編輯文件。
簡單來說，想把網頁任務交出去，可以用Cowork內建瀏覽器；想讓Claude操作已開啟的網頁，則可使用Claude in Chrome。
如果使用者原先已在使用Claude in Chrome，仍會作為預設選項；也可以在「Settings → Cowork → Preferred browser」自行切換。
哪些方案可以使用？使用仍要注意資安風險
目前「Cowork內建瀏覽器」功能僅開放給付費方案，Anthropic表示將於一週內陸續推送給Pro、Max、Team方案的Claude桌面版使用者，支援macOS、Windows與Linux；Enterprise方案目前已可由管理員開啟功能（於Organization settings → Cowork → Built-in browser管理）。功能推送到帳號後將預設為開啟，使用者不需另外設定；只要任務涉及網站，瀏覽器就會自動在側邊面板開啟。
內建瀏覽器會在Claude桌面版中運作，只要Claude桌面應用程式保持開啟並連線，使用者也能從Claude網頁版或手機版下指令，讓電腦端的Claude執行網頁任務。
不過，讓AI直接操作網站仍有風險。Anthropic特別提醒，AI瀏覽器可能遭遇Prompt Injection（提示詞注入），例如網頁藏有惡意指令，企圖讓Claude偏離使用者原本交付的任務。官方表示雖有相關防護措施，但無法完全消除風險，因此建議一開始先從可信任的網站使用。
（參考資料：Claude）
推薦閱讀：
Claude怎麼用？免費版有什麼限制？Chat、Cowork、Code及實用功能盤點
Claude Cowork怎麼用？要付費嗎？解析操作流程、權限設定及模型選擇
Claude Cowork排程任務怎麼用？讓AI定時工作，自動產出報告教學
微軟推出 AI 除錯神器「Debug-gym」：會學習、會互動，開發者超有感！
近年 AI 在寫程式這塊越來越強，從 GitHub Copilot 到 ChatGPT 都能幫你補全程式碼、寫函數、跑出範例。但——寫出來不代表就能跑得動，**程式出錯才是真正考驗的開始。**
微軟最近丟出了一個開發者圈子超關注的新工具：**Debug-gym**。簡單說，這是一套「讓AI學會怎麼除錯」的訓練平台，而且跟過去被動回應式的AI工具不同，它是主動參與的！
Debug-gym 是什麼？
Debug-gym 不是一套傳統的「除錯工具」，而是一個給 AI 模型用的「除錯訓練場」。它會把程式執行錯誤的環境模擬出來，讓 AI 像人類一樣一步步找問題、做測試、嘗試修改，再看結果是不是改善了。
這就像你在 IDE 裡一邊下中斷點、一邊觀察變數變化，但這次主角是 AI 它自己在操作！
它能做什麼？可整合外部工具，自我優化除錯邏輯
Debug-gym 最大的亮點，就是它不只會「看懂錯誤訊息」，還會自己去呼叫外部工具（像是 Python 測試框架 `pytest`、Linter、或 IDE plugin），然後依據回傳的結果進行修正。
這代表：
- AI 除錯不是亂猜，而是**根據上下文與測試結果調整建議**
- 能根據開發環境不同，整合最合適的工具
- 每次錯誤處理都能成為「下一次更聰明的學習經驗」
目前支援 Python 程式語言，未來有望支援 JavaScript、C++ 等常見開發語言。
社群怎麼看這項技術？
Debug-gym 在 Reddit、Hacker News 引發不少討論，而台灣與華語圈的開發者社群也已經開始關注這項技術：
🔥 社群反應熱點
- 「終於不是只能 auto-complete，AI 開始會 debug！」
- 「這會不會是下一代 Copilot 的核心？自動除錯就太強了」
- 「可以跟 CI/CD 結合嗎？每次 commit 自動測、自動建議修正？」
🧠 實用情境討論
- 新手工程師在學習除錯流程時，可以邊看 AI 如何分析錯誤訊息邏輯。
- 團隊在 code review 前，可先讓 AI 先跑一輪除錯與測試建議。
- 未來整合 GitHub Action，針對 Pull Request 自動做初步除錯建議也不是夢！
目前已有不少部落客與工程師在 YouTube 和 Medium 開始試用 Debug-gym 並做教學影片，預期會成為接下來開發圈的熱門話題。
為什麼這麼重要？
程式碼生成工具已經普及，下一步是什麼？就是**讓AI能從錯誤中學習、主動修正。** Debug-gym 讓 AI 不再只是寫程式的輔助者，而是真正能「解決問題」的夥伴。
開發者不只節省除錯時間，也能透過觀察AI的邏輯提升自己判斷能力。對企業團隊來說，更能強化開發自動化、減少人力排查成本。
結語：AI 除錯的新時代，已經悄悄來臨
如果 Copilot 是你的程式小助手，那麼 Debug-gym 就是訓練 AI 成為「除錯高手」的健身房。現在還是早期階段，但很可能會成為未來開發流程中不可或缺的一環。
無論你是初學者還是資深工程師，都值得關注 Debug-gym 的發展，說不定下次你寫的程式出現 bug，最先發現錯誤的不是你，而是那位 AI 除錯搭檔。
📌 想掌握更多AI動態，歡迎關注本教室追蹤後續更新！
有任何收穫或想分享的，都來和大家一起聊聊吧！