杜芬宅比較偏愛網站的開發,較早時侯完成了一個 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
Materialize - Material Design Admin Template
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
MD Bootstrap
BMD – Bootstrap + Material Design
Angular Material
Web Elements / Controls (Date, Time)
輸入日期時間十分著遍,但是各瀏覽器對 HTML5 的日期輸入欄都各自發揮。
如想令使用者有統一的日期/時間輸入欄,需要額外的處理。
Calendar
如要展示月歷,可以考慮功能豐富的 fullcalendar,
Scheduler / Timetable / Roster
如要更進一步顯示 行程表 / 時間表 / 更表,那些免費的選擇就比較有限。
衡量自已力量,和免費資源提供的,可能自已編寫會比較實用。
DataTable (Grid view)
如需要顯示大量的資料,有如 excel的顯示方式。
DataTable 會是一個較成熟的工具。
統計圖
Chart.js v2 提供最基本的統計圖
- 折線圖
- 棒形圖
- 雷達圖
- 極區圖
- 圓環圖、圓形圖
- 氣泡圖
是一個非常強大的圖形工貝
組織架構圖 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 ,最理想的方法是能夠在網頁內預覽或顯示,而不需要下載後打開。
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-DistributedSysPassive-Investment-Management-System
源碼︰https://github.com/keithbox/Passive-Investment-Management-SystemReference
Native Apps, Web Apps, and Hybrid Appshttps://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
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