HTML5¼¼Êõ

HTML5ÄÜ·ñµß¸²´«Í³WebÓ¦Óã¿

×ÖºÅ+ ×÷Õߣº À´Ô´£ºCSDN    2014-11-17 18:29 ÎÒÒªÆÀÂÛ( )

ǰ¶Îʱ¼äÎÒÃÇÔø±¨µÀÁËһƪHTML5·ÖÁѳÉÁ½±ê×¼£¬Ðí¶à¿ª·¢Õß¶Ô´Ë¿´·¨²»Ò»£¬ÓеÄÈÏΪHTML5ÊÇһßÕÐËÆðµÄ¼¼Êõ£¬ºÜ¶àÏîÄ¿¶¼ÔÚÄ¥ºÏÆÚ£¬Èç½ñ·ÖÁѲ»ÀûÓÚÆä·¢Õ¹;¶øÓеÄÔòÈÏΪW3C¶ÔδÀ´HTML5·´Ó¦Ì«¹ý³Ù»º£¬WHATWGÄܹ»¼Ó...

 

¡¡¡¡Ç°¶Îʱ¼äÎÒÃÇÔø±¨µÀÁËһƪHTML5·ÖÁѳÉÁ½±ê×¼£¬Ðí¶à¿ª·¢Õß¶Ô´Ë¿´·¨²»Ò»£¬ÓеÄÈÏΪHTML5ÊÇһßÕÐËÆðµÄ¼¼Êõ£¬ºÜ¶àÏîÄ¿¶¼ÔÚÄ¥ºÏÆÚ£¬Èç½ñ·ÖÁѲ»ÀûÓÚÆä·¢Õ¹;¶øÓеÄÔòÈÏΪW3C¶ÔδÀ´HTML5·´Ó¦Ì«¹ý³Ù»º£¬WHATWGÄܹ»¼Ó¿ìHTML5µÄ·¢Õ¹ËÙ¶È¡£ÄÇôÄúÔÞ³ÉÄÄÒ»·½¿´·¨ÄØ?TodoistÍøÕ¾´´Ê¼ÈËAmir SalihefendicÏòÎÒÃǽ²ÊöÁËÀûÓÃHTML5¿ª·¢ÓкܶàÓÅÊÆ£¬´ËÍ⣬Ëû»¹ÈÏΪHTML5½«µß¸²WebÓ¦Óá£

¡¡¡¡ÎÄÕÂÄÚÈÝÈçÏ£º

¡¡¡¡

\

 

¡¡¡¡TodoistÍøÕ¾ÒѾ­ÓµÓÐ350.000+Óû§ÒÔ¼°Êý°ÙÍòÏîÈÎÎñ¡£Èç¹ûHTML5ÎÞ·¨¸øÈË´øÀ´¾ªÈ˵ÄÌåÑ飬ÄÇôÎÞÂÛÎÒÃÇ˵ʲô¡¢×öʲô¶¼ÓÚÊÂÎÞ²¹¡£±¾ÎĽ«Ì½ÌÖΪʲôÎÒÃÇÒªÕâô×öÒÔ¼°ÎªÊ²Ã´ÈÏΪHTML5½«»á¸Ä±äÈËÃÇʹÓá¢ÈÏÖªµÄÍøÂç¡£

¡¡¡¡HTML5±ê×¼ÉÐ먦·¢Íê³É¡£ÏÖ½ñ´ó¶àÊýÏÖ´úä¯ÀÀÆ÷Ö»Ö´ÐÐÁ˲¿·Ö±ê×¼¡£TodoistʹÓÃWeb´æ´¢£¬Ö§³ÖÀëÏß·ÃÎÊÁ½ÏÄÜ¡£¾¡¹ÜÖ»ÓÐÕâÁ½ÏÎÒÃÇ¿ÉÒÔÌṩ·á¸»µÄ¾­Ñ飬ÕâÒ²ÊÇÆäËûÈκÎÍøÕ¾ÎÞ·¨Æ¥µÐµÄ£¬Ö÷ÒªÓУº

¡¡¡¡ÀëÏßÓ¦ÓÃ(Offline usage)£ºµ±ÄãÎÞ·¨Á¬½Óµ½ÍøÂçʱ£¬Todoist»á×Ô¶¯Çл»µ½ÀëÏßģʽʹÄãÄܹ»ÇáËÉ·ÃÎʲ¢¸üÐÂÏîÄ¿¡¢ÈÎÎñ¡£µ±ÍøÂçÔÙ´ÎÁ¬½Óʱ£¬·þÎñÆ÷»áÓëÄúµÄÊý¾Ý½øÐÐͬ²½¡£

