computer science web client solution

杜芬宅比較偏愛網站的開發，較早時侯完成了一個 web client solution 的 評估和計劃

現學現賣的時侯到了，嘿嘿。

背景

為了做一個web portal ，要提供一個web client 的解決方案。

PowerPoint 傳送門

https://1drv.ms/p/s!AuKYJxNRuye9g_YbY58Bw3rdzCfSNA
如果你有雙屏，可以邊看杜芬宅為你預備的簡報，邊看以下的文字說明。
達到有如坐時光機，回到杜芬宅演說的演講之中。

匯報流程

今天要說的有

• 網站開發相關技術
• 對開發有幫助的開源資源
• 以及開發過程中製作過的模型

技術 Technologies

網頁 web page

網頁 (web page)，很多網頁組成一個網站 (website)。
現行網頁的基準都由 HTML + CSS + JS 組成
HTML 標示不同的 網頁元素 (element)，例如一張表格有一個輸入元素和一個按鈕元素。
CSS 操控網頁的結構，定義不同的文字格式、對齊、顏色、高度、闊度
JS 實現使用者與網頁之間的互動

手機客戶端 Mobile Client

現在的趨勢是手機普及，網站製作必需要考慮，網站對象會在手機瀏覽網頁。
為了優化網頁在手機上的表現，製作App會是一個必然考慮。

手機App 分為 Native App、Web App、Hybrid App
Native App
在手機最能夠兼容手機的功能，例如存取鏡頭、震動……
但是iPhone需要Objective C / Swift 編寫，Android需要Java 編寫
增加開發和日後維護成本

Web App
成本最低，可以透過某些渠道，將寫好的網站轉換成App發佈

Hybrid App
網頁語言不能取代原生語言，存取手機原有功能，所以在中間有空間衍生中一種中間語言，你編寫中間的語言，編譯器再為你轉換成適應手機的原生語言。

JavaScript API access mobile device features

現在 JavaScript API 已經能夠存取手機原有功能，
令網頁也可以存取手機功能，基至不需要網頁轉換成 Web App，不需要Hybrid App的技術。

Asynchronous JavaScript and XML (Ajax)

10年前很新穎，現在是很基本的應用。
可以在網頁載入後︰

• 更新網頁內容而不需要重新整理網頁
• 在不重新整理網頁下，傳送資料
• 在不重新整理網頁下，接收資料
• 背景執行工作，傳/收 伺服器資料

系統可靠性

為了確保系統是隱定，資料是可靠的。
需要規劃出，系統有以下功能︰

Dirty Writes timestamp
Locking
Function access right
Record level access right
Logging (commit log)

網頁語言 與 瀏覽器相容性

HTML 有多個版本，現在開發應該使用HTML5。
HTML5 推出後，現在主流瀏覽器對HTML5的支援已經相當高，不應再使用過時的HTML 4

CSS3 推出後，現在主流瀏覽器對CSS3的支援已經相當高，考慮使用CSS3廣展CSS2的不足

JavaScript 方面，ECMASciprt 5 標準已經全面支援，ECMASciprt 6 為部份支援，ECMASciprt 7為缺乏支援。

RWD (Responsive Web Design)

曾經是潮流的RWD，現在已經是必需要考慮的部署。
除非你確保你的使用者都一定在電腦上使用你的網頁。

RWD 的概念沒有一個統一的準標，完全是按照市場的發展而變化的。
普遍認為一個網站，應該最少為三種瀏覽裝置，度身訂造和優化顯示介面。
分別是電腦、平版電腦、手機。

網頁可存取性 Web accessibility

視乎需要，網頁開發可以訂立一個高存取性需求作為目標。
WCAG 2.0 由 W3C 設定，目的為殘障人士提供一個可以閱瀏的網站。

以香港政府各機構的網站為例，都申明網站符合 WCAG 2.0 AA 級別

WCAG 是一種聲明，網站如符合相應要求，可以自行對外宣佈。

網頁的易用性 Web usability

那個易用性雖然覺感很抽象，何謂易用，不過已經有很多學者在那些領域研究了接近20年。
他們為易用性提出了一些相對規範，客觀得來又宏觀的標準。

就是他們三人的努力，令杜芬宅多了一門學科要寫論文。

• Don Norman 在書中 The design of everyday things
  提出 The Seven Stages of Action (1988)
