我們使用的技術脈絡

--- lang: zh-tw title: '我們使用的技術脈絡' tags: '看' --- # 我們使用的技術脈絡 ## 概觀以下不涉及太過久遠的版本 <table class="Skill_Support_TB"> <tbody> <tr> <td> HTML <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/HTML#%E7%89%88%E6%9C%AC%E6%97%B6%E9%97%B4%E7%BA%BF" target="_blank"> </a> <div> HTML 5 HTML 4 HTML 3 </div> </td> <td> CSS <a title="佐證資料" href="https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8#%E7%89%88%E6%9C%AC%E6%AD%B7%E5%8F%B2" target="_blank"> </a> <div> CSS3 CSS2.1 CSS2 CSS1 </div> </td> <td> JavaScript <a title="佐證資料" href="https://zh.wikipedia.org/wiki/ECMAScript#%E7%89%88%E6%9C%AC" target="_blank"> </a> <div> ES13 ES12 ES11 ES10 ES9 ES8 ES7 ES6 ES5 </div> </td> </tr> <tr> <td> jQuery <a title="佐證資料" href="https://releases.jquery.com/jquery" target="_blank"> </a> <div> 3.x 2.x 1.x </div> </td> <td> Bootstrap <a title="佐證資料" href="https://getbootstrap.com/docs/versions/" target="_blank"> </a> <div> v5.x v4.x v3.x </div> </td> <td> IIS <a title="佐證資料" href="https://sdwh.dev/posts/2021/03/IIS-Version-Mapping-OS-Version/#%E8%AA%AA%E6%98%8E" target="_blank"> </a> <div> IIS 10.0 IIS 8.5 IIS 8.0 IIS 7.5 IIS 7.0 </div> </td> </tr> <tr> <td> Windows <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%88%97%E8%A1%A8#%E5%BE%AE%E8%BD%AF%EF%BC%88Microsoft%EF%BC%89" target="_blank"> </a> <div> Win 10 / Win Server 2016, 2019 Win 8.1 / Win Server 2012 R2 Win 8 / Win Server 2012 Win 7 / Win Server 2008 R2 Win Vista / Win Server 2008 </div> </td> <td> .NET <a title="佐證資料" href="https://learn.microsoft.com/zh-tw/dotnet/framework/migration-guide/how-to-determine-which-versions-are-installed" target="_blank"> </a> <a class="ml-2" title="佐證資料" href="https://zh.wikipedia.org/zh-tw/.NET#%E5%8E%86%E5%8F%B2" target="_blank"> </a> <div> .NET Framework .NET Framework 4.8.1 .NET Framework 4.8 .NET Framework 4.7.x .NET Framework 4.6.x .NET Framework 4.5.x .NET Core .NET 7 .NET 6 .NET 5 .NET Core 3.1 .NET Core 3.0 .NET Core 2.2 .NET Core 2.1 .NET Core 2.0 .NET Core 1.1 .NET Core 1.0 </div> </td> <td> MS-SQL <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/Microsoft_SQL_Server#%E7%89%88%E6%9C%AC%E6%BC%94%E9%80%B2" target="_blank"> </a> <div> SQL Server 2022 SQL Server 2019 SQL Server 2017 SQL Server 2016 SQL Server 2014 SQL Server 2012 SQL Server 2008 R2 </div> </td> </tr> </tbody> </table> <div class="legend"> 版本 建議甲方使用 技術較熟練 </div> ## 簡述 :::spoiler {state="open"} **前端** * **HTML**：一段文字的描述，是人能懂的語言；一段被標記起來的區塊，則是瀏覽器能懂的語言 * 透過正確的標籤，將我們網頁的內容賦予意義，稱為語意化 * 當你重視 **HTML** 的語意化時，不僅會提升 **SEO**[^SEO] 排名，也間接銜接上**無障礙**[^Accessibility]其中之一的設計例如：使用利於盲人的文字閱讀器設備，針對這些語意化標籤會發出較重的語氣，來產生不同的語境 * 除非特別指定版本，否則目前版本都以 **HTML 5** 為主 * 版本向下相容 * **CSS**：人要衣裝，佛要金裝，網頁就靠它來打扮 * 可以設計網頁的外觀與排版 * 目前的切版技術以 **CSS** 中的 **Flex、Grid** 為主流 * **RWD** 的技術，約有七、八成，可用 **CSS** 達成，剩下用 **JS** 處理 * **CSS** 版本是根據瀏覽器，決定支援程度的，目前大眾瀏覽器都支援使用 **CSS3** * 版本向下相容 * **JavaScript**：詠唱咒語來注入靈魂，使空無一物的軀殼，具有生命力 * 增加各種動態效果、動畫、表單驗證等 * 目前為==每年6月==推出一個版本 * **Java** 與 **JavaScript** 不一樣 * 命名相似的原因，是因為當初 **Java** 較熱門，而扒在他身上想一起火起來 * **JavaScript** 既能使用於前端，也能運作於後端 * 在演進的過程，也可以透過 **Node.js** 這個執行環境，於後端執行 * **JavaScript** 版本也是根據瀏覽器，決定支援程度的，目前大眾瀏覽器都支援使用 **ES6** * 不建議使用太新版的語法，因為要考慮手機的瀏覽器支援程度較差 * 版本向下相容 * **jQuery**：縮短了詠唱的時間，且威力更強 * 為 **JavaScript** 的函式庫 * 封裝了許多簡化後的語法可以使用，但只限於前端的部分 * 隨著版本的演進，進而改善執行效能與安全性更新 * 原始碼掃描的時候，通常都要求最新版本 * 版本向下相容 * **Bootstrap**：前端工程師的軍火庫，你要的武器，這邊通通有 * 是個結合了 **HTML、CSS、JS** 的**前端元件庫** * 上述所謂的元件，即為一般**網頁設計**中，常見到的一種通俗的樣式與功能例如：麵包屑、導覽列、分頁...等 * **Bootstrap** 將這些常見的設計，包裝成各個元件（模板），提供開發者取用 * 另一個特色為，有一套 **RWD** 的設計系統，在手機和平板都有很好的呈現 * 每次的大版本號變動，在 **HTML、CSS、JS** 都有一定程度上的調整，升級大版本號不是件容易的事 * **HTML** 模板結構改變、**CSS** 樣式命名不同、**JS** 操作改變等 ::: :::spoiler {state="open"} **伺服器端** * **Windows**：帶領你達成無盡的成就 * 為一套作業系統，集結了各式各樣的系統軟體、輔助工具，及各種服務等功能 * 因容易使用，又支援許多軟體生態，而佔有七成以上的市佔率，使之成為作業系統的首選 * **IIS**：不分晝夜的默默付出，但偶爾小毛病會發作 * 為 **Web** 伺服器應用程式，用於在 **Windows** 環境下管理 **Web** 站台 * 除了 **C#** 的 **`ASP.NET`** 之外，還可以架其他語言開發的網站例如：**PHP、Node.js、Python、Ruby**...等 * **IIS 7 以前**的都不建議，因為安全性、維護性、以及架構都略有不同，固不再考量範圍內 * 且一律建議使用 **IIS 10.0** ::: :::spoiler {state="open"} **後端** * **.NET Framework**：我是Framework，我會造飛機，而且造的很快，造出來的飛機可以在天上飛 * 由 **Common Language Runtime (CLR)** 和 .**NET Framework 類別庫** 所組成 * 只適用於 **Windows** 環境，並且可以建立 **Windows 應用程式** 和 **Web 服務** 等技術 * 永遠停在 **4.8.1** 版本（依然有安全性更新和錯誤修正），且 **.NET 5+** 的版本，不會取代 **.NET Framework** * 官方建議已使用 **.NET Framework** 開發的軟體，不需要改為 **.NET Core** 版，但新開發的專案，建議使用 **.NET 6+** 開發 * **.NET Core**：我是阿Core，我也會造飛機，而且造的超級快，造出來的飛機不只在天上飛，還可以在水底飛、宇宙上飛、黑洞內飛 * 免費、跨平台、開源程式碼，主打**快速**開發**可靠、高效能**的程式碼 * [**.NET Core 3.1** 以前稱作 **.NET Core**，而後面出的版本命名為 **.NET 5**](https://learn.microsoft.com/zh-tw/dotnet/core/whats-new/dotnet-5) * 略過號碼 **4.x**，以避免與 **.NET Framework 4.x** 混淆 * 命名去掉「**Core**」，強調這是 **.NET** 未來的主線 * **.NET 5**，統一了 **.NET** 的各個平台的碎片版本 * **.NET Framework 4.8、.NET Standard、.NET Core 3.1、Mono、Xamarin** 等 * 未來==每年11月==出新版，**偶數**版本為 **LTS** * **.NET 5** 之後的版本皆向下相容，且改動幅度較小，但跨版本更新還是有其它的困難點要克服（第三方套件有無支援） *（.NET6、.NET7、.NET8 向下相容）* * [目前不在更新 **.NET5** (含)以前的版本](https://dotnet.microsoft.com/zh-cn/platform/support/policy/dotnet-core#lifecycle) *（.NET 5、.NET Core 3.1、.NET Core 3.0、.NET Core 2.2、.NET Core 2.1 .NET Core 2.0、.NET Core 1.1、.NET Core 1.0 向下相容）* * **.NET Core** 升 **.NET** 幅度較大，不易處理 * **MS-SQL**：打造一個某領域的專屬字典 * 用於儲存系統所需的資料 * 盡量不存個資相關的資料 * 以效能來講，盡量都用最新的穩定版 * 要提升效能，優先都以資料庫調校為優先 * 版本向下相容 ::: [^SEO]: 搜尋引擎最佳化（SEO，Search Engine Optimization）：受眾對象若想將網站排在 google 排行前幾名，其中一個要做的重要環節，就是導入正確的語意化，使搜尋引擎能更快讀懂我，並找到我 [^Accessibility]: 無障礙網頁設計所設定的受惠者是「所有人」，簡言之就是要提高易用性，不論是身心障礙者，還是正常人，都必須能夠平等的使用網頁 ## 版本相依 ### 前端 > 沒有版本相依性，用穩定的版本即可 ### 伺服器、後端 <table> <thead> <tr> <th>Windows 伺服器</th> <th>IIS</th> <th>MS-SQL</th> <th>.NET Framework</th> <th>.NET Core</th> </tr> </thead> <tbody> <tr> <td>Windows Server 2022</td> <td>IIS 10.0</td> <td>SQL Server 2022、2019、2017</td> <td class="text-center">all</td> <td>.NET 7、6</td> </tr> <tr> <td>Windows Server 2019、2016</td> <td>IIS 10.0</td> <td>SQL Server 2022、2019、2017、2014、2012</td> <td class="text-center">all</td> <td>.NET 7、6</td> </tr> <tr> <td>Windows Server 2012 R2</td> <td>IIS 8.5</td> <td>SQL Server 2017、2016、 2014、2012、2008 R2</td> <td class="text-center">all</td> <td>.NET 7、6</td> </tr> <tr> <td>Windows Server 2012</td> <td>IIS 8.0</td> <td>SQL Server 2017、2016、 2014、2012、2008 R2</td> <td class="text-center">all</td> <td>.NET 7、6</td> </tr> </tbody> </table> :link: 參考 --- [無障礙](https://ithelp.ithome.com.tw/articles/10222915) [IIS 維基百](https://zh.wikipedia.org/zh-mo/%E7%B6%B2%E9%9A%9B%E7%B6%B2%E8%B7%AF%E8%B3%87%E8%A8%8A%E6%9C%8D%E5%8B%99) [.NET 6/7 版本相依](https://learn.microsoft.com/zh-tw/dotnet/core/install/windows?tabs=net70#supported-releases) [MS-SQL 版本相依](https://learn.microsoft.com/zh-tw/troubleshoot/sql/general/use-sql-server-in-windows#summary) <style> code.red { color: #e91e63 !important; font-size: 1.6rem !important; } code.blackred{ color:#900000 !important; font-size: 1.6rem !important; } code.blue { color: #337AB7 !important; font-size: 1.6rem !important; } code.orange { color: #F7A004 !important; font-size: 1.6rem !important; } .markdown-body { max-width: 820px; } .markdown-body p > code { color: #c7254e !important; background-color: #f9f2f4 !important; border-radius: 4px !important; padding: 2px 4px !important; font-size: 90% !important; } .markdown-body pre { background-color: #112648; } .markdown-body pre, .markdown-body pre .code .hljs-tag { color: #eee; } img:not(.emoji) { padding: 5px; background: #ffffff; border: 1px solid #eeeeee; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); margin: 5px 0; } .markdown-body .alert hr { height: 1px; margin: 8px 0 15px 0; background-color: #31708f; } .markdown-body .alert h3, .markdown-body .alert h4 { margin: 0px; } .markdown-body blockquote > p { /* background-color: #f5f5f5;*/ } .markdown-body strong { /*font-size: 2rem;*/ } /*程式碼等於符號的顏色*/ .token.operator { background: #102546; } /* * 本頁用 */ .Skill_Support_TB .tb-head { font-size: 2.5rem; font-weight: bold; display: flex; } .Skill_Support_TB .tb-head > a:first-child { margin-left: auto; } .Skill_Support_TB .tb-head small { font-size: .875rem; color:#777; } .Skill_Support_TB tbody tr { display: flex; } .Skill_Support_TB tbody tr td { display: flex; justify-content: flex-start; width: 33.3%; flex-direction: column; flex-wrap: wrap; } .Skill_Support_TB tbody tr td > div > p { margin-bottom: 0 } .suggest { background-color: #337ab7; } .hot { background-color: #a94442; } .badge.suggest.hot { background: linear-gradient(to right, #337ab7,#a94442); } .legend .badge { height: 15px; width: 15px; border-radius: 0; display: inline-block; } </style>