¡¡¡¡³öÉ«µÄ±íÏÖ(Stunning performance)£ºÊ¹ÓÃTodoistÄܹ»¿ìËÙÏìÓ¦×ÀÃæÓ¦ÓóÌÐò¡£ÕâÊÇÒòΪËùÓеÄÊý¾Ý¶¼ÊDZ¾µØ´æ´¢£¬Ó¦ÓóÌÐòÎÞÐèÔ¶³Ì´«Ê䏸·þÎñÆ÷¡£¶øÕâЩ¶¼ÊÇ·ÇHTML5Ó¦ÓÃÎÞ·¨×öµ½µÄ¡£

¡¡¡¡Äã¿ÉÒÔ³¢ÊÔʹÓûùÓÚHTML5´´½¨µÄTodoist£¬Äã»á·¢ÏÖ´óÓв»Í¬¡£

¡¡¡¡¶ÔTodoistа汾ÓÐʲô¿´·¨?

¡¡¡¡Lifehack.orgÒ»¿î·Ç³£Á÷ÐеIJ©¿Í£¬ÓµÓÐ100.000¶ÁÕߣ¬¶ÁÕßÔÚ¡¶A First Look at the new Todoist¡·ÕâÆªÎÄÕÂÆÀÂÛÀïÖÚ˵·×ç¡¡£ÒÔÏÂÊÇժȡµÄ²¿·Ö¾«²ÊÄÚÈÝ£º

¡¡¡¡“ÎÒ»á˵£¬Ëü¸øÄãµÄ¸Ð¾õ¾ÍÏñÔÚʹÓñ¾µØÓ¦Óᣵ±ÄãÔÚ×öÊý¾Ý´´½¨¡¢¸üкÍɾ³ýÒì²½Êý¾Ýʱ´ø¸øÄã¸ßÃô¸Ð¶ÈµÄ½Ó¿Ú¡£”

¡¡¡¡“¸ÃÓ¦ÓóÌÐò¿ìËÙÁ÷³©£¬ÔÚʹÓÃʱ¾ÍÏñÒ»¸ö×ÀÃæÓ¦Óþ¡¹ÜÓÐһЩBug(ËäÈ»ÕâÊDzâÊÔ°æ)£¬µ«ÎÒ²»µÃ²»ËµÐ°汾µÄTodoist½«³ÉΪ×îºÃµÄ»ùÓÚWeb¿ª·¢µÄÓ¦ÓÃÖ®Ò»¡£”

¡¡¡¡¾Éä¯ÀÀÆ÷Ö§³ÖÇé¿öÈçºÎ?

¡¡¡¡¾­¹ýÎÒÃǵĵ÷²é·ÖÎö£¬Ö»ÓÐ10%µÄÓû§ä¯ÀÀÆ÷²»Ö§³ÖWeb´æ´¢;20%Óû§ä¯ÀÀÆ÷²»Ö§³ÖÀëÏß·ÃÎÊ¡£ÎªÁËÈ·±£TodoistÕý³£ÔËÐУ¬ÎÒÃÇÐèÒªWeb´æ´¢£¬Ò²¾Í˵ֻÓÐ10%µÄÓû§ÎÞ·¨Ê¹ÓÃHTML5°æ±¾µÄTodoist¡£ÓàϵÄ90%Óû§¶ÔÎÒÃÇÀ´Ëµ·Ç³£ÖØÒª£¬ÓÚÊÇÎÒÃǾö¶¨ÎªÁËËûÃÇÒª×ö³ö¸üºÃµÄÓû§ÌåÑé¡£

¡¡¡¡HTML5£ºÒ»ÖÖµÄеÄģʽת±ä?

¡¡¡¡¹ýÈ¥£¬ÔÚWeb¼¼ÊõÁìÓòǶÈëеÄÓ÷¨ÒѾ­·¢Éú·¶Ê½×ª±ä¡£ÕâÀïÓÐÒ»¶Î¹ØÓÚ¼¼Êõ·½±ã¼òÊ·ºÍÒÔ¼°ËûÃÇËù×÷µÄŬÁ¦¡£

¡¡¡¡AjaxͨѶ¼¼ÊõʹWeb¿ª·¢¸ü¼Ó¸»ÓлîÁ¦¡£Ä¿Ç°£¬´ó²¿·ÖÏÖ´úWebºÍÒÆ¶¯Ó¦ÓÃʹÓôóÁ¿µÄAjax¿ª·¢Ó¦Óá£ÆäÖÐÁ½¸ö×î´óµÄÀý×ÓÒªÊýFacebookºÍGmail¡£

¡¡¡¡Comet(»òÕßHTTP·þÎñÆ÷¶ËÍÆËÍHTTP server pushÒ»ÖÖ´ÓWeb·þÎñÆ÷·¢ËÍÊý¾Ýµ½Webä¯ÀÀÆ÷µÄ»úÖÆ)¸ïÃüÐÔµÄʵʱͨÐźÍʵʱ֪ͨ¡£ÓÐÁËCometʹµÃFacebook ChatºÍGmail ChatÔÚGoogle DocsÖÐͬ²½±à¼­³ÉΪ¿ÉÄÜ¡£

¡¡¡¡ÎÒ²ÂÏ룬HTML5еıê×¼¸Ä±äÁËÓû§µÄÒâʶºÍWebÓ¦ÓóÌÐòµÄʹÓ÷½Ê½¡£ÎªÊ²Ã´ÄØ?ÒòΪʹÓÃHTML5´´½¨µÄÓ¦ÓóÌÐòÓÐמªÈ˵ÄÀàËÆ×ÀÃæµÄÐÔÄÜÄܹ»Íêȫ֧³ÖÀëÏß¹¦ÄÜ¡£

¡¡¡¡ÎªÁ˱ãÓÚÀí½âWebÊÇÈçºÎ·¢Õ¹¶øÀ´µÄ£¬ÎÒÃÇÀ´¿´ÏÂÒ»Óû§ÊÇÈçºÎ½»»¥Ê¹ÓÃAjax£¬Comet£¬HTML5Æô¶¯ÀëÏßÓ¦Óõġ£

¡¡¡¡Before Ajax

¡¡¡¡ÔÚAjax³öÏÖ֮ǰ£¬ÐèÒª½«Õû¸öÒ³Ãæ½øÐÐÐÞ¸ÄÒÔÈ·±£¸üС£ÕâÑùËٶȲ¢²»ÊǺܿ죬ÓÈÆäÊǵ±WebÒ³Ãæ¸´ÔÓʱ¸üÊÇÐèÒªºÜ³¤Ê±¼ä¡£

¡¡¡¡

Before Ajax

 

¡¡¡¡With Ajax

¡¡¡¡AjaxµÄ³öÏÖʹµÃWebÒ³Ãæ¸ü¼ÓµÄ¶¯Ì¬£¬Ö»Ðè¸üв¿·ÖÒ³Ãæ¡£¸üÐÂÍøÕ¾µÄһС²¿·ÖËÙ¶È»á¿ìºÜ¶à£¬Ô­ÒòÊÇÖ»ÐèץȡºÍ¸üв¿·ÖÊý¾Ý¡£

¡¡¡¡

With Ajax

 

¡¡¡¡With Comet

¡¡¡¡ÓÐÁËCometʹWeb¸ü¼Óʵʱ£¬Õâ¾ÍÒâζ×Å·þÎñÆ÷¿ÉÒÔËæÊ±¸ø¿Í»§¶ËÍÆËÍÊý¾Ý¡£Õâ¸öÓ¦ÓÃÀàËÆFacebook Chat¡£

¡¡¡¡

\

 

¡¡¡¡With HTML5

¡¡¡¡HTML5ʹWebÓ¦ÓóÌÐòÔ½À´Ô½À´¿ì£¬ÒòΪÕâЩÊý¾Ý¿ÉÒÔÔÚÓû§µçÄÔÉϽøÐб¾µØ´æ´¢ºÍ²Ù¿Ø¡£HTML5»¹Ö§³ÖÀëÏßWebÓ¦Óá£

¡¡¡¡

With HTML5

 

¡¡¡¡HTML5·¢Õ¹ÃæÁÙµÄÌôÕ½

¡¡¡¡HTML5ÃæÁÙ×ÅÐí¶àºËÐĵÄÌôÕ½£¬ÕâÊÇÒòΪֻÓÐһС²¿·ÖWebÓ¦ÓóÌÐòÔÚʹÓÃËü¡£ Ö÷ÒªÎÊÌâÓУº