• Ben Shneiderman 在書中 Strategies for Effective Human-Computer Interaction: Sixth Edition
  提出 Eight Golden Rules of Interface Design (1986)
• Jakob Nielsen 在書中 Usability engineering
  提出 Ten heuristics (1994)

杜芬宅 比較喜歡 Ten Heuristics，有關Ten Heuristics的應用 ， 詳情請看另一篇。


computer science - 10 heuristic of usability testing
https://keithbox.blogspot.com/2018/11/computer-science-10-heuristic-of.html

介面排版的標準 Layout Deisgn Standard 

Google Material Design (2014) 發佈，針對手機應用，為應用介面訂立一套新的規範。

Printable CSS

針對網頁列印，通常是一些資訊性的網站。

例如新聞網，一些報表的輸出系統。

應該為列印，編寫針對列印時的網頁顯示方法。

保安 Security

假如不想為加密增加額外的開發成本，網站傳輸最基本的加密，就是透過HTTPS。

國際化 Internationalization (i18n)

國際化 和 本地化 在Computer Science 的領域，

意指令 軟件/服務 跨越 語言、文化，適應當地區域居往的目標群眾。

例如是語言

為網站提供多國語言，拓展網站可以服務的對象

例如是文字

有些文字的閱讀順序由左至右，有些由右至右。

網頁介面應因應文字閱讀順序作鏡射，以及調整內容對齊方向。

例如是日期時間

跨國的服務必需按照一個統一時間記錄使用者活動或指令，確保指令按時序進行。

例如 格林威治標準時間 (Greenwich Mean Time), 協調世界時 (Coordinated Universal Time)

英語地區的工作日為

Monday Tuesday Wednesday Thursday Friday Saturday Sunday

縮寫 (3字 / 2字)

Mon Tue Wed Thu Fri Sat Sun

Mo Tu We Th Fr Sa Su

華語地區為

一 二 三 四 五 六 日

日語地區為

月曜日 火曜日 水曜日 木曜日 金曜日 土曜日 日曜日

縮寫 

月 火 水 木 金 土 日

按照不同地域的文代習慣，月歷會以星期一或星期日作首欄

日期和時間的顯示方式也會不一樣

開發元件 Web Components

接下來是開發元件，有什麼資源可以協助開發。

Web Framework (AngularJS / React / Vue)

三款新興不久的東西，都在很多平台獲得不少支持。
我們可以透過幾方面的活躍程對他們有初步的認識

• Google Search History
• Download rates
• Communities

React 由 facebook 開發，早前React的版權聲明是 facebook 除時可以收回 react的使用權，令杜芬宅對 react 有點卻步，不論在公在私，用react寫出來的東西，日後facebook想如何處理都可以。所以杜芬宅沒有學習 React，而選了 Google 的 AngularJS。

較早時侯 Facebook 屈服在社群的壓力之下？宣佈 React 將會以 MIT license 釋出。
https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

UI Framework

杜芬宅收集了四款〝可以免費任用，兼且更新都挺活躍的。

Bootstrap
始於 2011 ，由 Twitter 發佈

Foundation
始於 2011 ，由 ZURB 發佈

Semantic UI
始於 2013 ，由 Jack Lukic 發佈

UIKIT
始於 2013 ，由 YOOtheme 發佈

它們都擁有以下特點

• Responsive grids layout
• Styled and enhanced all fundamental HTML elements
• Compatibility for almost all the browsers
• Holds a big support community

Not easy to switch UI framework

雖然不同的UI framework 的語法有點類似，不過仍然是不同的東西。

杜芬宅 強烈 建議你選UI framework時必需深思熟慮，不要三心兩意。

因為選定了，寫好網頁後。要轉換成其它UI framework 將會是件浩瀚的工程。

Bootstrap – colour theme and layout template

Bootstrap 背後是 Twitter ，Bootstrap 有很大的社群用戶，提供了很多免費的顏色主題，排版範本。所以你選了 Bootstrap，又想Bootstrap 看起來不一樣，不想是預設的顏色……你也有很多選擇。

收費的主題

此外，私人市場有不少設計師以各大UI framewrok為基礎，設計一些更花巧，多元化的收費版本。

杜芬宅找了兩款比較滿意的︰

Atlant - Bootstrap Admin Template

https://themeforest.net/item/atlant-bootstrap-admin-template/9217590

Materialize - Material Design Admin Template

