仓酷云

标题: 带来一篇HTML5语义化标签和基于HTML5的Web App [打印本页]

作者: 透明 时间: 2015-1-15 23:09
标题: 带来一篇HTML5语义化标签和基于HTML5的Web App
HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。破洛洛文章简介：谈到WebApp，我们就不能不先想到NativeApp，今朝我们在AppStore高低载的ipa和我们在Googleplaystore或其他网站下载的apk都是属于NativeApp，那末这类App有甚么上风和优势呢？
陪伴着挪动设备的疾速兴起，App市场的开展也日渐迅猛，今朝iOS和Android平台的App数目总和也到达100万款之多，据AAWP报道，WindowsPhone的使用市场数目已冲破8万，提升成为第三年夜使用平台。挪动数据剖析公司Flurry在2011年App趋向呈报中显现，人们消费在App上的时间已凌驾人们扫瞄网页的工夫。

将来App的市场出现一片光亮情形，而关于挪动开辟商来讲，分歧平台的使用则必要开辟分歧的App来撑持，不管在更新及保护上都必要必定的本钱。于是更多人想到了基于HTML5的WebApp，今朝支流操纵体系iOS、Android和WindowsPhone的扫瞄器都关于html5年夜部分特征的撑持也加倍突显HTML5在将来挪动设备真个位置。那末HTML5有何远景呢，接上去我们一同来会商HTML5和WebApp：
谈到WebApp，我们就不能不先想到NativeApp，今朝我们在AppStore高低载的ipa和我们在Googleplaystore或其他网站下载的apk都是属于NativeApp，那末这类App有甚么上风和优势呢？
NativeApp的上风：
1、优异的用户体验和华美的交互操纵，可以针对分歧平台供应分歧用户体验；
2、可不受收集速率限定，节俭带宽本钱；
3、可会见当地硬件设备和资本；
4、红利形式开阔爽朗。
NativeApp的优势：
1、分歧平台之间的移植贫苦；
2、保持多个版本的本钱对照高；
3、必要经由过程第三方考核；
4、红利必要与第三方分红。
针对NativeApp的不敷，WebApp很好了填补了这些优势，开辟商只需懂得HTML5、CSS3、js和DeviceAPI便可完成使用在多终端设备战争台的运转，很好的包管了使用跨平台的分歧性，相对NativeApp开辟本钱更低，同时更新保护更简单，用户几近没有安装本钱，也加倍自在和开放。但任何新手艺老是有益有弊，WebApp其本身也会碰到在用户体验、UI效果及挪用当地设备和资本的相干成绩。
固然2种形式各有优缺，但跟着挪动设备及html5的迅猛开展，让微软和乔布斯也意想到：只要HTML5才是web将来。从出名挪动云平台公司Appcelerator公布的查询拜访呈报能够看到HTML5MobileWeb已上升为第4位。

尽人皆知，HTML5不单单给我们带来了更多语义化的标签，另有canvas画图、音频视频、当地存储、离线使用、地舆地位定位等新特征。

破洛洛文章简介：谈到WebApp，我们就不能不先想到NativeApp，今朝我们在AppStore高低载的ipa和我们在Googleplaystore或其他网站下载的apk都是属于NativeApp，那末这类App有甚么上风和优势呢？

接上去我们从App的角度来看看HTML5带来的这些特征：
特征1、Canvas画图
Canvas在网页中相似于Flash的感化，是HTML5引进的一个新的标签，但其自己其实不具有绘图的才能，只是为JavaScript供应一个绘制图象的地区，可使用JavaScript来绘制图形、编纂图像。如Harmony，基于Canvas的一个画图工具，利用其供应的共同画笔款式，在iPhone和Andriod手机上能够绘制一些优美的铅笔素描作风。
可参考：http://www.html5rocks.com/en/tutorials/canvas/integrating/

