金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 2011年HTML5的六大趋势,HTML5新手入门指南

2011年HTML5的六大趋势,HTML5新手入门指南

发布时间:2019-11-04 21:11编辑:web前端浏览(200)

    2011年HTML5的六大趋势

    2011/12/09 · HTML5 · 1 评论 · 来源: csdn     · HTML5

    导读:HTML5无疑是2011年度最耀眼的技术明星,它的威力使一些论者认为Flash、Silverlight和Win32这三大曾经的主流开发平台都进入了垂死期,它也将主导Web与原生应用(Native App)的未来走向,甚至对各移动操作系统和Apple、Google、Facebook、Amazon等几大平台公司的此消彼长也会产生深远影响。

    ReadWriteWeb的年度回顾系列文章当然也少不了HTML5的身影,Dan Rowinski撰文比较全面地总结了HTML5的六大趋势,也是目前Web开发不错的趋势总结。

    HTML5正在彻底改变技术人员开发Web应用的方式。无论是在桌面还是移动,这个未来的语言和标准都已经不再遥远。移动领域最热门的争议——“Web应用还是原生应用?”将随着HTML5的发展变得无关紧要。

    2011年,HTML5都发生了哪些事情?我们一起来看看。

    1. 移动优先

    ReadWriteWeb已经将“2012最具潜力公司”称号授予了appMobi,一家HTML5创业公司,重点放在移动优先开发。事实上,随着手机和平板设备的爆炸性增长,移动优先已经成为开发社区的大趋势。

    今年,我们看到了许多大公司开始移动优先的项目。《金融时报》将其iPad应用从Apple的App Store中撤下,只开发Web应用,结果取得了不错的效果。不少游戏开发者也开始转向移动Web开发。

    新的一年,首先开发移动Web的趋势将会持续。其实,用户并不关心应用是用什么技术写的,只要好用就行。Web应用和原生应用的界线将变得模糊。

    Mobile First(移动优先)的口号最初是由Yahoo前首席设计架构师Luke Wroblewski提出的, 已经获得了业界的广泛反响。他提倡产品研发团队首先针对移动设备设计,这不仅是因为移动设备现在数量庞大而且在飞速增长,而且因为移动设备的限制能迫使我 们改变旧习惯,先做减法,更关注产品最本质、最重要的方面,同时更多地注意性能和使用场景,反而最后会得到更出色的用户体验。当然,移动设备中丰富的传感 器、摄像头等等硬件,也为产品提供了更广阔的空间。

    2.游戏开发者率先转向HTML5

    游戏开发者转而开发Web版本的动力是显而易见的:他们是使iOS设备更具吸引力的主要因素,可是无论销售收入还是应用内付费收入,却都要给 Apple分成30%。HTML5对Facebook这样的游戏平台更是至关重要。想想看吧,如果不借助HTML5和Spartan计 划,Facebook怎么能在移动平台上在Apple抽成之后继续成为平台与游戏商分成?

    然而,HTML5游戏开发是非常困难的。领先的HTML5游戏开发商Moblyng CEO Stewart Putney 8月时就对ReadWriteWeb说过,你知道用HTML5开发德州扑克有多难吗?

    当然,通过PhoneGap和appMobi的XDK等方式将Web开发出来的代码包装为原生应用也是一个方向,Facebook的iOS应用就是这样做的。

    3. 响应式设计

    多种屏幕大小是移动开发的一个难点。为此,Ethan Marcotte在A List Apart上发表了Responsive Web Design一文,第一次提出了响应式设计的理念,即让内容能自动适应任何屏幕大小。(推荐阅读:《什么是响应式Web设计?》)

    波士顿环球的网站BostonGlobe.com是响应式设计的一个绝佳范例。从网站开发者Filament的采访中可以知道,要做到这一点并非易事,一些基本概念必须从最开始就要考虑到,而如何处理来自第三方的图片和广告,也是头痛的问题。

    4. 设备访问

    Web应用和原生应用最大的区别之一,就是浏览器内运行的代码传统上无法访问某些硬件设备和底层特性,比如照相机、传感器、日历、联系人等。而HTML5将有望解决这一问题。

    5. 离线缓存

    在离线的情况下无法使用,也是Web应用的致命局限。而HTML5中的离线缓存将大大改善这一情况。2011年最大规模的离线缓存部署,是Amazon的Kindle云阅读器,能够通过各种浏览器实现本地同步。一旦这一技术成熟并得到广泛运用,原生应用的来日也就不多了——Web应用平滑部署、跨平台的天然优势太大。

    Mozilla的Fennec移动浏览器项目中的离线缓存也值得关注。

    6.开发工具的成熟

    8月时,畅销移动Web图书作者Brian Fling曾经写了一篇非常有价值的文章Anatomy of a HTML5 Mobile App(其中的HTML5移动应用解剖图非常棒,如下),文章最后指出了实际从事HTML5项目时要考虑到的点:

    时间因素,HTML5项目可能耗时更多

    预算因素,这可不是简单的网站,成本不低

    公司里是否有足够的人才?

    基本上没什么工具,很多时候都要自己搞定

    考虑所有选择,移动世界里没有绝对的对错,勿自设框框,专注客户的需求

    其中的工具问题,随着appMobi、Sencha、Appcelerator等厂商(应该还有Adobe、微软?)的加入有所缓解,但与原生应用开发环境相比还远远不够。相信2012年将有更大发展。

    图片 1

    HTML5移动应用架构图

    总结

    HTML5 的其他功能包括表单和许多新标准还将快速演进。随着标准化工作的进行,HTML5可能最后还是会变回为HTML。HTML5的领导厂商包括Sencha, Adobe, Appcelerator, appMobi以及Facebook, Amazon和Google等巨头。

    对于开发者来说,无论你是开发Brightcove那样的新型视频渲染,还是SoundCloud那样酷的HTML5音频实现,这都是一个令人兴奋的时代。从桌面到移动Web,HTML5正在使Web真正的杀手级应用——浏览器成为创新的中心。

    赞 收藏 1 评论

    图片 2

    HTML5新手入门指南

    2011/08/02 · HTML5 · 2 评论 · HTML5

    HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在你我日常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软件,让许多开发者感到十分兴奋!

    当你开始想要学习、试图想要投入相关的开发时,由于HTML5的技术还在持续发展、进化当中,学习的资源也都比较零散,较难有一个整体的方向。在本篇文章中,笔者将会介绍HTML5的主要技术组成,并且提供一些学习资源让大家参考。

    HTML5到底是什么?

    一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,不单单只是HTML部分而已,CSS 3和JavaScript也有许多的创新,让整个网页程序功能更加缤纷。

    图片 3

    HTML5的技术组成

    脱机功能

    HTML5透过JavaScript提供了数种不同的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。

    • WebStorage – 比Cookies更大、更有弹性的的储存
    • Web SQL Database – 本地端的SQL数据库
    • Indexed DB – Key-value的本地数据库
    • Application Cache – 将部分常用的网页内容cache起来

    实时通讯

    以往网站由于HTTP协议以及浏览器的设计,实时的互动性相当的受限,只能使用一些技巧来「仿真」实时的通讯效果,但HTML5提供了完善的实时通讯支持。

    • WebSocket – 实时的socket联机
    • Web Workers – 以往JavaScript都是single thread,透过Worker可以有多个运算
    • Notifications – 原生的提示讯息,类似像OS X的Growl提示

    档案以及硬件支持

    不知道大家有没有发现,在Gmail等新的网页程序当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。

    • Drag’n Drop – HTML元素的拖拉
    • File API – 读取用户本机计算机的内容
    • Geolocation – 地理定位
    • Device orientation – 手持装置的方向
    • Speech input – 语音输入

    语义化

    语义化的网络是可以让计算机能够更加理解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助。

    • New tags – 新的标签,像是< header>、< section>等
    • Application tags – 也是新的标签,像是< meter>、< progress>
    • Microdata – 加入语义的数据让搜索引擎等网站可以正确显示
    • Form type – < form>可以加入的type便多了,包含email和tel等属性,浏览器会协助进行数据格式的验证

    多媒体

    Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

    • Audio video – 影片和音乐的原生播放支持
    • Canvas – 2D的绘图功能支持
    • Canvas 3D – 3D的绘图功能支持
    • SVG – 向量图支援

    CSS 3

    CSS3支持了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。

    • Selector – 更有弹性的选择器
    • Webfonts – 嵌入式字体
    • Layout – 多样化的排版选择
    • Stlying radius gradient shadow – 圆角、渐层、阴影
    • Border background – 边框的背景支持
    • Transition – 组件的移动效果
    • Transform – 组件的变形效果
    • Animation – 将移动和变形加入动画支持

    JavaScript

    在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

    • DOM API – 更方便的查询DOM组件
    • History API – 浏览器的上下页内容修改,方便AJAX可以保留浏览记录

    现在就开始用HTML5

    截至目前而言,主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支持了许多的HTML5标准,而且目前最新版的IE 9也支持了许多HTML5标准,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!

    而对于旧的浏览器兼容性而言,先前撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支持CSS 3功能的JavaScript函数库。

    而Modernizer也是一个相当重要的JavaScript函数库,提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。

    学习方向

    在看完本篇文章之后,大家或许可以针对自己有兴趣的方面透过关键词搜寻去寻找相关的学习资源以及内容。

    Google的HTML5 Rocks网站也是我相当推荐的,其中的透过HTML5开发的HTML5介绍投影片更是值得一看,可以将上述的内容都实际试玩(推荐使用Chrome浏览器以获得完整的功能效果)。除了HTML5 Rocks,这里还有11个不容错过的HTML5网站。

    原文:Richard

    赞 1 收藏 2 评论

    图片 4

    PhoneGap开发不可或缺的五件装备

    2012/04/13 · HTML5 · HTML5

    来源:陈理捷

    0 轻量级的JQUERY兼容库

    JQuery已经成长的得非常强大了,但在移动设备上有些臃肿。如果你的应用只运行在WebKit内核的机器上,那么我强烈建议你换用移动版本的JQuery兼容库。

    Zepto和JQ.mobi都是专门为移动设备优化后的JQ兼容库。

    图片 5

    图片 6

    Zepto我不是特别熟悉,JQ.mobi我用得比较多,官方提供的数据称,JQ.mobi比JQueryMobile快3倍以上。

    相比于JQueryMobile悲催的定导航底导航固定功能,JQ.mobi也提供了自己的UI。虽然和JQM差不多丑,但不会出现万恶的导航栏闪动问题。如果你自己不想构建UI框架,那么还是推荐用JQ.mobi的UI库,换换配色和背景,也能看起来蛮专业的。

    另外JQ.mobi还提供了一系列的插件,但是都没有提供文档 。里边的scroll插件不如iScroll4给力,模板插件还可以用。这里讲下用法。

    要使用JQMobi的插件,只需要简单的用script载入对应的文件就行。

    图片 7

    JQ.Mobi的模板来自这里(这个链接要从源代码中才能翻出来,藏那么好干嘛啊…)是一个使用%号进行标记的系统。

    模板部分采用script标签包含:

    图片 8

    从上边的例子中可以看到,这套模板可以轻松支持 if/for/else等语法;数组和对象也没有什么问题,可以满足绝大部分需求。

    图片 9

    它采用$.tmpl函数将数据传入模板,得到渲染后的html。需要注意的地方是传数据时要以对象的方式来传,同时为传入的数据指定变量名。

    1 滚动效果专家:ISCROLL4

    图片 10

    虽然现在JQ.mobi已经解决了导航栏固定和滚动的问题,但是iScroll4依然是非常值得使用的。

    在使用iScroll时有几个需要注意的地方。

    首先,iScroll采用css的top和bottom值固定了顶导航条和底导航条的高度,可以修改css来调整。

    其次,iScroll是静态的,就是说,它并没有随时查看scroll里边的内容是否增加,这就要求我们在动态加入内容后,显示调用scroll对象的refresh方法。

    图片 11

    最后,iScroll4能很好的实现iOS用得很多的下拉刷新效果,这个页面上有完整的代码。

    图片 12

    2 现代浏览器:SAFARI/CHROME

    图片 13

    在手机浏览器上调试之前,先在电脑浏览器上开发会快很多,建议用safari或者Chrome。这东西虽然大家都有,但有些细节还是潜藏很深的。

    比如用Chrome调试的时候你可能会遇到跨域的问题,只要在启动Chrome.exe时加上一个参数就可以了。

    chrome.exe –disable-web-security

    另外有些同学可能不知道,PhoneGap API页面上的LocalStorage和Indexed DB 其实是Html5的标准接口,所以Chrome和Safari中的自带的调试工具就能很好的管理。

    图片 14

    打开Developer tools,选择 Resources Tab页就能看到数据库,本地存储等选项 。( 当初我找了好久Chrome的Sqlite管理插件…)

    3 PHONEGAP实时调试工具:云窗调试器

    图片 15

    虽然有点夸张,但不少网友是用PhoneGap神器来形容它的。

    本质上来讲,云窗调试器就是一个支持PhoneGap Javascript接口的移动浏览器。

    它和新浪SAE的云平台紧密结合,需要用SAE账号登录,这样当你在SAE上创建一个移动应用后,就能直接在云窗调试器的应用列表页面看见。

    图片 16

    点击应用名称后,就可以开始调试应用了。由于代码放置在SAE平台上,我一般用浏览器上的在线编辑器修改代码,Ctrl+S后直接在手机上看效果。

    一次变更两秒看到最终结果,比起本地编译,差不多一次能节省半分钟的时间。

    云窗调试器iOS版本支持iPhone和iPad,不过还没发布到App Store,如果你的设备已经越狱,可以直接在设备的safari里 点这个链接进行安装。

    4 在线打包工具:PHONEGAP:BUILD

    图片 17

    作为一个跨平台方案,PhoneGap也提供了一个云打包器,利用它我们可以不用安装任何开发环境,直接将HTML打包成iOS,Android,Windows Phone,WebOS,塞班和黑莓6个手机系统的安装包。

    图片 18

    PhoneGap:Build 的使用很简单,注册一个PhoneGap账号然后上传代码的Zip包就可以。当然,你也可以直接从git/svn取代码。

    需要注意的是PhoneGap:Build的打包是收费服务,对private app有个数限制(我暂时还没遇到,不过看官方的说明是有限制的)。另外PhoneGap:Build上iOS的打包需要上传证书,否则不能打包。

    如果你只是需要打Apk包的话,也可以使用SAE提供的在线打包器,这个打包器是完全免费的。另据小道消息,iOS无证书打包器已经在调试中了,预计月底上线。

    最后提供一个懒人福利:文章中提到的东东打包下载。

    赞 收藏 评论

    图片 19

    本文由金沙国际官网发布于web前端,转载请注明出处:2011年HTML5的六大趋势,HTML5新手入门指南

    关键词:

上一篇:杀不死移动应用,下一代网页

下一篇:没有了