24小时咨询电话:0571-8802321710年专业网络服务供应商

资讯中心

- 直击网站建设第一现场,掌握全球化的消息 -

当前位置 : 首页 > 新闻中心 > 建站知识 > 2012年又有那些Web新兴技术需要开发者去关注

2012年又有那些Web新兴技术需要开发者去关注

2012-03-24 分享 浏览次数:7022次

  WebGL

  WebGL是一种基于Web的Graphic库,由非盈利组织Khronos运营,目前结合HTML5元素广泛应用在3D图形开发中。

  学习WebGL比较困难,因为它是底层开发——它运行在GPU上面,而且它实际上是一个OpenGL的JavaScript port,是一种游戏开发者使用的已经长期建立的API集。WebGL的主要受众是哪些已经拥有丰富OpenGL经验的游戏开发者,他们可以通过WebGL为web平台编写游戏。

  好在有很多资源可以帮助您学习WebGL,这些资源不仅仅是关于游戏开发的,还有很多奇幻的图形、视觉和音乐视频等方面。作者个人比较推荐的是:

  WebGL目前在所有桌面浏览器(发布版和开发频道)中都支持,除了IE10(微软表示不支持)。对于移动产品来说,已经在Opera Mobile 12中发布了,最终会出现在Android,BlackBerry Playbook 2.0,Nokia N900,SonyEricsson Xpertia Android Phones等以及Firefox移动浏览器中。

  SVG

  SVG(Scalable Vector Graphics)已经在Opera,Firefox,Chrome中存在多年了,但是直到IE9开始支持它之后才渐渐变得主流一些它在HTML5的光环下显得有点暗淡,尽管SVG和HTML5是面向不用应用的不同工具。

  Canvas2D可以迅速paint图形到屏幕上面,这一点很犀利。但是其全部功能就是paint了,没有内存来做那些(位置,顶层或其他)其他功能。如果您需要那种book-keeping工作,就只能自己用JavaScript实现,因为Canvas2D不会把DOM保存到内存中,也正因为如此Canvas2D速度快,十分适合第一人称射击类应用。

  与Canvas2D不同,SVG在您需要保存DOM的时候就给力了。使用JavaScript,所有的Objects都可以移动并且与动画无关。您可以试试Daniel Davis做的复古类SVG游戏Inbox Attack(http://people.opera.com/danield/svg/inbox-attack.svg)来体验一下,并且看看源代码来了解如何完成动画效果。

  因为shape和path是用Markup来描述的,所以他们可以用CSS来定型。与不同,text在SVG中保持text格式并且更加的灵活,更加可扩展,更加易于访问。在Canvas中,text变成了像素,就像Photoshop中的图形text。

  SVG最强大的特性是它基于矢量,这样您的插图,图形和UI图标等都是矢量图了,这样无论是在50英寸的电视屏还是手机屏幕桌面上,看上去感觉都是一样的清晰。在当今这样一个web应用无处不在的时代,SVG图形甚至可以包括媒体查询,可以是响应式的,可以根据不同的目标设备做尺寸的调整。

  综上所述,在最新的桌面浏览器中SVG已经能被广泛支持了。在移动产品方面的支持总体上来说也很好,以及预期在Android 3.0版本之前原生浏览器也会支持它了。

  getUserMedia

  不像那些被错误地称为HTML5的API,getUserMeida(在下文中简写为gUM)有个相对正当的理由:起初它是HTML5元素,之后它改名了然后离开了W3C WebRTC规范集合。

  gUM允许访问用户的摄像头和麦克风,本来是在WebRTC规范中在浏览器中进行P2P视频会议的,当gUM拥有了其他的用途,就离开了WebRTC。

  摄像头的访问最终在Opera12安卓版,Opera桌面实验室和Google Chrome Canary里面实现了,不过Opera和Chrome都还没有实现麦克风的接入。

  W3C规范依然在用,所以Opera和Webkit有不同的语法规范,这样的麻烦被一个叫做The gUM Shield,的小JavaScript片段搞定了。如果您想更深入地了解这方面请看作者的另一篇文章:It’s Curtains for Marital Strife Thanks to getUserMedia

  当视频从设备开始流传输的时候,源数据可以被做成变成了元素,如果需要的话还可以被定为到屏幕外面,然后拷贝到里面进行所需要的操作。Paul Neave写的《HTML5变成玩具!》(http://neave.com/webcam/html5/)为了方便操作把流媒体数据拷贝到WebGL中。作者在.net杂志的226话有采访他的报导。

  如果想把web app的功能做得像native app,gUM需要做很多的工作。试了一下Neaver的gum和WebGL在Opera Mobile 12上面的demo,感觉和平台独有的app一样富有响应式并且很时髦。当在浏览器产品中其功能被广泛应用的时候,作者语言会有很多基于web的QR代码阅读者以及很多增强现实的应用。

  File APIs

  W3C File APIs允许JavaScript访问本地文件,其中最常用的API是FileReader,可以从Opera,FireFox,IE10平台等的预览版看到(不包括Safari)。

  这一份W3C规范“为了在web应用中提供API来代表文件对象,以及编程选择和访问数据”。例如:你可以上传文件到浏览器中,并本地查找相关信息(例如文件名,尺寸,类型)而不需要到服务器端。您也可以打开文件,操作内容,这样可以加强基于浏览器的应用的交互性,用起来更像是本地应用。

  另一个常用的用途是使传统的图像上传兑换狂更具有Web2.0特色:通过允许在浏览器内部的Drag and Drop,而不是本地文件系统中改变。

  您可以通过使用一个普通的开始,然后循序渐进地提高。HTML5 Drag&Drop支持特征检测,如果存在的话就使用

  替换,那就是您的drag图像目标了。当图像被drag到目标的时候,使用File Reader API来显示一个指甲盖大小的图像。您可以看一下Remy Sharp的demo。

  Feature-detecting,progressive enhancement and upgrade messages(特征检测,渐进式增强和消息通知)

  诚然,在没有那些奇幻的API的时候,大家总是试图使用渐进式增强和HTML语义的方法让网站照常工作。然而有时候却不能这样,例如Paul Neaver的《HTML5变成玩具》中,如果gUM和WebGL现在不存在的话,其网站不能有什么补救措施了,整个网站的核心都没了。

  在这样的情况下有两种典型的惯例:要么是显示一条消息说“你的浏览器太垃圾了,塞油哪啦”或者说“你必须用Chrome6/Firefox 4/Opera10等[插入能支持你应用的浏览器]才能访问”。第一种方法又没用又粗鲁,没有建议和补救措施;第二种方法是个临时办法,因为六个月之内所有浏览器可能都能支持你现在使用的技术了,让你在网站上留下的信息过时:例如您写的解决方案是建议使用Firefox4来访问,可是半年后用户安装着Firefox7回来访问你的页面了,这可就真的没救了。

  HTML5 Please API把开发人员的语言(和特性)翻译成用户能理解的语言(浏览器)。通过调用这个API你就可以得到一些HTML返回值来告诉访问者,或者返回一个带有相关数据的JSON对象(包括浏览器Logo及下载介绍等信息)。这样您可以根据不同的客户来显示不同的补救信息了。

  结束语:

  正如您所看到的,大量的令人惊喜的新技术正在接踵而至,您着手研究上述某项技术的时候恐怕又要担心更新鲜的技术到来了吧。希望您开发得愉快,请记得让您所开发的应用在尽可能多的浏览器上面测试一下。

  杭州网站建设更多:谈谈HTML5最突出的特性与功能

 

最新网站案例

洞悉市场趋势演变让传播回归社会

    免费获取网站建设与网络推广方案报价

    • 关于我们

      杭州帷拓科技有限公司,是一家新型的全案网络开发公司,作为以互联网高端网站建设、APP开发、小程序开发为核心的专业网络技术服务供应商,帷拓科技致力于全面分析市场环境、衡量与预测市场需求、整合区别于行业竞争对手的绝对优势,结合品牌理念深度挖掘项目优势和产品价值,提升客户品牌认知、认可度。

    • 我们的客户

      帷拓科技历经十年沉淀,与国内外上千家客户达成合作关系,其中稳定合作的公司有:浙江华为、浙江移动、浙江5G产业联盟、浙江省社科院、绿城足球俱乐部、娃哈哈双语学校、健康中国杭州峰会、科雷机电等,帷拓科技始终坚持“帷有专业,才能拓展无限”的服务理念,坚持“认真坚持细节”的优质服务理念,不断完善自身,成就企业,最终实现共赢。

    • 我们的业务

      帷拓科技主营业务范围包含互联网高端网站建设、APP开发、小程序开发、商城网站建设、公众号运营以及数字营销等,涵盖了服务、房产、数码、服装、物流贸易等行业,根据品牌现状,为每个客户量身定制项目整体服务方案,以敏锐的市场洞察力、创新的市场策划能力,全面把握市场变化,为客户实现从企业到消费者的价值转换。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur