Google Web Starter

方健發表於2015-03-10

一個很好的Web教程和樣例工程。包括sass,gulp,響應式頁面,基本樣式。

https://developers.google.com/web/starter-kit/ https://developers.google.com/web/fundamentals/getting-started/ https://github.com/Google/WebFundamentals
https://www.udacity.com/course/cs256
資料整理:包括網站原始碼,視訊,字幕,樣例程式碼。
udacity-cs256-Mobile_Web_Development

視訊提到的:

頁面速度評分和建議
https://developers.google.com/speed/pagespeed/insights/
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en​
移動裝置友好度測試
https://developers.google.com/webmasters/mobile-sites/?hl=zh-cn
移動網站入門
https://developers.google.com/webmasters/mobile-sites/
圖片自適應解決方案:
image-set
https://github.com/scottjehl/picturefill
https://github.com/estelle/clowncar
touch

if('ontouchstart' in window) addTouchHandles();
addMouseHandles();

H5相容性: http://caniuse.com
pointer 微軟統一touch,mouse click,pen
https://www.polymer-project.org/
touch更新檢視:用requestAnimationFrame(只在檢視更新時呼叫)
gesture recognition libraries
Hammer JS,JQTouch,Centure Touch
label標籤需要包含input標籤,否則label內容不能點選

<label><input type="checkbox" >Hello</label>

H5 樣例 http://simpl.info/
http://shinydemos.com/qr-code/
http://webaudiodemos.appspot.com/
app cache manifest改變後會重新load,用# version 0.1
indexDb & WebSql indexDB新,但是ios和老android不支援 websql在ios和老android上支援。但是停止維護
解決:indexDB shim http://nparashuram.com/IndexedDBShim/
http://www.html5rocks.com/
Google web 效能優化
https://developers.google.com/web/fundamentals/performance/
其他課後資料
https://www.udacity.com/wiki/cs256/external-resources
網速測試:
http://www.webpagetest.org/ DevTool
https://developer.chrome.com/devtools
http://discover-devtools.codeschool.com/

相關文章