良多HTML5站点也使用Canvas完成绘画功效和在线图象编纂功效，如Sketchpad，一个在线画板，具有相似Windows画笔的一切功效；CloudCanvas，基于HTML5的收费在线图象编纂软件，能够完成AI和PS的一些矢量与位图的编纂功效。
特征2、LocalStorage(当地存储)
我们晓得良多App下载安装后，都是基于当地离线缓存运转，而无需哀求网站。WebStorage很好的办理了之前Cookie的巨细不克不及凌驾4K的为难和分歧扫瞄器针对每一个域名下Cookie数的限定。WebStorage可分为localstorage和sessionstorage，localstorage供应了5MB的存储空间，而sessiongstorage乃至没无限制。不但在启动App的时分能够加载缓存数据来加速启动和显现速率，还能够削减收集流量，离线运转App。
Google之前用GoogleGears这个扫瞄器插件来办理网页使用的离线利用，如离线利用Gamil，跟着扫瞄器对HTML5新尺度的撑持，Gears也渐渐被丢弃。今朝GoogleReader使用HTML5离线手艺，可让用户离线浏览定阅的最新扫瞄过的文章。

特征3、Geolocation（地舆定位）
GeolocationAPI是W3C新增加的一个API标准，能够用经由过程扫瞄器来猎取用户的地舆地位。对扫瞄器版本请求绝对较高，今朝能撑持的扫瞄器有IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+。能够经由过程geolocation下的getCurrentPosition办法来猎取用户的信息
navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError);
同时还能够综合GoogleMapsAPI来监控用户的地位让其在舆图上显现用户的正确地位。详细的利用人人能够google下，响应的先容文档较多，在此不再类述。
今朝挪动设备上的定位特征更多的表现在交际范例的LBS使用中，如微信，手机QQ、微博、GoogleMap等。

特征4、音频视频
HTML5界说了两个新的标签video和audio，音视频自在的嵌进页面，让多媒体的情势也更加天真。出格是在iPhone和iPad对flash的不撑持，
HTML5的音视频显得尤其主要。同时HTML5嵌进代码更简便，如网站上的视频，挪用flash必要很长一段代码：

那末利用HTML5代码只需一行：

特征5、对CSS3的更好撑持
CSS3固然不是HTML5的特征，但关于CSS3的新特征如：border-radius、border-image、box-shadow、transform、transitions、animation、user-interface等在HTML5扫瞄器上体现最好。
用过Path的同砚一定会对内里的交互体现赞不绝口，

来看看外洋victor用纯CSS3完成的一样动画效果吧。http://namepk.sinaapp.com/blog/path/
除下面枚举的HTML5特征外，另有良多主要的特征如WebGL、SVG、Form、WebSQLDatabase、WebWorker、WebSocket、Drag&Drop等，在此不再逐一形貌，
今朝HTML5的标准还在制订和会商中，在使用WebApp开辟过程当中仍旧会碰到对事务的呼应速率页面衬着等功能成绩、分歧机型及web扫瞄器内核的兼容性成绩、关于挪动设备硬件资本的会见等浩瀚成绩，业界也呈现了良多如PhoneGap、SenchaTouch、JqueryMobile等挪动设备开辟框架，同时也有以HTML5+Native加壳体例的App如网易博客Android客户端，各类新手艺的实验和支流扫瞄器及各年夜智能机操纵体系对HTML5特征的撑持，HTML5将来在挪动终真个开展无疑让人人加倍等候。
</p>
WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。

作者: 变相怪杰 时间: 2015-1-17 20:08
由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

作者: 兰色精灵 时间: 2015-1-21 19:19
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 金色的骷髅 时间: 2015-1-30 22:08
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 乐观 时间: 2015-2-6 16:27
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 灵魂腐蚀 时间: 2015-2-17 08:25
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 仓酷云 时间: 2015-3-5 18:37
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 愤怒的大鸟 时间: 2015-3-12 11:56
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 爱飞 时间: 2015-3-19 22:13
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

欢迎光临仓酷云 (http://ckuyun.com/)