Manning 今日 5 折電子書 https://goo.gl/PnMXoD ，進入網站後內附有 5 折優惠折扣碼
今日主題是 UX
1. Usability Matters:Mobile-first UX for developers and other accidental designers
對於大量用戶而言，移動裝置已替代桌面電腦為主要的ㄧ平台。 作為一名應用程式開發人員，你必須行動手機優先，讓客戶開心。 移動應用程式需要採用不同的 UI 設計方法，如果你希望您的應用程式從競爭中脫穎而出，可用性很重要！ 一個令人驚艷的移動 UX 可以是讓用戶湧入你的應用程式或使其完全刪除的區別。 幸運的是，建立良好的用戶界面是一種可以學習的技能。
這本書為你提供實用的建議和指導，為本地和基於網路的移動應用程式創建有吸引力，優雅和有用的用戶界面。 你將首先學習一個偉大的應用程式體驗的六個維度。 然後，你將被引導通過實際的概念為你的用戶創造這些偉大的體驗。 遵循專家介紹的模式，範例和清單，你將學習如何在自己的設計中識別出好的與不好的 UX，並掌握將最佳應用與其他軟體框架分開的技術。
2. Isomorphic Development with JavaScript
你曾經有兩個網頁應用程式架構選項：後端伺服器渲染( render )反應請求或是前端瀏覽器渲染單頁應用程式。 現在你有一個新的選擇： isomorphic 應用程式，讓你利用兩個世界中最好的。 它們在伺服器上呈現 HTML 頁面，將呈現的標記提供給瀏覽器，並在瀏覽器中表現為單個頁面應用程序。 你可以獲得諸如 SEO 相容 stack，快速頁面載入，改進的性能以及利用緩存功能的伺服器渲染優勢。 你可以獲得單頁應用程式優勢，包括初始載入後的伺服器互動，常用的 UX 模式（如 modals）以及對用戶互動的快速反應。 Node 和 React 使 Isomorphic 應用程式實際和簡單的建構。 現在，你可以編寫在伺服器和客戶端上運行的程式碼，以及有效地執行從伺服器到客戶端的切換。
3. Design for the Mind ：Seven Psychological Principles of Persuasive Design
這本書教導網頁設計師和開發人員如何創建吸引我們天生的人類反應的網站和應用程式。 作者是心理與交流研究員維克多·約克科（Victor Yocco）介紹了最直接的相關和適用的心理概念，將每個理論分解成易於消化的原則，然後展示如何使用它們來告知更好的設計。
>UX 相關線上課程介紹請參考 https://goo.gl/AXmbMS
html javascript分開 在 [心得]給網頁初心者一篇文章- 看板Web_Design - 批踢踢實業坊 的推薦與評價
或許你也是站在小河旁邊，看著逆流而上的小魚兒，然後心所感悟
於是立下了弘願，奮不顧身的跳下河流，探出已快滅頂的頭大喊：
「我要成為網頁設計師！!咕嚕咕嚕~~..............」
很好，你的這句話打動了我的腐朽的心靈，開啟我的宅門
看來我只好把我畢生所學來誤人子弟了(一一+)
俗話說的好，師父引進門，徒弟來滅門
希望有朝一日能在我背上看見你的藍波刀
---------------------------------------------------------------
client 第一階段：HTML 或 HTML5
---------------------------------------------------------------
【基本】
在網頁按右鍵檢視原始碼，可以了解文內９０％標籤的意義
而不是一堆陌生的文字，例如<p>（段落)<br />（斷行)
<hr />(水平線)等...，能夠對每種標籤了解。
【專業】
寫出來的HTML必需符合W3C的規定(註1)，而且也必需考慮到影
響朗讀程式的一些必要屬性例如header，以及使用者輸入表單時
的跳欄順序tableindex、accesskey等屬性，換句話說也要考慮
無障礙網頁設計的細節
註1：如果你使用的firefox瀏覽器，你可以考慮安裝下列的plus-in
來幫助你驗證網頁是否符合W3C的規定
https://users.skynet.be/mgueury/mozilla/
【拋磚引玉】
通常只要有《基本HTML》的能力，就能進行下一階段了，不過這階段
最大的問題就是學習者會過度依賴編輯器(例如Dreamweaver、FrontPage
等...)來設計網頁，導致對於HTML仍然不熟，建議的最好的方法是
手裡拿著一本HTML的書(如果你還是學生，請善用圖書館資源)，試著用筆
記本編輯並馬上開啟瀏覽比對你所編輯的內容是否如同書上所說的一樣。
至於《專業HTML》只要在後期編輯時慢慢的提醒自己去注意，就會習慣。
不過如果你一開始就把檢驗工作做好，比較能節省學習時間
---------------------------------------------------------------------
client 第二階段：HTML + CSS 或 HTML5 + CSS3
---------------------------------------------------------------------
【基本】
將大部分的HTML的標籤屬性，改由CSS取代
例如將 <p><font color="red">紅字的文字</font></p>
改為 <p style="color:red">紅字的文字</p>
【專業】
使用CSS的技巧，做出版面定位、選單(註2)，並且
將HTML當作文字資料(如身體)，CSS當作樣式(衣服)
如此分開的設計
註2：透過CSS你可以完成如下列的選單
https://cssmenumaker.com/
註3：下列的網頁是一個相當好的CSS活用參考網站，你可以發現網站
使用同一個HTML資料內容，套用不同的CSS樣式，有著不同的畫面
https://www.csszengarden.com/
【拋磚引玉】
CSS部分需要長期設計網頁排版才能快速累積經驗技巧，最好
練習方式就是，「找到一個設計漂亮的網頁，然後用CSS技巧
將畫面編排成一模一樣」如此一來你就會為了要去完成某個
面版畫面，而對CSS有更深的了解。如果你不知道從哪下手，
試著去設計你的blog(部落格)的CSS吧
-------------------------------------------------------------------
client 第三階段：Javascript
-------------------------------------------------------------------
【基本】
事實上，javascript(簡稱js)算是屬於程式語言部分了，在此階段你必
需知道js的基本命令，例如絛件分歧(if..else,switch)、迴圈(for,while..)
輸出(alert,document.write)還有變數的觀念(把他想成國中的代數運算)等...
【專業】
能透過js去動態網頁的內容(不需重整網頁)，甚至改用最近熱門的JQuery來
js部分舊式用法(註4)，最後將網頁的讀取都以Ajax的技術觀念完成
註4:下列範例為使用JQuery完成的動態網頁功能
https://doublekai.org/demo/jpvowel/
【拋磚引玉】
javascript算是最基礎程式語言，在這部分你必需將他視為一個獨立的單元
來學習，最好能買一本「JavaScript完整語法參考辭典」(既然他是辭典，算是
工具書，如果經濟上准許的話，那麼就買回家放著吧，用借的還要歸還比較麻煩)
試著將書本上的每一個範例看完，如此應該就有一堆的js功力了。接著開始試著
去學使用JQuery
JQuery的基本教學可以參考
https://jsgears.com/thread-63-1-1.html
以上屬於client的部分，現在線上有提供非常方便的工具，可以拿來練習
https://jsbin.com/ 或 https://jsfiddle.net/ 都是不錯的選擇。
jsbin更詳細部分可參考保哥的文章：https://goo.gl/51jL9
※※※※※※※※※※※※※※※※※※※※※※※※※※※※
※ 前三段都為client的技術，意思就是你不需安裝任何像是
※ PHP、JSP、ASP.net的server環境，只要用最簡單的工作
※ (筆記本 + firefox or IE + 書) 就可以做學習了
※※※※※※※※※※※※※※※※※※※※※※※※※※※※
-------------------------------------------------------------
Server 第四階段：PHP 或 ASP.net 或 JSP 或 Ruby
-------------------------------------------------------------
【基本】
跟js的基本部分相當類似，若你有javascript的基礎，那麼學起來
就沒那麼困難了，此階段你必需安裝學習的環境，以PHP為例的話
若你要快速設置環竟，可以試著使用Wamp、Appserv(註5)，學習目標
可以放在函式的運用(註6)，並且使用PHP去產生HTML(所以這就是你
為什麼必需先了解HTML囉)
【專業】
使用物件導向的方式撰寫程式，利用ＷebService(註7)的遠端程式呼叫
技術做資料的讀取，考慮分散式資料處理的資料設計
註5：關於PHP環境快裡建置的部分，你可以參考
https://doublekai.org/blog/?p=242
註6：以PHP為例可用的函式多到你可能用不到，把重點放在字串、陣列
檔案、雜項的部分
https://linux.tnc.edu.tw/techdoc/banic/
【拋磚引玉】
事實上第四階段會與下一階段(第五階段)並存進行，這也是他們為
server端的最終意義，學PHP的目的就是為了從資料庫讀資料，然後
處理完畢後將他輸出
---------------------------------------------------------------
Server 第五階段：MySQL、PostgreSQL、SQL Server
---------------------------------------------------------------
【基本】
了解資料庫正規化、表單的設計與關聯概念，基本的SELECT語法
簡單的JOIN
【專業】
熟用各種SQL語法，例如使用大量的join複雜性高的關聯表單語法
能在資料被讀取之前，就已經透過內建的SQL語法完成必要的處理
【拋磚引玉】
很遺憾...目前只有基本的程式，專業的部分還不是很熟(失格！紅牌退場..囧rz)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
結語：
1.若你還對多媒體有興趣，可以考慮加入flash這個選項
甚至可以考慮換flex....算了= =
2.你想開發2D/3D遊戲，恭喜你走錯路了，請去插C/C++或C#的背吧
(不過話說flash有俄國人開發一個3D引擎，很炫喔，如果只做小型3D遊戲可以考慮)
請參考：https://www.flashsandy.org/demos
3.分享才是王道，請多學習外國人被插背的精神
抱怨文：https://doublekai.org/blog/?p=240
4.資料庫部分如果你想開發的是單機版的網頁應用程式，你可以使用SQLite或是
Google Gears API
相關參考：https://blog.ijliao.info/archives/2007/05/31/3099/
--
歡迎來我的網誌看看
https://blog.liaosankai.com
https://liaosankai.pixnet.net
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 203.67.218.165
※ 編輯: liaosankai 來自: 123.240.37.127 (09/19 01:47)
... <看更多>