ãã2007 å¹´ W3C (ä¸ç»´ç½èç)ç«é¡¹ HTML5ï¼ç´è³ 2014 å¹´ 10 æåºï¼è¿ä¸ªé¿è¾¾å
«å¹´çè§èç»äºæ£å¼å°ç¨¿ã
ããè¿å»è¿äºå¹´ï¼HTML5 é¢ è¦äº PC äºèç½çæ ¼å±ï¼ä¼åäºç§»å¨äºèç½çä½éªï¼æ¥ä¸æ¥ï¼HTML5 å°é¢ è¦åç App ä¸çãè¿å¬èµ·æ¥æç¹å±è¨è¸å¬ï¼ä½è¥è®¤çåæ HTML5 çåå±å²ï¼ä½ ä¼åç°ï¼è¿ä¸ªä¸ççåå±è¶å¿ç¡®å®å°±æ¯è¿æ ·ã
ããçç¥åå²æè½é¢ç¥æªæ¥ï¼å
让æ们æ¥çç HTML5 为ä»ä¹è¯çãè¿ 8 å¹´æ¯æä¹è¿æ¥çã
ããä¸ã HTML5 çè¯ç
ããèª W3C äº 1999 å¹´åå¸ HTML4 åï¼Web ä¸çå¿«éåå±ï¼ä¸çç¹è£ã人们ä¸åº¦è®¤ä¸º HTML æ åä¸éè¦å级äºãä¸äºè´åäºåå± Web App çå
¬å¸å¦è¡æç«äº WHATWG ç»ç»ï¼ç´å° 2007 å¹´ï¼W3C ä» WHATWG æ¥æç¸å
³å·¥ä½ï¼éæ°å¼å§åå± HTML5ã
ããHTML5 çåå±å²ï¼æç¨æ·çéæ±å¨æ¨å¨ï¼æææ¯å¼åè
çéæ±å¨æ¨å¨ï¼æ´æ巨大çåä¸å©çå¨æ¨å¨ã
ããå¨äºèç½çæ©æï¼å¯¹ç¨æ·èè¨ï¼è½æå¼æµè§å¨æ¥å
¥å°äºèç½ä¸çå°±æ¯ä¸ä¸ªç¥å¥çäºæ
ï¼ä½äºèç½åå±å° 2005 å¹´ååï¼å¼å§åºç°ä¸ä¸ä¸ªååï¼å°±æ¯å®½å¸¦äºèã
ããéç宽带çæ®ååçµèæ§è½çå¢å¼ºï¼äººä»¬ä¸å满足äºå纯çéè¿äºèç½çæ°é»ãæ¶åé®ä»¶ï¼æ¶èæ´é«å¸¦å®½ç娱ä¹äº§åå¼å§åºç°ï¼å°±æ¯æµè§é¢åç½é¡µæ¸¸æãå
¶å®è§é¢å游ææ¯å¤èçéæ±ï¼å¨äºèç½ä¸æ®åçæ¶åï¼éæ±ç满足æ¹å¼æ¯ç¦»çº¿ä¼ è¾ç VCD å游æå
ç;åæ¥äºèç½éæ¸æ®åï¼äººä»¬æ´æ¹äºä½¿ç¨æ¹å¼ï¼éè¿ä¸è½½è½¯ä»¶+æ¬å°åªä½ææ¾å¨æ¥çè§é¢ï¼ä¸è½½ä½ç§¯è¾å¤§ç端游ç©æ¸¸æã
ããä½æ¯å¯¹æ¶è´¹è
ä½éªæ´å¥½çæ°æ¹å¼è¿æ¯åºç°å¹¶é¢ è¦äºä»¥åçä¸åï¼é£å°±æ¯æµåªä½åç½é¡µæ¸¸æãYoutube çå
¬å¸ææ¡ä½æ½®æµé£éå´èµ·ï¼åç§é¡µæ¸¸å
¬å¸ä¹å¦é¨åæ¥ç¬ã
ããä½æ¯ HTML æ å没æææ¡ä½äº§ä¸çåååæ¶æ¼è¿ï¼æµè§å¨äº§åä¹æªå级ï¼è¿åæ°éæ±è¢«æµè§å¨æ件满足äºï¼é£å°±æ¯ Flashãè¿ä¸ªé¨ç½²å¨äº¿ä¸æµè§å¨éçåä¸æ件俨ç¶æ为äºå®æ åã2005 å¹´ Adobe å·¨èµæ¶è´ Macromediaï¼æ Flash æ¶å½æä¸ï¼ç´§æ¥ç大å¹
æ¨å¹¿ FLV æµåªä½å action script è¯è¨ï¼å¾ææ¾è¿æ¡©æ¶è´å¯ä»¥å为 IT 并è´çç»å
¸æ¡ä¾ï¼FLV æµåªä½å Flash 游æé£é¡äºèç½ï¼Adobe å¨æ°ç产ä¸å级ä¸æ«åäºå¤§éçå©æ¶¦ã
ããé¤äº Flash è¿ä¸ªåä¸äº§åæ为äºäºå®æ åï¼W3C è¿é¢ä¸´ä¸ä¸ªå°´å°¬ï¼å°±æ¯å¦ä¸ä¸ªç§ææ©å±åè®®çå¶é è
âIEãIE å½æ¶å¨æ¡é¢æµè§å¨å æåæå°ä½ï¼å¹¶ä¸æ©å±äºå¤§éç IE Only è¯æ³ï¼å¼åè
å®å
¨ä¸ç¥éè¿äºè¯è¨æ¯è°å®ä¹çãæ´ä¸ª web ä¸çï¼å°±è¢«ä¸¤å®¶å
¬å¸å¾®è½¯ +Adobe ç»æ¶äºã
ããå¾å¤ IT 巨头é½åä¸ä½äºï¼å°¤å
¶æ¯è¹æå GoogleãPC æä½ç³»ç»çä¸çé¾æçªç ´ï¼Web æµè§å¨è¢«è¹æå¯äºåæï¼èä¸ç¬¬ä¸ä»£ iPhone åªæ¯æç½é¡µï¼é£æ¶è¿æ²¡æ Appstoreï¼Safari æ¯ä¹å¸æ¯é常çéç产å;æ°è´µ Google è½ç¶å¤§éèµå© Mozillaï¼ä½å¹¶æªå¯¹ IE çå°ä½äº§çå®è´¨å½±åï¼æ¶è´äº YouTube ååç°åºå±è¢« Adobe æ§å¶ï¼ä¹æ¯é常é¾è¿ï¼èä¸ Google æ¯å¹´ç» IE çæç´¢æ¡å Adoble FLV 缴纳çè´¹ç¨çä¸æ¯å°æ°ç®ã
ããæ¢ç¶å¤§å®¶é½æ¯ W3C ç主å¸åä½ï¼å¥½å§ï¼æ们éæ°å¼å§å HTML5 å§ã
ããæ¯çï¼HTML5 å
¶å®å°±æ¯è¿ä¹è¯ççãé£æ¯ 2007 å¹´ï¼IE å Flash ç±ç转衰ç转æç¹ã
ããäºã HTML5 第ä¸é¶æ®µï¼ Web å¢å¼ºä¸ç ´åæ
ããèª HTML5 è¯ç以æ¥ï¼ä¸å
±ç»åäºä¸¤ä¸ªé¶æ®µï¼åå«æ¯ Web å¢å¼ºå移å¨äºèç½ãæ们å
ä» Web å¢å¼ºè¯´èµ·ã
ããweb ä½éªç丰å¯å¢å¼ºä¸»è¦è¡¨ç°å¨ï¼1. webappï¼æ¯å¦ gmail;2. æµåªä½;3. 游æãæä»¬å°±è¿ 3 个æ¹é¢æ¥è®² HTML5 åäºä»ä¹ã
ãã1. webApp
ããHTML5 æ°å¢äºç¦»çº¿åå¨ãæ´ä¸°å¯ç表å(æ¯å¦ Input type=date)ãjs 线ç¨ãsocket çä¹ãæ åæ©å± embedã以åå¾å¤ css3 æ°è¯æ³â¦
ãã2. æµåªä½
ããHTML5 æ°å¢äº audioãvideo
ãã3. 游æ
ããHTML5 æ°å¢äº canvasãwebgl
ããå½ç¶è¿æ Google åªåå¨ HTML5 ä¸æ¨è¿ Header å Section çæ ç¾ï¼ä»¥å©äºæç´¢å¼æåæï¼è¿äºä¸å¤è¿°ã
ããHTML5 è¡¥å
æµåªä½å游æè½ååï¼å ä¸è¹æ强å¿æç»å¨ iOS ä¸å¼å
¥ Flashï¼æåçéå¶äº Flash çåå±ï¼ç¶å就该éå¶ IE ç§æè¯æ³äºã
ããå¨ HTML5 æ åçå级è¿ç¨ä¸ï¼è¹æå Google åæ¶ä¹çå°äºæµè§å¨å¸åºéæ°æ´ççæºä¼ï¼ä»ä»¬ä¸æ¹é¢åä¸ HTML5 çè§èï¼ä¸è¾¹å¨æµè§å¨äº§åä¸ååãApple é¦å
å¼å§å¤§ååå± Safariï¼å»ºç« WebKit å¼æºé¡¹ç®ï¼MacãiOSãWindows å¤å¹³å°é½åå;Google èµ·åæ¯èµå© Mozilla å¼å Firefoxï¼åæ¥èªå·±å¼åäº v8 å¼æï¼å并 WebKitï¼äº 2008 å¹´æ£å¼æ¨åº ChromeãâIE çç§æè§è +Flash ä¸æ¯æ åï¼æ们ææ¯æ åâè¿æ ·çå£å·å¨æ°ä¸ä»£æµè§å¨å¤§æä¸æåï¼IE ç¬é´æ为å夫ææçåæ代表ï¼çè³æäºé»ç¢ Web åå±ç罪人(å½æ¶ IE6 å·²æ°å¹´æªæ´æ°ï¼å¹¶ä¸ä¸æ¯«ä¸æ§ Firefox çåå±)ã
ããåå微软æ¤æ¶ä¹åºäºææï¼æ¨åºäºä¸ç³»åå³ä¸å®æ´æ¯æè§èåäºç¸ä¸å
¼å®¹ç IE7ã8ã9ã10ï¼å½»åºå¤±å»äºå¼åè
çå¿ã
ããAdobe ç Flash 被éå¶ï¼ä¸ Web é¸ä¸»çä½åæ¦è©èè¿;IE çç§ææ å被éå¶ï¼å¹¶ä¸é æ IE å¸åºä»½é¢ä¸åä¸æ»ï¼ç´å° IE ææ°ç移å¨çæ¬åè¿æ¥å¼å§æ¯æ WebKit ç§æè¯æ³ï¼çæ¯ä»¤äººååãä¸ç¥é HTML6 æ¯ä¸æ¯è¯¥æå WebKit åæäºã
ããä¸ã HTML5 第äºé¶æ®µï¼ 移å¨äºèç½
ããéç Chrome å Safari çé«æçè¿ï¼ä»¥å IE+Flash çè¡°è½ï¼HTML5 åä¸æ®µè½ï¼è¿å
¥äºä¸ä¸ä¸ªæ¶ä»£ââ移å¨äºèç½ãHTML5 ç跨平å°ä¼å¿å¨ç§»å¨äºèç½æ¶ä»£è¢«è¿ä¸æ¥å¸æ¾ãHTML5 æ¯å¯ä¸ä¸ä¸ªéå PCãMacãiPhoneãiPadãAndroidãWindows Phone ç主æµå¹³å°ç跨平å°è¯è¨ãJava å Flash é½æ¾æ¢¦æ³è¿ä¸ªä½ç½®ï¼ä½æ¢¦æäº iOSãæ¤æ¶äººä»¬çº·çº·å¼å§ç 究åºäº HTML5 å¼å跨平å°ææºåºç¨ãå¾å¤äººå½æ¶è®¤ä¸ºï¼åçåºç¨åªæ¯è¿æ¸¡ï¼å°±åå½å¹´ä»C/Sç»æ转å为B/Sç»æä¸æ ·ãèä¸å¦ä¹ Objective-C å Java å¾è´¹å²ï¼ææ¢ç¶ä¼ç½é¡µå¼åï¼ä¸ºä½ä¸è¯è¯ HTML5ã
ããW3C æ¤æ¶æç«äº Device API å·¥ä½ç»ï¼ä¸º HTML5 æ©å±äº CameraãGPS çææºç¹æç APIï¼ç¶è麻ç¦çæ¯ï¼ç§»å¨äºèç½åæçè¿ä»£å¤ªå¿«äºï¼ææº OS å¨ä¸åçæ©å±ç¡¬ä»¶ APIï¼éèºä»ªãè·ç¦»æåºå¨ãæ°å计ãããæ¯å¹´ææº OS é½æ大çæ¬æ´æ°ãè W3C ä½ä¸ºä¸ä¸ªæ°ç¾å®¶ä¼ååä½å
±åå³ççç»ç»ï¼ä»æ åèæ¡çæåºå°è¾¾æä¸è´æ¯é常å¤æçè¿ç¨ï¼è·ä¸ä¸ç§»å¨äºèç½åæçå¿«éè¿ä»£ã
ããPhoneGap çåºç°ï¼ç»å¼åè
æå¼äºä¸æçªãå¾å¤äººæå¾
PhoneGap ä¸åæ©å± APIï¼æ¥è¡¥å
æµè§å¨çä¸è¶³ãAdobe çå° PhoneGap 仿ä½çå°äºéæ¯æ±æ¹å°ä½çå¸æï¼ä½å¨ Adobe æ¶è´ PhoneGap åï¼ååç°è¿ä¸ªä¸è¥¿å¯åç¨æ§ä¸è¶³ï¼èä¸å¼æºä½¿å¾ Adobe æ æ³å Flash é£æ ·è·ååä¸å©çï¼äºæ¯å°±æ PhoneGap æç»äº Apacheï¼æ¹å为 Cordovaã
ããå 为åç§åå ï¼Cordova çå®ä½æç»æ²¡ææ为æµè§å¨ç强åï¼èèµ°åäºæ··åå¼å¼åãåºäºå½æ¶çèæ¯ï¼ä»ä»¬è®¤ä¸ºåçæ¯ä¸å¯æ¿ä»£çï¼âåç +HTML5âçæ··å模å¼æ´ææä¹ãæ以ç°å¨ Cordova ç使ç¨æ¨¡åæ¯âåçå·¥ç¨å¸ +HTML5 å·¥ç¨å¸âä¸èµ·åä½å®æ Appã
ããè¿æ¶ Facebook å å
¥äº W3Cï¼çµå¤´æç«äº Mobile Web å·¥ä½ç»ãFacebook æ¯æ·· Web åçï¼å¹¶ä¸å¨ææº OS ä¸æ²¡æèªå·±çé¢å°ï¼ä»ä¸å欢被è¹æå Google ææ§çåçåºç¨çæç³»ç»ãMobile Web è¿ä¸ªå·¥ä½ç»çéè¦ç®æ å°±æ¯è®© HTML5 å¼åçç½é¡µåºç¨è¾¾å°åçåºç¨çä½éªãç¶èï¼äºä¸æ¿è¿ï¼å®ä¸åªåä¹å°±ç®äºï¼ç»ææ¯åªåäºå´å¤±è´¥äºã2012 å¹´ï¼Facebook æ¾å¼äº HTML5 çæ°é»å
æ¥äºå
¨ä¸çç IT åªä½ï¼HTML5 ç¬é´è¢«æå
¥å·å®«ã
ããFacebook 为ä½æ¾å¼ HTML5?æ ¸å¿æ¯å½æ¶åºäº HTML5 ççåä¸åºå¥½çç§»å¨ Appãå¯¹æ¯ Twritter çç«äºå¯¹æçåç Appï¼Facebook ç HTML5 çæ¬å®å¨æ æ³è®©ç¨æ·æ»¡æãæ¯å¦ Push åè½ï¼å°ç°å¨ HTML5 çæ¨éååççæ¨éä½éªå·®è·ä¾ç¶å·¨å¤§ï¼æ´ä¸ç¨è¯´ HTML5 åºç¨ç页é¢åæ¢ç½å±ãä¸æå·æ°/侧æ»èåä¸æµç
çä¼å¤é®é¢ãççåçå·¥ç¨å¸è½»æ¾å®ç°æä¸æãäºç»´ç ãè¯é³è¾å
¥ãå享å°æååçåè½ï¼æ´æ¯è®© HTML5 å·¥ç¨å¸æè§èªå·±ç«éäºéã
ããå³ä½¿ Facebook ä¸å欢被æ§å¶ï¼ä¹ä¸è½æ¿è¢«ç¨æ·æå¼æ¥åé©ãèä¸ Facebook 并没æææ¡å
³é®ç¹âææºæµè§å¨å
æ ¸ãå¦ææµè§å¨ä¸è·ä¸ï¼å¾ç¶å®ä¸å æ åèæ¡è½ä¸äºå°ã
ããèæµè§å¨å¨ææºä¸ç表ç°æ¯ä»ä¹å¢?å
ç Googleï¼Chrome æ§è½è½é«ï¼ä½ Android ä¸çæµè§å¨å´å¹¶é Chromeï¼èæ¯ WebKit æ¹åºæ¥çä¸ä¸ªè¹©èç Android æµè§å¨;åçè¹æï¼iOS ä¸ä¸å
许å
¶ä»æµè§å¨å¼æä¸æ¶ App Storeï¼èä¸å
¶ä»ä½¿ç¨ Safari å¼æçåºç¨ä¹æ æ³è°ç¨è¹æèªå·±ç JavaScript å éå¼æ Nitroãç»ææ¯è¹æå Google ä¸ä½ä¸å¨æµè§å¨ä¸ç§¯æå®ç° HTML5 å
³äºç§»å¨ App æéçè§èï¼åè对 HTML5 ååºç§ç§éå¶ã
ããä¸ç®¡æ¯å½æ¶ç¡¬ä»¶è½åä¸è¶³ï¼è¿æ¯ææº OS ååçæ
æéå¶ï¼æ»ä¹ç»æå°±æ¯ï¼å¨ç§»å¨äºèç½çåæï¼ä¸å®æ¯åçåºç¨çæç³»ç»ç天ä¸ï¼iOS å Android é¦å
èªå·±çå°ç稳åºåï¼äº§ä¸æä¼åä¸ä¸ªé¶æ®µå级ã
ããFacebook ä¹å¥½ï¼PhoneGap ä¹å¥½ï¼æ³å¨ç§»å¨äºèç½åæå°±åä¸æ¯ç¾¹æ¯åä¸å°çï¼ä½åæä¸æ¥ï¼æºä¼å¾å¾ä¼åºç°ã
ããåã HTML5 è¿åççæ¥äº
ããç»äºï¼å¨ 2014 å¹´ 10 æåºï¼W3C å®£å¸ HTML5 æ£å¼å®ç¨¿ãè¿ä¸ªæ¶é´ï¼ä¸æä¸æ©ï¼ç¡¬ä»¶æ§è½æ´å¼ºãææº OS è¿ä»£é度ä¸éã
ããéç HTML5 æ åå®ç¨¿ï¼ä¸å纷äºå°åä¸æ®µè½ï¼ç°å¨ï¼å±äº HTML5 çæ¶ä»£å°æ¥äºã
ããæ人说ï¼å
æ åå®ç¨¿æ²¡ç¨åï¼é
å¥èµ·æ¥äºå?HTML5 åçåºç¨ç©¶ç«è½å¦å¹æåç App?çæ¡æ¯ï¼HTML5 ä¸ä½å¯ä»¥å¹æåç Appï¼çè³å®å¤©ç¶çå¾å¤ç¹æ§è¶
è¶äºåç Appã
ããæ们å
è°è° HTML5 åæ¥ä¸å¦åçåºç¨çå°æ¹ï¼ä¸å
ä¿ç§° HTML5 æâæ§å·¥è½âéç¢ãå³ HTML5 æ§è½ä¸å¦åçãå¼åå·¥å
·ä¸å¦åçãè½åè°ç¨ä¸å¦åçã
ããè¿å 个é®é¢å¯¼è´å¼åè
æ æ³ä½¿ç¨ HTML5 ååºä¸åçä¸æ ·ç Appãç¶èï¼ä¸ç®¡æ¯ç¡¬ä»¶å级è¿æ¯ OS ååçç¥ååï¼ä»¥åç¸å
³è½¯ä»¶ææ¯çæçï¼å·²è§£å³äº HTML5 çâæ§å·¥è½âéç¢ã
ãã1. 硬件å级
ãã2011 å¹´ï¼iPhone 4s ç CPU æ¯ A5ï¼ç°å¨ iPhone 6 æ¯ A8ï¼æè¹æçå次åå¸ä¼ç说æ³ï¼é度å
±æåäº 7.5 åãè¿ 3 å¹´é´ 7.5 åçé度æåï¼æ¹å¹³äºå¤ªå¤ HTML5 çæ§è½é®é¢ã
ãã2. è¹æãGoogle ççç¥åå
ããGoogle å¨ 2013 å¹´åºåå¸ç Android 4.4ï¼å
ç½®ç Webview ä¸åæ¯è¹©èç Android WebKit æµè§å¨ï¼èæ¯ Chromiumï¼æ§è½å¤§å¹
æåãä»ææ°ç Android5.0 å¼å§ï¼Webview å¯ä»¥éè¿ Google Play Store å®æ¶æ´æ°ï¼å Chrome çå级ä¿æä¸è´ï¼ç¨æ·å°±å¯ä»¥ä¸å·æºäº«åå°ææ°çæµè§å¨å¼æ;åç Apple æ¹é¢ï¼2012 å¹´ iPhone 5 åå¸åï¼HTML5 å¨ iOS ä¸ç表ç°å·²ä»¤äººæ»¡æï¼Safari ç¬å®¶ç JavaScript å éå¼æ Nitro ä¸åé£ä¹éè¦ï¼ä¸è¿å¨ iOS 8 åå¸åï¼è¹æè¿æ¯å¾è¯è¶£å°åæ¶äºä¸æ¹ç¨åºè°ç¨ Nitro çéå¶ï¼ç°å¨ä»»ææµè§å¨æåºç¨è°ç¨ iOS ç UIWebview é½å¯ä»¥å©ç¨ Nitro å éï¼è¿æ ·å¨åç«¯ä½¿ç¨ JS å大åè¿ç®ä¹æ为å¯è½ã两大ææºæä½ç³»ç»é¸ä¸»åæµè§å¨å·¨å¤´çæ度åçäºååï¼ä½¿å¾ HTML5 å¨ææºä¸çåå±ä¸ååéï¼èä¸è¿ä¸ªååä¸å¯éåªè½ç»§ç»ååï¼è¿ç§ååå¿å¿
ä¼äº§çæ·±è¿çå½±åã
ãã3. 软件ææ¯çæç
ããPhoneGap çåå±è½ç¶æ¾ç¼äºï¼ä½å
¶ä»äº§åææ¯å´æçäºã2014 å¹´ç iWeb 大ä¼ä¸ï¼ä¼å¤ååç产åæä¾äºé¢åå¼åè
å
è´¹æå¼æºç HTML5 æ§å·¥è½éç¢ç解å³æ¹æ¡ã
ãã(注ï¼ç¼è
ä½ä¸ºä»ä¸äººåï¼ä¹ä¼å¨åæåç§æ¹æ¡æ¶æå°æ们å
¬å¸çæ¹æ¡ï¼ä½ç¼è
ä¼å®¢è§ä¸å¤¸å¼ çéè¿°æ¹æ¡ï¼èä¸è¯¥æ¹æ¡æ¯çº¯å
è´¹çï¼æ²¡æåä¸éå®å«çã)
ããDCloud å
¬å¸å¨ iWeb 大ä¼ä¸åå¸äºç³»ç»ç HTML5âæ§å·¥è½ç¼ºå¤±âç解å³æ¹æ¡ï¼å
æ¬ï¼
ããa) æ§è½ï¼æå HTML5 æ§è½çææºç«¯å¼æï¼è®©ä¾§æ»èåãä¸æå·æ°çå¨æ交äºå¡é¡¿çé®é¢å¾ä»¥è§£å³;
ããb) å·¥å
·ï¼HTML5 å¼å IDE 产å HBuilder, è¶
å¿«çç¼ç¨å©å¨;
ããc) è½åï¼æ 40 ä¸åç API å°è£
æ JavaScript 对象ï¼ä»¥è§£å³ HTML5 è½åä¸è¶³é®é¢ç Native.js ææ¯;
ããd) ææ¥è¿åçä½éªçé«æ§è½æ¡æ¶ï¼MUI æ¡æ¶ï¼ä½ç§¯åªæå åKï¼å è½½ãè¿è¡è¿å¿«äºä¸è¬æ¡æ¶ã
ããåºäºè¯¥æ¹æ¡å¼åç HTML5 åºç¨å®å
¨å¯ä»¥è¾¾å°åç App çåè½åä½éªã
ä½¿ç¨ HBuilder å¼å HTML5 åºç¨
ããè±ç¹å°å
¬å¸åå¸äº Crosswalk å¼æï¼å¯ä»¥è®© Android 4.0-4.3 çææºä¸çåºç¨æå
Chromium å¼æèä¸æ¯ Android WebKitãæ¯ç«ç®åå¸åºä¸åå¨å¤§é Android 4.0-4.3 çææºï¼åæ¶ç»ä¸ç webview ä¹é¿å
äºå
¼å®¹æ§çç¦æ¼ã
ããå¨ä¸ä¸æ¹åä¸å¾å¤å
¬å¸ä¹ååºäºä¸éçæ绩ã触æ§ç Cocos2d-html5ãEgret runtime å Ludei CocoonJS 强åäº Canvas ç表ç°ï¼è®© HTML5 游æä½éªæ´å¥½;UCãçè±¹çææºæµè§å¨é½å¼ºåäºé³è§é¢ææ¾ç表ç°ã
ããä¸ç®¡æ¯ç¡¬ä»¶å级ã软件æçï¼è¿æ¯æä½ç³»ç»ååçç¥ååï¼é½å¨å¼ºåæ¨å¨ HTML5 ççåã
ããä¸è¿è¦æ³¨æï¼æ说ç HTML5 çåï¼ä¸æ¯æææºæµè§å¨ä¼æ¿ä»£æ¡é¢æ为åºç¨å
¥å£ãæ人说 HTML5 ä¸å¥½ï¼å 为ç¨æ·è®¨åæå¼æµè§å¨è¾å
¥ URL çè¿ç¨ãææ³è¯´è¿ç§æ³æ³æ¯å¯¹ HTML5 ççé¢ç解ãHTML5!=ä¼ ç»æµè§å¨ï¼è½ç¶ç¼ç¨è¯è¨è¿æ¯ HTMLãJavascriptãCSSï¼ä½åè¡æ¹å¼ç»ä¸æ¯ä¼ ç»ç½ç«é£ä¹ç®åãHTML5 åºç¨çå
¥å£ï¼åèå¾å°æ¯å¯å¨æµè§å¨è¾å
¥ URLï¼å®å¯ä»¥æ¯åå¨äºææºæ¡é¢çå¾æ ãä¹å¯ä»¥æ¥èªè¶
级 App (å¦å¾®ä¿¡æåå)ã以åæç´¢å¼æãåºç¨å¸åºã广åèçãããå°å¤é½æ¯å®çå
¥å£ãå®çå
¥å£ï¼æ¯åç App æ´å¤ã
ããäºã åç App çé¢ è¦
ããHTML5 çâæ§å·¥è½âéç¢å¾å°è§£å³ï¼å¯ä»¥æ¥è¿åç App çææï¼æ以å®å°±å¯ä»¥æ¿ä»£åç App å?å¾å¤äººè®¤ä¸ºï¼å³ä½¿ HTML5 ä¼åå±çæ¯ç°å¨å¥½ï¼ä¹å°æ¯ä¸åç App åå ä¸é¨åå¸åºçæ ¼å±ï¼è¦æ±ä¸é«çé¿å°¾åºç¨ä¼ä½¿ç¨ HTML5ï¼è主æµåºç¨ä»æ¯åç App ç天ä¸ã
ããä½æ认为è¿æ ·çæ³æ³å¾å±é©ï¼å°±å Apple æç«åï¼HP çé«å±åè¯æ²å
¹ï¼è°ä¼å¨å®¶éæä¸å°çµèå¢?æªæ¥ HTML5 è¯å®ä¼é¢ è¦åç Appãâæ§å·¥è½âéç¢çæ¶é¤ï¼åªæ¯ HTML5 çå£å¿è¢«åå¼±ï¼ä½å£å¿è¢«æ¶é¤åï¼å®çä¼å¿å°±ä¼å¤§æ¾å¼å½©ï¼HTML5 çä¼å¿æ¯ä»ä¹?æ们åå«å°±å¼åè
åæç»ç¨æ·æ¥çã
ããHTML5 对å¼åè
ç 7 大ä¼å¿
ãã 跨平å°ï¼
ããå¨å¤å±å¹´ä»£ï¼å¼åè
ççè¦ææ°é常é«ï¼äººäººé½æç¼ HTML5 è½æ®æ¼ææãå¤å¥ä»£ç ãä¸åææ¯å·¥ç§ãä¸å¡é»è¾åæ¥ï¼è¿æ¯æ磨人çè¿ç¨ãæç¹ç±»ä¼¼ä¸ªäººçµèæ©æä¸çï¼é£ä¸ªæ¶åçæ¯å®¶çµèé½æèªå·±çæä½ç³»ç»åç¼ç¨è¯è¨ï¼å¼åè
ç²äºåä¸åçæ¬ï¼å
¶å® DOS ççè¡ä¹å¾å¤§ç¨åº¦æ¯å 为å¼åè
å®å¨æ²¡ç²¾åç»å
¶ä»çµèåç¨åºã跨平å°ææ¯å¨æ©æ大å¤å 为æ§è½é®é¢å¤æï¼ä½ä¸åæ硬件è½åå¢å¼ºååä¼å æ®ä¸»æµï¼å 为跨平å°ç¡®å®æ¯åéã
ããå¿«éè¿ä»£ï¼
ãã移å¨äºèç½æ¯ä¸ä¸ªå¿«é±¼åæ
¢é±¼çæ¶ä»£ï¼è°å¯¹ç¨æ·çéæ±æ»¡è¶³çæ´å¿«ï¼è°çè¯éææ¬æ´ä½ï¼è°å°±æ¥æ巨大çä¼å¿ãäºèç½äº§å大å¤å
è´¹ãä¸æç½ç»æåºï¼åå
¥è
æ¢å¤ºç¨æ·çé¾åº¦é常大ã使ç¨åçå¼åï¼ä»æèãå¼åãä¸çº¿å个ç¯èçæçé½æ
¢ä¸å以ä¸ï¼èä¸åä¸ç人è¶å¤ï¼æ²éæçå¾å¾ææ
¢ä¸æ¢ä¸åã
ããæç»äº¤ä»ï¼
ããå¾å¤äººæè¿æ ·çä½ä¼ï¼ä¸ä¸ªåçåºç¨ä¸çº¿ Appstoreï¼çªç¶æä¸ä¸ªå¤§ bugï¼åªå¥½è¿å¤å çä¿®å¤ï¼ç¶åééçå¾
2 å¨ææ´é¿æ¶é´ç Apple å®¡æ ¸ï¼è¿ 2 个ææ被ç¨æ·çæ¶æ¹æ·¹æ»ï¼å¸åºä¸ä¸çå·®è¯ï¼ç¨æ·å¤§éæµå¤±ãçæ°åºç¨è¢«å®¡æ ¸ä¸çº¿äºï¼ç¨æ·å·²ç»å¸è½½äºãä½æ¯ï¼HTML5 没æè¿äºé®é¢ï¼ä½ å¯ä»¥å®æ¶æ´æ°ï¼æé®é¢ç«å³ååºã
ãã大å¹
ä¸éææ¬ï¼
ããåä¸è
èèµå¹¶ä¸å®¹æï¼å¦ä½è±é±æ´é«æé常éè¦ãå¦æä½ ä½¿ç¨åçå¼åç App åç«äºå¯¹æä½¿ç¨ HTML5 å¼åç App 没ä»ä¹åºå«ï¼ä½ä½ çå¼åææ¬é«åºä¸åï¼æç¸ä¿¡æ²¡ææèµäººä¼å欢ç»ä½ æé±ã
ããå¼æºçæç³»ç»åè¾¾ï¼
ããHTML5 å端æ¯å¼æ¾çæ£åé¦å¾ªç¯çæç³»ç»ï¼å¤§éçå¼æºåºå¯ä»¥ä½¿ç¨ï¼å¼ååºç¨åå¾æ´è½»æ¾ãæ´ææ·ï¼å½ç¶è¿ä¹ä½ç°å¨äºå¿«éè¿ä»£åææ¬ä¸éä¸ãä¸è¿æ´éè¦çæ¯ï¼è¿ç§å¼æ¾çæ£åé¦å¾ªç¯çæç³»ç»æªæ¥ççå½åæ¯æ¯åççæç³»ç»æ´å¼ºå²çã
ããå¼æ¾çæ°æ®äº¤æ¢ï¼
ããHTML æ¯ä»¥ page 为åå
å¼æ¾ä»£ç çï¼å®æ éä¸é¨å¼å SDKï¼åªè¦ä¸æ··æ·ï¼å°±è½ä¸å
¶ä»åºç¨äº¤äºæ°æ®ãå¼åè
å¯ä»¥è®©ææºæç´¢å¼æå¾å®¹ææ£ç´¢å°èªå·±çæ°æ®ï¼ ä¹æ´å®¹æéè¿è·¨åºç¨åä½æ¥æ»¡è¶³æç»ç¨æ·éæ±ã
ããæ´å®¹ææ¨å¹¿ãæ´å®¹æçåï¼
ãã导æµå
¥å£å¤ï¼HTML5 åºç¨å¯¼æµé常容æï¼è¶
级 App (å¦å¾®ä¿¡æåå)ãæç´¢å¼æãåºç¨å¸åºãæµè§å¨ï¼å°å¤é½æ¯ HTML5 çæµéå
¥å£ãèåç App çæµéå
¥å£åªæåºç¨å¸åºãèªæç HTML5 å¼åè
å½ç¶ä¼ç©è½¬åç§æµéå
¥å£ä»èåå¾æ´å¼ºçä¼å¿ã
ããæµé大ï¼å段æ¶é´å¾®ä¿¡æååé£é¡ä¸æ¶ãç¥ç»ç«ãï¼è¿ä¸ªæ¸¸æå¦ææ¾å° Appstoreï¼ç»å¯¹æ²¡æé£ä¹å¤æµéï¼è¶
级 App 带æ¥çæµéï¼è¿å¤§äºåçåºç¨å¸åºãåå¦å¾®ä¿¡å
许游æå¨æ¡é¢å建快æ·æ¹å¼ãåå¦æ¸¸æåç»å级解å³æç»å¨±ä¹é®é¢ï¼æªæ¥ä¸å¯æ³è±¡ã
ãã导æµæçé«ï¼é¤äºå
¥å£å¤ãæµé大ï¼å¯¼æµæçé«ä¹ä¸å¯å¿½è§ï¼è°é½ç¥éï¼é¡µæ¸¸å端游æåæ ·ç广åï¼å¹¿ååç¨æ·ç转åçï¼é¡µæ¸¸è¿è¿é«äºç«¯æ¸¸ã
ããå¯ç²¾å导æµå°äºçº§é¡µï¼æ们é½ç¥éæç´¢å¼æå¯ä»¥ç´æ¥è¿å
¥å°ã
ããHTML5 对æç»ç¨æ·ç 3 大ä¼å¿
ãã大å¹
éä½ä½¿ç¨é¨æ§
ãã为ä»ä¹æµåªä½ä¼æ¿ä»£ä¸è½½è§é¢æ为主æµ?为ä»ä¹é¡µæ¸¸ä¼å¦æ¤ç«ç?åªå ç¨æ·å¤ªâæâã让ç¨æ·æ´æ¹ä¾¿ç满足éæ±ï¼ææ¶ææ好äºæ´å¤ç满足éæ±ã
ããç¨æ·ç¼ççå°ä¸ä¸ªå
´è¶£ç¹ï¼ç¹å»åï¼å°±åºè¯¥ç«å³å¼å§æ»¡è¶³ç¨æ·éæ±ãæ¯å¦æµåªä½å¯ä»¥ç«å³çï¼é¡µæ¸¸å¯ä»¥ç«å³ç©ãèç®åçåçåºç¨å¸åºï¼ç¨æ·éè¦è¿æ ·æä½ï¼éä¸ä¸ªåºç¨ãçå¾
ä¸è½½ã确认æéãçå¾
å®è£
ï¼ç¶åç¹å»æå¼ãè¿æ ·ç³ç³çä½éªè¿æ©è¦è¢«é¢ è¦ã
ããä¸ç®¡æ¯ Appã游æè¿æ¯é³è§é¢ï¼æªæ¥é½å°å³ç¹å³ç¨ãè°å
满足ç¨æ·è¿ä¸ªéæ±ï¼è°å°±å¶èã
ããå®æ¶æ´æ°ãå·®éæ´æ°çä¼ç§ä½éª
ããHTML5 åºç¨å¯ä»¥ç»å¼åºç¨å¸åºçéå¶è¿è¡èªä¸»å®æ¶æ´æ°ï¼ç¨æ·å¯ä»¥å¿«é享åæ°æå¡ã
ããèä¸è¿ç§æ´æ°å®å
¨å¯ä»¥æ¯å·®éæ´æ°ï¼æ¯å¦æ个 HTML 页é¢ææ个 js æ件æé®é¢ï¼åªæ´æ°è¿ä¸ªå kçå°æ件就å¯ä»¥äºï¼è¿æ¯åçåºç¨çæ´æ°ä½éªå¥½å¤ªå¤ã
ããè·¨åºç¨ç使ç¨ä½éª
ããç®åææºåºç¨åæ¢æ¯ä»¥æ¡é¢æä»»å¡ç®¡çå¨ä¸ºä¸å¿çï¼ä½äºå®ä¸è¿äºä¸å¿å¾å½±åæçåä½éªãç¨æ·æ³åºå·®ä¸äºï¼å
æå¼å»åª App 订票ï¼ç¶åååæ¡é¢ï¼åæ¾å°å¹¶æå¼å¤©æ° Appï¼æç´¢è¾å
¥ä¸äºï¼ååå°æ¡é¢ï¼æ¾å°å¹¶æå¼èªæ
纵横 Appï¼è¾å
¥èªçå·å¼æºï¼å¦å¯¹äºï¼èªçå·å¤å°æ¥çï¼ååå°æ¡é¢ï¼æ¾å°å¹¶æå¼å»åª App çèªçå·ï¼æåæ¾å°å¹¶æå¼ç§è½¦ Appï¼è¾å
¥ç§è½¦å°ç¹ï¼ç¶ååååæ¡é¢ããã
ããå¨åçåºç¨ä½ç³»ä¸ï¼ç¨æ·åªè½è¿æ ·ãä½å¨ HTML5 ä½ç³»ä¸ï¼ä»ä¸éè¦ååæ¡é¢ï¼ä»å¯ä»¥å¨ App é´æ¹ä¾¿çç´æ¥è·³æ¥è·³å»ï¼èä¸æ¯ä½¿ç¨ä¸ä¸ªä¸ä¸ªå¤å² App;ä»æ´ä¸ç¨éå¤å½å
¥æ°æ®ï¼åºç¨é´å¯ä»¥æ¹ä¾¿çäºç¸ä¼ éæ°æ®ã
ããè¿ç§æ¨¡å¼éè¦ä¸ç¹æ³è±¡åï¼ä½æªæ¥è¿æ©ä¼æ¥ã
ããåæè³æ¤ï¼æ们å¯ä»¥ææ¾ççåºï¼ä¸ç®¡æ¯ç«å¨æç»ç¨æ·è§åº¦ãè¿æ¯ç«å¨å¼åè
è§åº¦ï¼HTML5 å¿
å°å代åçåºç¨å½åçä½ç½®ã并ç±æ¤å¼åä¸ç³»åé¢ è¦ã
ããå
ã è¿æä»ä¹ä¼è¢«æ¹å?
ããHTML5 ççåï¼åç App çæç³»ç»çé¢ è¦ï¼æ¯ä¸åºäº§ä¸é©å½ï¼å¾å¤è§è²é½ä¼åå°å½±åï¼æ们æ¥é¢æµä¸çªã
ããæ°å HTML5 å¼ææç«å°ç§èµ·
ããæ åç HTML5 å¼æ并ä¸è½è§£å³ HTML5 çææé®é¢ï¼æ¥æ大æµéå
¥å£çäºèç½å·¨å¤´ï¼è«ä¸å¨æèå
åµæ´ä¼ç§çå¢å¼ºå¼æãè
¾è®¯æ¨åºäº X5 æµè§å¨å¼æï¼å°±æ¯çä¸è¿ä¸ªæºä¼ãç®ååè·¯æµè§å¨ååãåºç¨å¸åºååãçè³ rom ååï¼é½å¨åªåæ´åæ´ä¼è´¨çæµè§å¨å¼æãå使微信å
åµç Webview å¯ä»¥è¿è¡æ´ä¼ç§ç canvas 游æãå使 360 ææºå©æå¯ä»¥åè¡å³ç¹å³ç¨ç HTML5 åºç¨å¹¶ä¸è½åä½éªä¸åçä¸è´ãå使å°ç±³ rom å
ç½®æ´å¼ºå¤§ç webview 使å¾ææ HTML5 åºç¨å¨å°ç±³ææºä¸è¿è¡çæ´æµç
ããã
ããä¸ä¸ªå·¨å¤´å¼å§è¡å¨ï¼ææ巨头é½ä¼é»é£èå¨ï¼æ²¡éï¼è¿åºæå½¹ä¼æ¯ç§»å¨äºèç½ä¸ççäºæ¬¡ä¸ç大æã
ããåºç¨åè¡å¸åºå°æ´ç
ããç±äºè¶
级 App ç巨大æµéè½è½»ææ为 HTML5 åºç¨çå
¥å£ï¼å¹¶ä¸ä¼å½¢æ大è
æ´å¤§çæåºï¼ä¼ ç»çåºç¨ååºãçè³çº¿ä¸é¢è£
ï¼è¿äºæµéä¸è¶³åæçåä½çåè¡æ¨¡å¼å°è¢«æ¤åºå¸åºä¸»æµãæ¬èº«ä¹æ¯è¶
级 App ç大æµéåºç¨ååºï¼å¦æ转åå¾å½ï¼ä¹å°ä»¥åè¡ HTML5 åºç¨ä¸ºä¸»ã
ãã广ååç»è®¡å¸åº
ããåçç广ååç»è®¡ SDK æä¾åä¼é¢ä¸´å°¬å°´ï¼Googleãç¾åº¦çåºäºç½é¡µç广ååç»è®¡æå¡ä¼åå¾æ´å¤§çä¼å¿ãå¼åè
ä¸åéè¦æå
SDKï¼å¼å
¥ä¸ä¸ª Script å³å¯ã
ããå¼æºææ¯å°å¨ç§»å¨äºèç½é¢åæ´å æµè¡
ããHTML çå¼æ¾æ§é å°±äºå¤§éçå¼æºäº§åï¼ä¹ååä¿è¿äº HTML çç¹è£ãå¨ Github ä¸æ大éç JS æ¡æ¶ï¼èåççå¼æºä»£ç æ°éç¸æ¯çå°ãèæªæ¥ç§»å¨äºèç½ä¸çå°å 为å¼æºèåå±çæ´è¿
éï¼è¿éä¹åæ ·åå¨ç±» Github ååçæºéã
ããå¼åå·¥å
·çåå
ããæ©æ HTML åªéè¦è®°äºæ¬åå 个 Tagï¼ä¸æç HTMLãJSãCSS æ¯è¾å¤æï¼éè¦æ´é«çº§çææ¬ç¼è¾å¨ï¼ä½ HTML5 å°æ¥åï¼å®ç代ç éãå¤æ度ãå¼å模åå°ä¸åçå¼åçé½ï¼éè¦ç±»ä¼¼ XCodeãEclipse çä¸ä¸ç IDE å·¥å
·æ¥è§£å³å¼åãè°è¯çé®é¢ãä¸äºä»¥ä¼ä½¿ç¨è®°äºæ¬å代ç 为è£çå¼åè
ï¼å°é¢ä¸´æ路转æ¢çè³è¢«æ´é«æçå¼åè
æ·æ±°ã
ããæ§è½åæè°ä¼
ããç®åå¾å¤é对åçåºç¨çæ§è½åæè°ä¼å·¥å
·ææå¡ï¼æªæ¥ä¹é¢ä¸´è½¬åï¼HTML5 åºç¨çæ§è½åæè°ä¼æ¯å¦ä¸ä¸ªä¸çã
ããæ··æ·ä¸äº§æä¿æ¤
ããHTML5 æ¯å¼æ¾ä»£ç çï¼å¥½å¤ä¹å¸¦æ¥å¼ç«¯ï¼æäºä¸è¥¿å¼åè
å¸ææ´é²ï¼ä½æäºä¸è¥¿å¼åè
å¸æä¿æ¤ãæ··æ·ææ¯å°±åå¾æ´æåä¸æºä¼ãPC Web ä¸ Gmail çæ··æ·å°±åçä¸éãé¤äº JS æ··æ·ï¼ç¦»çº¿æ°æ®å å¯ç¸ä¿¡ä¹æä¸å°ç©ºé´ã
ããå®å
¨ååçæ°æºä¼
ããHTML5 ç强大ä¼å¼åå¾å¤å®å
¨é®é¢ï¼å¹¶ä¸è§£å³æè·¯ä¸åçä¸ä¸æ ·ï¼ä¸å
æå¯è½ä¼åºç°æ°çå®å
¨ååé¢å¯¼è
ã
ããä¸ã ç»è¯
ããåå°ç»å°¾ï¼æè§è¯é¢æç¹å¤§äºãå
¶å®æªæ¥å¦ä½åå±æ¯æ²¡äººè½åç¡®é¢æµçï¼åéé常å¤ãä½ææ³è®©ç¨æ·åå¼åè
é½æ´æ¹ä¾¿çè¶å¿æ¯ä¸ä¼éçã
温馨提示:答案为网友推荐,仅供参考