HTML5 V.S. Native

i.m.a.c. 鬼才


這是個html5的年代

當然簡報也要HTML5

http://slid.es/jackai/html5-vs-native





2007年...

罪魁禍首...


加害者


現場...


( HTC、SONY勒?? )

受害者....


螢幕比正妹還有吸引力...

2005年教宗上任的照片


美聯社記者Luca Bruno，2005年拍攝。
（圖片來源：nbcnews.com）

2013年新教宗上任的照片


美聯社記者Michael Sohn，2013年拍攝。
（圖片來源：nbcnews.com）

從另一個角度看現場


CNN於同一現場錄製的影片截圖。（圖片來源：petapixel）

但是....我們拿line來舉例...


開發者表示哭哭 :(



Don't worry ! 救星在這 !


比較


Mark Zuckerberg表示 :

Our Biggest Mistake Was Betting Too Much On HTML5
[ FACEBOOK將賭注壓在HTML5上，這是我們最大的錯誤 ]
 

慘遭打臉...

So, when Mark Zuckerberg said HTML5 wasn't ready, 
we took a little offense to the comment.
[ HTML5絕對不是造成FACEBOOK龜速的原因 ]

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

HTML5 是什麼 ? 能吃嗎 ?



讓我們繼續看下去...

WHAT's HTML5 ?

  • 1991 HTML  <--在我們出生那年 
  • 1994 HTML 2
  • 1996 CSS 1 +  JavaScript 
  • 1997 HTML 4
  • 1998  CSS 2 
  • 2000  XHTML 1 
  • 2002 Tableless Web Design
  • 2005  AJAX 
  • 2009  HTML 5 

 HTML 5 ~= CSS3 + JavaScript + HTML

HTML 5 ~= CSS + JavaScript + HTML


HTML : 負責網頁內容(內在) 

CSS : 負責頁面樣式(外觀) 

 Javascript : 負責頁面互動　



我今天不是來講技術的...

請珍惜生命遠離ie

(婊科技：第三次瀏覽器大戰)

當你CSS排版碰到IE時會很想...


(kill IE)

還是放棄ie8以下的世界


連最大的JavaScript函式庫在2.0版時都不再支援IE8，

你還堅持什麼?



http://jquery.com/browser-support/



接下來的DEMO，有些IE

不支援....

HTML5 還能做到什麼 ?

你現在看到的，

就是HTML5簡報！

Slid.es
  • 台下可以往回翻之前沒看清楚的內容。
  • 可以同步更新簡報資料。
  • 跨平台。

在HTML5簡報裡，

我要放什麼都行！


YOUTUBE也行！



多媒體

BUMBLER TO SPEECH

手機要用Chrome開
http://zhusee2.github.io/bumbler-to-speech/

3D圖形與效果

WEBGL

http://www.gooengine.com/demofiles/pearl-boy/index.html

裝置存取

判斷使用者位置 : Geolocation
http://goo.gl/Uw9co

裝置存取


你的筆電正在看著你...
http://goo.gl/NwmPl

這手機不支援就不放QR碼了~

裝置存取


再來，配合OPEN CV
http://neave.github.io/face-detection/

裝置存取


再進階，做成遊戲。
http://shinydemos.com/facekat/

這可以回去玩玩看 ^_<



DEMO結束

手機版網頁的兩種寫法



  1. 完全不同的網站結構
    EX : 電腦版的faecbook : www.facebook.com
    　　手機版的faecbook :        m.facebook.com
  2. RWD設計(自適應網頁設計)
    EX : bootstrap : http://twitter.github.io/bootstrap/

推薦一本學校老師寫的書

http://goo.gl/62vId

但是...


現在手機的效能還沒起來，
HTML5也預計在2014年完成，

要做HTML5的手機遊戲的話...再給他一點時間吧！


什麼時候該 HTML5 ?


  • 當使用者不需要下載你的APP。
  • 當你的資訊內容更新很迅速。
  • 你不想被Apple、google綁住時。
EX : 新聞網頁

什麼時候該 Native ?


  • 當你需要好的UX。
  • 當你需要動到手機硬體功能時。
EX : 要用到藍芽的APP



有個折衷的辦法...

Hybird(混合)

Titanium v.s PhoneGap

 V.S                           


只需要維護一套程式碼，就能發佈到多個平台

運作原理 - titanium


Titanium-大部份程式碼可共用

Titanium - 針對平台最佳化


運作原理 - PHOnegap




Phonegap

無邊框瀏覽器、將HTML包裝成APP、
提供API存取裝置功能

但是在App store上架時

常會因為APP不是用

原生IOS介面而被駁回...




因為APP STORE是人工審核，
可能一個帳號都是由同一個人審核，
聽說重新註冊一個帳號就能通過了。

最後，介紹幾個社群


JavaScript.tw 社群

http://fb.com/groups/javascript.tw

截至 2012 年底，會員數將近1500 人，主要致力於藉由社群力量來提昇國內 JavaScript 之相關基礎技術，為國內 JavaScript 之開發者打好基礎。

HTML5 & CSS3 社群

http://fb.com/groups/htmlfive
 
截至 2012 年底，會員數超過1400 人，主要致力於藉由社群力量來促進國內前台技術之討論及提昇相關技術 (HTML5, JavaScript, CSS3) 之開發能力。

Node.js 社群

http://fb.com/groups/node.js.tw
 
截至 2012 年底，會員數1100餘人，主要致力於藉由社群力量來提昇國內 JavaScript 後台技術 (Node.js) 之推廣及應用。

PHP 社群

http://fb.com/groups/199493136812961
http://phpconf.tw/2013/


給各位一個


很重要的回家作業，


而且有助於HTML5發展！

把家裡電腦的IE換掉



IE是拿來

下載其他瀏覽器用的

怎麼做呢？很簡單！



下載GoogleChrome！
http://www.google.com.tw/intl/zh-TW/chrome/browser/

或

下載FireFox！
http://moztw.org/firefox/

你以為這圖示在桌面上，

你爸媽就會拋棄IE嗎？

太天真了....


複製你的Chrome或firefox捷徑


然後把名成改成

Internet Explorer


但是圖示破功了...

沒關系！我可是鬼才耶！

右鍵-->內容-->變更圖示-->瀏覽

再來

瀏覽到 C:\Program Files\Internet Explorer\iexplore.exe
選第一個後一直按確定！！

最後一步...

記得匯入書籤...

完成！！



參考資料


參考資料


Thanks! - Q&A






Made with Slides.com