HTML5：关于Web现状

StateoftheWebMikeChambers,AdobeHTML5CampTokyoAugust3,2011uLinux公社（LinuxIDC.com）•Linux公社（LinuxIDC.com）于2006年9月25日注册并开通网站，Linux现在已经成为一种广受关注和支持的一种操作系统，IDC是互联网数据中心，LinuxIDC就是关于Linux的数据中心。•LinuxIDC.com提供包括Ubuntu，Fedora，SUSE技术，以及最新IT资讯等Linux专业类网站。WhatisHTML5?WhatdowemeanbyHTML5?-Veryspecificspecification,thatcoversalotofnewfeatures-Alsousedasablankettermfornewfeaturesbeingaddedtobrowsers.-CSS3-Featuresthathavetheirownspecifications(i.e.datastorage)-EvensometimeolderfeaturessuchasmediaqueriesandSVGLinux公社（LinuxIDC.com）•Linux公社（LinuxIDC.com）于2006年9月25日注册并开通网站，Linux现在已经成为一种广受关注和支持的一种操作系统，IDC是互联网数据中心，LinuxIDC就是关于Linux的数据中心。•LinuxIDC.com提供包括Ubuntu，Fedora，SUSE技术，以及最新IT资讯等Linux专业类网站。WhatisdrivingthegrowthofHTML5?BrowsercompetitionhasdrivenHTML5bypromptingbrowservendorstoinnovatetostaycompetitiveandrelevant.Convergenceofwebbrowserusageshare(i.e.browserspaceismuchmorecompetitive)-Usedtobe1primarybrowser,nowthereare3-InternetExplorer-GoogleChrome-MozillaFirefoxSource::=usertest_agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQGDAGrowthofsmartphonesandtablets.-Fullerbrowserexperience-BuiltwithrobustHTML5/CSS3supportfrombeginning,andcontinuestohavestrongsupport(i.e.hardwareaccelerationofCSS3).-Webkitbasedbrowsersdominateinthisspace-Providesasolid,relativelyconsistentHTML5featuresetthatdeveloperscanreliablytarget.IsHTML5ReadyforPrimeTime?So,aswehaveseen,modernbrowsersarebeginningtoaddsupportforHTML5features,butisHTML5readyforprimetimeandforproductionsites?ExpressivewebLargescreenshotwithURLLetslookatanexamplethatAdoberecentlybuilt.://’tworkDesignfromthebeginningwithfallbackinmind.Thismeans,figureout:-Whichbrowserswillyousupport?HTML5enabledbrowsersonly?oralsoolderbrowsers?-Whatwilltheexperiencebelikewhenrunninginabrowserthatdoesn'tsupportsomeofthenewfeatures.-Whatwillthemobileexperiencebelike?Answeringthesequestionsearly,willhaveamajorimpactonhowyoudesignanddevelopyoursite.SomefeaturesarenotreadyforprimetimeSomenewHTML5/CSS3featureshavemorewidespreadsupportthatothers.-Ingeneral,mobilebrowserswillhavemuchhighersupportthandesktopbrowsers.Notallfeatureshavethesamelevelofsupport.Ingeneral,thenewerthefeature,thefewerpeopleusingbrowsersthatcanusethefeature.FocusontheHTML5/CSS3featuresessentialtoyoursiteThemoreHTML5/CSS3featuresyouadd:-Themoredevelopmenttimeimplementinganddebuggingnewfeatures-Themorefallbackcasesyouhavetodevelopandimplement-ThemorecrossbrowserimplementationdifferencesyouhavetodealwithPlanforHigherMaintenanceafterreleaseThemorenewHTML5/CSS3featuresyouuse,themorepotentialforfeaturesthebreakwithbrowserupdates.Thisisparticularlythecasewithdraft,cuttingedgefeatures.-Featuresnotallstandardizedyet(stillindraft)-Moredifferencesbetweenbrowserimplementations-Implementationsmorelikelytochangebetweenreleases(asfeatureanddraftstandardsmature)Performanceisn’tjustaboutJavaScriptPerformanceisn’tjustaboutJavaScript.Usingricher,motiongraphicscanimpactperformance(orperceivedperformance),separatefromJavaScriptexecution.-Haveaplanforscalingbackmotiongraphicsforplatforms/browserswheretheydon’tperformwell.Forexample,fortheexpressiveweb.comsite,wedon'tshowpagetransitionanimationsondevicesorolderbrowsers.Performanceisasmuchaboutperceptionasrawperformance.DesignanddevelopwithmobileinmindTheExpressiveWeb.com-differentlayoutformobileandtablets-scaleddownanimationstoimproveperformanceMobilecanhavedramaticallydifferent:-Performanceprofiles,bothforJavaScriptandmotiongraphics-Sometimesbetter,usuallyworsethandesktops-Screensizes-InputmethodsThinkabouthowmotiongraphicsworkonasmallerscreensize,andwillpotentiallyslowerprocessors.Desktoplayoutsscaleddowntosmallerscreensrarelyworkwell.Optimizeforthedevice,screenandinputmethods.CSSMediaQueriesareyourfriend,butalsoconsidercreatingcompletelyseparatesiteoptimizedformobile.ThereisaHUGEgapbetweentoolingandbrowsercapabilitiesThisischanging,butfornow,youhavetowritealotofcode,evenforimplementingmotiongraphics.-Workflowandtoolscurrentlyhaveaheavydeveloperfocus.-hadtousecustomtoolingfortheexpressiveweb.comsite,whichoutputcodetoallowdeveloperstoimplementanimationstosite.-Usebrowserdebugconsolesandtooling.-AdobeEdgeshouldaddressthisissue(moreinfoinlatersession)Videoofcustomtoolcreatedinbrowsertocreateanimationforwebsite.Didn’tuseAdobeEdgepreview,aswestartedtheprojectwhilethepreviewwasstillbeingdeveloped.AdobeEdgewouldhavebeenperfectforlayingouttheseanimations.AdobeandHTML5LetstalkabouttheworkAdobeisdoingaroundHTML5T