https://themeforest.net/item/materialize-material-design-admin-template/full_screen_preview/11446068?_ga=2.256656399.506584950.1541408895-1910914733.1541408895

Icons set - Font Awesome

Font Awesome 4.7.0 提供 675 免費icons，未計算最新發佈 的 5.x.x

如無特別需要，杜芬宅都是直接選 Font Awesome

符合Google Material Design 的 UI framework

Google Material Design 推出後，不少標榜按照 Material Design 設計的 UI framework。

Materialize

http://materializecss.com/forms.html

MD Bootstrap

https://mdbootstrap.com/components/

BMD – Bootstrap + Material Design

https://codecanyon.net/item/bmd-bootstrap-material-design/11704157?ref=monikaratan&clickthrough_id=1162078748&redirect_back=true

Angular Material

https://material.angularjs.org/latest/

Web Elements / Controls (Date, Time)

輸入日期時間十分著遍，但是各瀏覽器對 HTML5 的日期輸入欄都各自發揮。

如想令使用者有統一的日期/時間輸入欄，需要額外的處理。

Calendar

如要展示月歷，可以考慮功能豐富的 fullcalendar，

在v3.0更新後，介面比較看得上眼。

Scheduler / Timetable / Roster

如要更進一步顯示 行程表 / 時間表 / 更表，那些免費的選擇就比較有限。

衡量自已力量，和免費資源提供的，可能自已編寫會比較實用。

DataTable (Grid view)

如需要顯示大量的資料，有如 excel的顯示方式。

DataTable 會是一個較成熟的工具。

統計圖

Chart.js v2 提供最基本的統計圖

• 折線圖
• 棒形圖
• 雷達圖
• 極區圖
• 圓環圖、圓形圖
• 氣泡圖

ECHARTS v3 提供35圖形種類，單是析線圖已經超過十款選擇。
是一個非常強大的圖形工貝

組織架構圖 Organization Chart

附帶一提是組織架構圖，比較少開放資源。
杜芬宅由 2013 至 2015 內有最少三次被要求實現組織架構圖。
反而在網絡上找到一些收費不平宜生成 組織架構圖 的服務。
最近終於有一個比較好用的出世
OrgChart: https://github.com/dabeng/OrgChart

Multi-Language

實現多國語言的方法，杜芬宅很早期很早期是自已寫的。
JALangs: https://github.com/keithbox/web-multilanguage-switcher

最近找到一個不錯的替代品叫
jquery-lang-js: https://github.com/Irrelon/jquery-lang-js

Office Document viewer

如系統涉及Office document ，最理想的方法是能夠在網頁內預覽或顯示，而不需要下載後打開。

ViewerJS 整合了可以檢視 .pdf 和 .odt .odp .ods 檔案

3rd Party Library

總結 第三方Open Source資源

License

簡介 常見的 開源援授權，了解你使用的開源碼，行使你的權限和履行你的務義和責任。

• MIT License (Massachusetts Institute of Technology)
• LGPL v3.0 (GNU LESSER GENERAL PUBLIC LICENSE)
• Apache License 2.0
• BSD 3-clause "New" or "Revised" License

更多授權詳情請看
https://keithbox.blogspot.com/2016/02/open-source-2016-license-review.html

AngularJS web client

如上所述，杜芬宅學習了AngularJS。
所以也比較傾向使用AngularJS開發網頁，因為可以減少不少功夫。

更多授權詳情請看
https://keithbox.blogspot.com/2018/10/angularjs-php-for-erp-system.html

開發模型 Prototype

杜芬宅為了熟練AngularJS，由2014年開始，運用AngularJS開發一個ERP核心。
並運用這個核心，按照幾個不同的實際需要開發了幾個網站。

每個網站的成果，都不斷將核心改良。

• AngularJS-CRUD-PHP (Core) (In progress, since 12 Dec 2014)
• Agent Content Management System (OrgChart Portal) (08 July 2015 to 13 Jan 2016)
• PPSP-360_Degree_Evaluation_System (19 Feb 2017 to Oct 14, 2018)
• nodejs-DistributedSys (6 Oct 2017 to Apr 1, 2018)
• Passive-Investment-Management-System (In progress, since 23 Jul 2017)

ERP 核心 AngularJS-CRUD-PHP

資料詳情︰https://keithbox.blogspot.com/2018/10/angularjs-php-for-erp-system.html
源碼︰https://github.com/keithbox/AngularJS-CRUD-PHP

