Web Development

Types

  • 前端開發 (front-end)
  • 後端開發 (back-end)
  • 全端開發 (full-stack)​

前端開發

Front-end

簡介

打開google,你看到的就是前端

  • 負責建立使用者互動內容
  • 注重可使用性、性能、速度
  • HTML/CSS/JS

HTML 超文本標記語言

  • 網頁結構&基礎內容
  • 用「標籤」來建構 -> 標籤語言
  • 嵌入多媒體 e.g. 圖片、影片、音訊

google按f12後旁邊的東東就是

CSS 層疊樣式表

  • 網頁外觀
  • 改變物件屬性e.g. 顏色、大小、邊框
  • 做動畫

google按f12後右下角的東東算是

Javascript

  • 網頁怎麼動
  • 處理網頁上的動態行為

2048 source code

Javascript

  • 框架 (framework)
    • 有人已經先寫好的東西
    • e.g. react.js、vue.js

cf. Web Design

  • 專門設計網頁樣式的
  • UI 使用者介面:版面、配色、樣式、etc.
  • UX 使用者體驗:互動邏輯、可用性
  • 工具
    • Figma
    • Adobe XD

後端開發

Back-end

簡介

  • 幫server處理從前端來的請求 e.g. 身分認證
  • API開發
  • 處理網頁or應用程式與資料庫的互動

常用程式語言/框架

  • Node.js裡的express.js
  • Python的Django、flask
  • Ruby的Ruby On Rails
  • PHP
  • Java的Spring
  • C#

API

  • 應用程式介面 (Application Programming Interface)
  • 讓不同的軟體系統能夠互通
  • 應用程式or服務間能夠分享資料
  • 他大概是怎麼運作的:

應用程式

API

伺服器

資料庫 (Database)

  • 簡稱DB (低閉)
  • 一個存放資料的地方 -> 檔案櫃
  • 使用者可以查詢 (query)
  • SQL - 關聯式、結構化資料表
    • MySQL, SQLite, SQLAlchemy
  • NoSQL - 有彈性
    • MongoDB, Redis

全端開發

Full-stack

其實就是同時會寫前端&後端

Data Science

&

Machine Learning

資料科學

Data Science

其實高二會上到

簡介

  • 取得、處理並分析資料
  • 會用到很多數學 e.g. 線性代數、微積分、etc.
  • 還包括統計學、資料視覺化、機器學習、etc.

資料視覺化

  • 用統計圖形、圖表等等來清晰有效傳遞資訊

Plotly Express

常用程式語言

  • Python - 最熱門
  • R - 完全針對統計,工具豐富
  • Julia - 數值計算
  • Java/Scala - 常用於處理大量數據
  • C++/Rust - 難寫,但效果不錯

R語言

機器學習

Machine Learning

坦白講這東西我不會

簡介

  • 讓電腦「學習」-> 分析資料並做出預測
  • 透過數據、經驗讓電腦不斷優化性能

強化學習 (Deep Learning)

  • 機器學習的一個分支
  • 以人工神經網路從資料中進行學習的演算法

沒錯,就是這種東西

Python那些強大的libraries

計算

ML

DL

資料視覺化

計算/資料視覺化/數據處理

Others

DB Programmer

簡介

  • 設計、開發資料庫
  • 優化資料庫

Automation

簡介

  • 讓人類對程式、機器人等應用服務的投入越小越好
  •  
Made with Slides.com