¡¡¡¡ÈκγÌÐò¶¼±ØÐë»ùÓÚ¿Í»§¶ËʵÏÖ£¬ÒòΪÄã²»ÄÜÖ»ÒÀ¿¿Ò»Ì¨·þÎñÆ÷£¬Äã±ØÐë´´½¨¶àÖÖ¿Í»§¶Ë¡£Õâ¾ÍÒâζ×űØÐëʹÓôóÁ¿µÄJavaScript£¬¶ÔÓÚJavaScriptÀ´ËµºÜÄÑʵÏÖÔÚ´óÐÍWebÓ¦ÓóÌÐòÖй¹½¨¿Í»§¶Ë¡£

¡¡¡¡ÖÇÄÜ»¯Í¬²½Êý¾Ý²¢²»ÈÝÒ×£¬ÄãÐèÒª´¦ÀíÀàËÆÁÙʱÉí·ÝÖ¤Ò»ÑùµÄ¶«Î÷£¬Í¬ÑùµÄÃüÁîÐèÒªÔËÐÐÁ½´Î¡£

¡¡¡¡È±·¦ä¯ÀÀÆ÷Ö§³Ö£ºHTML5»¹ÊÇÒ»Ïîм¼Êõ£¬ºÜ¶àä¯ÀÀÆ÷²¢²»Ö§³Ö¡£±ÈÈ磺»º´æÎÞЧÊǺÜÄÑÇÒÎÞ·¨ÔËÐй¤×÷¡£ÈôÒª½â¾ö´ËÎÊÌ⣬ÎÒÃÇÐèÒª½øÐÐÌØÊâ´¦ÀíÒÔÈ·±£Óû§ÔËÐÐ×îа汾¡£

¡¡¡¡¾¡¹ÜHTML5´æÔÚ¶àÖÖÌôÕ½£¬Òò´ËÐèÒªÒ»ÖÖеķ½Ê½À´Ö´ÐÐWebÓ¦ÓóÌÐò£¬µ«HTML5ÌṩÁËÒ»¸ö½à¾»µÄ´úÂë¿â£¬ÖÁÉÙÎÒÃÇÊÇÕâôÈÏΪµÄ¡£µ±ÄãÐèÒªÔÚij¸öµØ·½(Êý¾Ýͬ²½Ê±)´¦Àí·þÎñÆ÷³ö´íÀûÓÃÕâ¸ö´úÂë¿â¾Í¿É£¬¶ø²»ÊÇ´¦Àíÿһ¸öÇëÇó(±ÈÈçÄãÓÃAjax)¡£

¡¡¡¡Òƶ¯Æ½Ì¨ÉϵÄHTML5

¡¡¡¡´ó²¿·ÖÖÇÄÜÊÖ»úÉϵÄä¯ÀÀÆ÷Ö§³ÖHTML5¡£Äã¿ÉÒԲ鿴FacebookÀûÓôóÁ¿µÄJavaScript´´½¨¾ªÈ˵ÄÒÆ¶¯Ó¦Óá£TodoistµÄÒÆ¶¯ÖÕ¶ËÒ²ÊÇ»ùÓÚHTML5¼¼Êõ´´½¨¶øÀ´£¬ÎÒÃÇÔÚWeb(ÍøÒ³°æ)ºÍÒÆ¶¯°æÖ®¼äÖØ¸´Ê¹ÓôóÁ¿µÄ´úÂ롣Ŀǰ£¬ÀûÓÃHTML5¹¹½¨Òƶ¯Ó¦ÓÃÒÀÈ»ÓÐÄѶȣ¬Ä¿Ç°ÎÒÃÇÕýÔÚΪiOSºÍAndroidϵͳ¿ª·¢Ô­ÉúÓ¦Óá£

¡¡¡¡ÎÒÏàÐŵ±Òƶ¯ä¯ÀÀÆ÷±ä¸ü¼Ó³ÉÊìʱ£¬ºÜ¶à¶«Î÷¶¼»á³ÉΪ¿ÉÄÜ£¬HTML5ºÍ±¾µØÓ¦ÓóÌÐòÖ®¼äµÄ²î¾à½«»áËõ¶Ì¡£Ä¿Ç°À´¿´£¬ÎÒÈÏÎªÒÆ¶¯¿Í»§¶Ë×îºÃʹÓñ¾µØ»¯µÄÓ¦Óã¬ÒòΪʹÓÃWeb¼¼ÊõºÜÄÑʵÏÖÁ¼ºÃµÄÓû§½çÃæ¡£µ±È»£¬ÕâÒ²²»ÎÞ¿ÉÄÜ£¬LinkedIn¾ÍÊÇÀûÓÃÏÖ´úµÄWeb¼¼Êõ´´½¨ÁËÒ»¸ö·Ç³£³öÉ«µÄÒÆ¶¯Ó¦Óá£