OrgChart Portal

提供輸入員工資料，生成組織架構圖。
是建基於開源的組織架構圖生成工貝。

PPSP-360_Degree_Evaluation_System

360度僱員評核系統
資料詳情︰https://keithbox.blogspot.com/2018/10/ppsp-360-degree-evaluation-system.html
源碼︰https://github.com/keithbox/PPSP-360_Degree_Evaluation_System

nodejs-DistributedSys

源碼︰https://github.com/keithbox/nodejs-DistributedSys

Passive-Investment-Management-System

源碼︰https://github.com/keithbox/Passive-Investment-Management-System

Reference

Native Apps, Web Apps, and Hybrid Apps
https://www.nngroup.com/articles/mobile-native-apps/

JavaScript API access mobile device features
http://blog.teamtreehouse.com/exploring-javascript-device-apis
https://www.w3.org/TR/#tr_Javascript_APIs
https://caniuse.com/#search=Geolocation
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Asynchronous JavaScript and XML (Ajax)
Example: https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
Life product: https://www.hk01.com/channel/01%E8%A7%80%E9%BB%9E

Cookies limits
https://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key
http://browsercookielimits.squawky.net/

Browser compatibility of HTML5 and CSS3
http://html5test.com/ 520/555 scores for chrome
http://css3test.com/ 59% for chrome

Web Content Accessibility Guidelines (WCAG) 2.0
https://www.w3.org/TR/WCAG20/#conformance
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=141%2C133#visual-audio-contrast-scale

WCAG (無障礙網頁／流動應用程式)
https://www.ogcio.gov.hk/tc/community/web_mobileapp_accessibility/#

WCAG 2.0 Conformance Claim
https://www.w3.org/WAI/WCAG2-Conformance#level-A

Don Norman - The Seven Stages of Action
https://www.youtube.com/watch?v=n4fCHYbRcKw

Nielsen - Ten heuristics
http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-design

Google Material Design (2014)
https://material.io/guidelines/#

Google Material Design
http://gigazine.net/gsc_news/en/20141118-android5-design-before-after

Web Development Standard – Printable CSS
http://edutechwiki.unige.ch/en/CSS_for_print_tutorial

Web Framework (AngularJS / React / Vue)
https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Web Components
https://bootswatch.com/3/

Web Components
https://startbootstrap.com/template-categories/all/

Atlant - Bootstrap Admin Template
https://themeforest.net/item/atlant-bootstrap-admin-template/9217590

Materialize - Material Design Admin Template
https://themeforest.net/item/materialize-material-design-admin-template/full_screen_preview/11446068?_ga=2.256656399.506584950.1541408895-1910914733.1541408895

Font Awesome
http://fontawesome.io/icons/

UI Framework that implement - Google Material Design
https://superdevresources.com/material-design-web-ui-frameworks/

Materialize
http://materializecss.com/forms.html

MD Bootstrap
https://mdbootstrap.com/components/

BMD – Bootstrap + Material Design
https://codecanyon.net/item/bmd-bootstrap-material-design/11704157?ref=monikaratan&clickthrough_id=1162078748&redirect_back=true

Angular Material
https://material.angularjs.org/latest/

Calendar - fullcalendar
https://fullcalendar.io/js/fullcalendar-3.8.0/demos/basic-views.html

DataTable
https://datatables.net/extensions/responsive/examples/initialisation/className.html

Chart.js v2
http://www.chartjs.org/

ECHARTS 3
https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-line

OrgChart
https://github.com/dabeng/OrgChart

JALangs
https://github.com/keithbox/web-multilanguage-switcher

jquery-lang-js
https://github.com/Irrelon/jquery-lang-js

License
https://keithbox.blogspot.com/2016/02/open-source-2016-license-review.html

ERP 核心 AngularJS-CRUD-PHP
https://keithbox.blogspot.com/2018/10/angularjs-php-for-erp-system.html
https://github.com/keithbox/AngularJS-CRUD-PHP

PPSP-360_Degree_Evaluation_System
https://keithbox.blogspot.com/2018/10/ppsp-360-degree-evaluation-system.html
https://github.com/keithbox/PPSP-360_Degree_Evaluation_System


nodejs-DistributedSys
https://github.com/keithbox/nodejs-DistributedSys

Passive-Investment-Management-System
https://github.com/keithbox/Passive-Investment-Management-System