CS Field

講師 - 呂家睿

  • 建中資訊38屆學術長+副社
  • 玩原神跟雀魂
  • 頭像是應急食品
  • 被電爛
  • 有問題歡迎來問我啊
  • C++
  • python
  • 競程是什麼可以吃嗎?
  • 數學好難
  • 雖然很菜但喜歡遊戲開發
  • 打開電腦

學術力

講師 - 陳柏安

  • 建中資訊38屆社長+網管
  • 玩osu
  • 開卡車
  • 也是被電爛
  • 可以來找我打電動 (?
  • python (最近在學flask)
  • HTML/CSS/JS
  • 有沒有人要教我競程
  • Google
  • 寫了社網

學術力

Web Development

網頁開發

Web Development

網頁開發

  • 前端開發 (front-end)
  • 後端開發 (back-end)
  • 全端開發 (full-stack)​
  • 打開google,你看到的就是前端
  • 負責建立使用者互動內容
  • 注重可使用性、性能、速度

Front-end

前端開發

HTML

CSS

JavaScript

HTML

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

網頁按F12旁邊的就是

CSS

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

2048 source code

JavaScript

  • 程式語言
  • 網頁怎麼動
  • 處理網頁上的各種動態行為

JavaScript

  • 框架 (framework)
    • 有人已經先寫好的東西
    • 省時省力
    • e.g. react.js、vue.js
  • 專門設計網頁樣式的
  • UI 使用者介面:版面、配色、樣式、etc.
  • UX 使用者體驗:互動邏輯、可用性

cf. Web Design

網頁設計

  • 工具
    • Figma
    • Adobe XD
  • 幫忙處理前端的請求
  • API開發
  • 處理網頁or應用程式與資料庫的互動

Back-end

後端開發

  • 常用の程式語言/框架
  • Application Programming Interface
  • 使不同軟體、系統能夠互通
  • 讓應用程式or服務間能夠分享資料

API

應用程式介面

  • 他大概是怎麼運作的:

應用程式

API

伺服器

  • 簡稱DB (低閉)
  • 一個可以存放資料的地方 -> 檔案櫃
  • 使用者可以查詢 (query)

Database

資料庫

  • SQL - 關聯式、結構化資料表
    • MySQL, SQLite, SQLAlchemy
  • NoSQL - 有彈性
    • MongoDB, Redis
  • 其實就是同時會寫前端&後端

Full-stack

全端開發

Software Development

軟體開發

Software Development

軟體開發

System Software

系統軟體

Programming Software

程式軟體

Application Software

應用軟體

System Software

系統軟體

幫忙做一些很low-level(底層)的事情的軟體

不會直接操作到硬體但是開發時會需要了解硬體

  • 對於效率、安全有高要求 -
                 演算法、了解硬體、sandbox(沙盒)
  • 例子: 作業系統(OS)、防毒軟體
  • 低階程式語言: C/C++, Rust, ASM(Assembly)

很快、可以控制很多東西,但是寫起來麻煩

Programming Software

程式軟體

拿來給開發程式的人使用的軟體,寫程式時會用到的一些工具軟體

  • 編譯器 Compiler  - gcc, clang
  • 直譯器 Interpreter - python, JS
  • code editor & IDE - vscode, visual studio
  • 其他 - CMake, gdb

Application Software

應用軟體

大部分人普遍認知的軟體,平常你應該每天都會用到這些軟體。

電腦軟體 - C#, Java, C++, Python, Swift, Rust

手機軟體 - Swift(IOS), Kotlin(Android), Dart

寫應用軟體跟網頁大致相同都會包刮

前端(front end)

後端(back end)

API

資料庫(DB)

DevOps Tools

Game Development

遊戲開發

Game Development(遊戲開發)

  • 開發各式各樣的遊戲:
    手遊、桌機遊戲、網頁遊戲 blah blah blah
  • 其實跟軟體開發有點像
  • 最重視的大概是程式跟美術
  • 工具很多

Game Engine

Game Framework

Graphic API

遊戲框架(Game Framework)

  • 基本上就是純純的寫程式,但是可以用一些寫好的套件來用,來減輕自己的工作量
  • 適合做小遊戲,精進程式能力
  • Python - pygame
  • C/ C++ - raylib, SFML, SDL
  • Java - libgdx

遊戲引擎(Game Engine)

  • 有很實用方便的操作介面,拉來拉去就可以解決事情
  • 當然還是會有寫程式的部分,但相對輕鬆很多
  • 適合做大遊戲
  • 因為大家都愛用,所以有很多資源
  • UE5(Unreal Engine 5) - C++
  • Unity - C#
  • Godot - GDscript

遊戲引擎(Game Engine)

Cyber Security

資訊安全

Cyber Security(資安)

大家都想當駭客,但是會被抓,不過你可以合情合理的當一個預防駭客的人,幫忙保護公司,也就是所謂資安

Data Security

確保你的資料不會被盜走

Web Protection

防止有任利用網路漏洞攻擊電腦/伺服器

DDoS Defense

防止被DDoS

Hacking

你會進監獄

Cyber Security(資安)

CTF(capture the flag)一種資安競賽活動,有興趣可以玩玩看,初學者也可以透過這個學習

一些網站像是Cybrary, TryHackMe, Hack the box, PicoCTF 都是透過一些時做來練習,建議用這些來學習

Data Science

資料科學

Machine Learning

機器學習

&

Data Science

資料科學

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

Data Visualization

資料視覺化

  • 高二會上
  • 用統計圖、圖表等來清晰傳遞有效資訊

Plotly Express

Python的一個函式庫

最熱門

完全針對統計,工具豐富

純數值計算

大數據處理

其實也可以用啦

  • 常用の程式語言

Machine Learning

機器學習

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

Deep Learning

強化學習

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

沒錯,就是這種東西

Python 那些強大的libraries

計算

ML

DL

資料視覺化

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

Others

DB Programming

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

Automation

CS Field

By ck11300111呂家睿

CS Field

  • 133