lazyload the images

最新精選 Featured post

異世界穿越作品整合

訂閱

訂閱 FB 專頁

每月雙數周日為固定發佈日

訂閱FB 專頁,有新發佈時將會立即看見。
Youtube 頻道經常會有電玩錄影

05/11/2018

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為基礎,設計一些更花巧,多元化的收費版本。
杜芬宅找了兩款比較滿意的︰



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。


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






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


1 comment:

  1. Very Helpful Article! To support the demand for React native app development, I would also like to share that according to the Stack Overflow Developer Survey 2021, React Native takes the 6th spot in the ranking with 14.51% of all respondents' votes. Talking about only professional ones, here React Native places 5th with 16.48%. Constantly, top react native app development company in the USA are growing rapidly with the increasing demand of cross-platform mobile apps.

    ReplyDelete