¡¡¡¡×ÀÃæÉϵÄHTML5

¡¡¡¡ÔÚTodoistͬÑùÄÜ¿´µ½ÎÒÃÇÊÇÈçºÎÖØÓÃHTML5°æ±¾ÎªWindows, Mac OSºÍLinuxϵͳ¹¹½¨“±¾µØ»¯”µÄ×ÀÃæÓ¦Ó᣶ÔÓÚÎÒÃÇÀ´Ëµ£¬ÕâÊÇÒ»¸ö·Ç³£¾­¼ÃʵÓõĹ¹½¨£¬ÒòΪÎÒÃÇÖ»ÓÐÒ»¸ö´úÂë¿â£¬Õë¶Ô²»Í¬µÄ²Ù×÷ϵͳֻÓÃCSS3Ñùʽ±í×÷Ϊǰ¶Ë¿ª·¢¡£ÎÒÃǵÄÓû§Í¨¹ýÆô¶¯cloud-enabled“±¾µØ”Ó¦ÓÃÓëËûÃǵÄ×ÀÃæÏµÍ³ºÜºÃµØ¼¯³ÉÔÚÒ»Æð¡£

¡¡¡¡Î¢ÈíÓµ±§HTML5¼°ÆäÏà¹ØµÄWeb¼¼Êõ·þÎñ¡£ÀýÈ磬Windows 8ÀûÓÃWeb¼¼Êõ(ÈçHTML5¡¢CSS3)½¨Á¢¿ìËÙÇÒÒ×Óõē±¾µØ»¯”WindowsÓ¦ÓóÌÐò¡£ÎÒÈÏΪͬÑùµÄ¼¼ÊõͬÑùÊÊÓÃÓÚMac OSºÍLinux¡£

¡¡¡¡Õâ¾ÍÒâζ×ÅÄã¿ÉÒÔÇáÒ׵Ľ«HTML5 WebÓ¦ÓÃת»»³É×ÀÃæÓ¦Óò¢ÇÒδÀ´Êг¡ºÜ¹ãÀ«¡£¶ÔÓÚÎÒÃÇ¿ª·¢ÕßÀ´Ëµ£¬ÕâÊÇÒ»´ÎºÜºÃµÄ»ú»á£¬ÒòΪ¹ÜÀíºÜ¶àÖÖ²»Í¬µÄ´úÂë¿âÒ²ÊÇÒ»¸ö¾Þ´óµÄÌôÕ½£¬´ËÍâ³É±¾Ò²ºÜ°º¹ó¡£

¡¡¡¡½áÊøÓï:

¡¡¡¡ÎÒÃÇÒѾ­·¢²¼ÁËHTML5°æ±¾£¬Óû§¶ÔÓÚаæµÄHTML5ÌåÑéÒ²¸ø³öÁ˷dz£ºÃµÄÆÀ¼Û¡£×ÜÖ®Ò»¾ä»°£¬ÎÒÃǷdz£ÆÚ´ýWebµÄת±ä£¬ÆÚ´ýÀûÓÃHTML5¼°ÆäÏà¹Ø¼¼Êõ´´½¨¸ü¶àµÄÓ¦ÓóÌÐò¡£

¡¡¡¡Ô­ÎĵØÖ·£ºhttp://sd.csdn.net/a/20120803/2808148.html

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎ×ªÔØµÄ¸å¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬Çë×ªÔØÊ±Îñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

    HTML5 ½ø½×ϵÁУºÍÏ·Å API ʵÏÖÍÏ·ÅÅÅÐò - _ÁÖöÎ

    2017-05-02 11:02

  • HTML5 ½ø½×ϵÁУºindexedDB Êý¾Ý¿â - _ÁÖöÎ

    HTML5 ½ø½×ϵÁУºindexedDB Êý¾Ý¿â - _ÁÖöÎ

    2017-04-27 14:02

  • HTML5 ¸ß¼¶ÏµÁУºweb Storage - _ÁÖöÎ

    HTML5 ¸ß¼¶ÏµÁУºweb Storage - _ÁÖöÎ

    2017-04-27 14:01

  • HTML5ºÍCSS3 - ±¼ÅÜÔÚÆðÅÜÏßٮٮÕß

    HTML5ºÍCSS3 - ±¼ÅÜÔÚÆðÅÜÏßٮٮÕß

    2017-04-20 13:00

ÍøÓѵãÆÀ
¾