12
返回列表 发新帖
楼主: Sky-Tiger

浅谈如何降低 HTML5 的异步编程复杂度

[复制链接]
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-10-15 20:08 | 显示全部楼层
HTML5最主要的优势就在于它适合众多平台,从PC浏览器到手机、平板电脑,甚至将来的智能电视。只要设备浏览器支持HTML5,HTML5应用或游戏在该平台中就可以直接运行。

    这带来原生应用所没有的优点(注:原生应用通常需要进行重新设计,方能投放至另一个目标操作系统)。若开发者想要将自己的iOS游戏移植到Android平台,他就需要对游戏做出根本性的调整。有了HTML5技术,此过程就会简单许多。

七个特点告诉你 HTML5技术到底怎么样
HTML5可跨平台运行

    大型网游发行公司Spil Games的CEO Peter Driessen表示,“我们已采用HTML5技术1年多,深知基于各设备推广网页游戏的重要性。随着玩家的体验次数日益频繁及各种设备的多元化,这一点越来越重要。”

    Zynga德国工作室的Paul Bakaus(他曾协助公司将此技术植入公司的各款网页和手机游戏中)表示,“推广HTML5技术的理由很多。”

    他表示,“一个优点就是我们能够轻松将其推广至手机浏览器。例如,你无需进行安装——这是一大优点。再来就是内容更新和跨平台开发。若你创建的是原生应 用,多数情况下你需要分别在Android和iOS平台创建内容,也许还有桌面平台。基于HTML5技术,你只需要制作一次,就可以将其推广至各平台。”

    除能够让开发者更轻松地将游戏植入各种平台外,HTML5还提供便捷的跨平台交流,支持很多云端功能,从社交机制到持久的游戏世界。

    Spil Driessen表示,“我们希望通过HTML5获得的是真正的云端游戏。我们支持众多在线社区,显然我们的玩家,其他玩家也一样,越来越希望自己能够基 于手机玩游戏。HTML5给我们奠定了基础,让我们得以创作出包含社交功能的无缝隙游戏体验,无论是外出还是在家。”

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-11-4 21:19 | 显示全部楼层
在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上。
这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas实现,真是太简单了。在《将画布(canvas)图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能——很简单,虽然有一个小bug——但完全能当作签名用。
我之前说了很多如何将canvas图像保存成图片并下载的方法,但这些方法都是将图片保存到客户端,而我们的签名需求是需要将canvas的内容保存到服务器端,如何实现?
其实很简单,看完下面的这段PHP代码,相信你也会觉得很简单。
<?php        // requires php5        define('UPLOAD_DIR', 'images/');        $img = $_POST['img'];        $img = str_re[......]
本条目发布于六月 28, 2014。属于HTML5教程分类,被贴了 HTML5 Canvas 标签。基于HTML5的云虚拟主机配置界面[size=0.928571429]624 人浏览
[size=0.928571429]1条评论


云计算大行其道,上期开源中国的原创会就有好几位云计算专家演讲,从底层的虚拟化技术,到上层的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路
云计算大行其道,上期开源中国的原创会就有好几位云计算专家演讲,从底层的虚拟化技术,到上层的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路


使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-11-4 21:20 | 显示全部楼层
参考示例 – visualops
云平台可视化这块儿国外做的不错,有不少开放的示例可以学习和参考,客户看中了这家云管理系统http://www.visualops.io/ ,这个系统使用的是SVG技术,体验了一下,效果不错,参照着实现
从界面上看,一个云节点上有多个子网,每个子网内有多台虚拟主机,然后每个云节点有统一的[......]

本条目发布于六月 21, 2014。属于HTML5教程分类,被贴了 云计算虚拟主机 标签。HTML5简介及HTML5的发展前景[size=0.928571429]1,668 人浏览
[size=0.928571429]1条评论


WEB技术发展越来越迅速,HTML5的到来更是把WEB技术推向了巅峰,目前HTML5技术已经日趋成熟,不仅在PC段,HTML5更是在移动终端上也有广泛的应用,HTML5的未来十分光明,值得我们去学习。
什么是HTML5
HTML5是最新一代的HTML标准,它不仅拥有HTML中所有的特性,而且增加了许多实用的特性,如视频、音频、画布(canvas)等。2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”
HTML5可以做什么
HTML5作为HTML标准,你当然可以用它来实现之前HTML可以实现的功能,除此之外,我们还可以用HTML5做以下特别的事情:
1、本地存储
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。
2、实现多媒体更加简单
我们可以利用HTML5的<video>和&[......]

本条目发布于六月 19, 2014。属于HTML5教程分类,被贴了 HTML5动画HTML5简介 标签。HTML5 placeholder美化input背景提示文字[size=0.928571429]1,110 人浏览
[size=0.928571429]暂无评论


之前在介绍HTML5 input新增的几种类型(数字、日期、颜色选取、范围)时,曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。
CSS代码
在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同,但相信以后会统一。
/* 通用 */::-webkit-input-placeholder { color:#f00; }::-moz-placeholder { color:#f00; } /* firefox 19+ */:-ms-input-placeholder { color:#f00; } /* ie */input:-moz-placeholder { color:#f00; }/* webkit专用 */#field2::-webkit-input-placeholder { color:#0[......]
本条目发布于六月 16, 2014。属于HTML5教程分类,被贴了 html5 inputPlaceholder 标签。HTML5 input新增的几种类型(数字、日期、颜色选取、范围)[size=0.928571429]1,295 人浏览
[size=0.928571429]暂无评论


你可能已经听说过,HTML5里引入了几种新的input类型。在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等。而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等。网上之所以还没有大量的出现对这些新型的input类型的使用,是因为还有很多人在使用古老的IE6/IE8,只有当使用这些古老浏览器的人所占的比例可以忽略不计时,那就是HTML5主导天下之日,那天也是我们Web开发人员的新纪元的开始。
下面是这几种新型input类型的实例演示,可能在不同的浏览器上它们的样式会稍微有些变化,但基本的功能都是一样的。


使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-11-4 21:20 | 显示全部楼层
html5中的新型input类型数字型 type=”number”<input type="number">
效果:
日期型 type=”date”<input type="date">
效果:
颜色选择器 type=”color”<input type="color">
[......]

本条目发布于六月 14, 2014。属于HTML5教程分类,被贴了 html5 input 标签。HTML5 DNA螺旋旋转动画效果[size=0.928571429]600 人浏览
[size=0.928571429]暂无评论


这是一款基于HTML5的螺旋动画特效,它就像DNA分子结构一样,可以绕着中心线不停地旋转。对于HTML5旋转动画,之前我们也介绍过一款,比如这款HTML5 3D图片切片滑块旋转动画,就非常不错,大家也可以看看。

本条目发布于六月 12, 2014。属于HTML5教程分类,被贴了 HTML5动画 标签。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-11-4 21:20 | 显示全部楼层
HTML5 Placeholder实现input背景文字提示效果[size=0.928571429]1,199 人浏览
[size=0.928571429]暂无评论


这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示:
这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。
语法基本是这个样子:<input placeholder=”提示信息...”>
HTML代码<form><input type="text" placeholder="你的姓名..." name="lname"><input type="password" placeholder="你的密码..." name="pass"><input type="submit" value="提交"></form>用CSS美化Placeholder提示信息的样式
CSS3里有相应的通用的对Placeholder提示信息美化的方法。[......]

本条目发布于六月 12, 2014。属于HTML5教程分类,被贴了 Placeholder 标签。用HTML5打造本地桌面应用[size=0.928571429]1,735 人浏览
[size=0.928571429]暂无评论


HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势,同时在智能手机和平板中也是开发利器。
在手机端,有一个非常棒的工具叫做PhoneGap,使用这个快速开发平台,任何人都可以使用HTML5+CSS3+JavaScript开发出安卓,iOS等应用。PhoneGap的最好的一个特点是,你并不需要联网,不需要连接web服务器,你可以从把它当成本地桌面应用。一旦下载到本地,它和本地原生应用一样可以离线使用。
通常我们会感觉网上有很多有趣的HTML应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用HTML5+js开发的本地桌面应用就是要提高给用户这种体验,除了上面说的PhoneGap,还有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是开发HTML5本地桌面应用的框架。
Pokki和Chrome不仅可以用来开发HTML[......]

本条目发布于五月 21, 2014。属于HTML5教程分类,被贴了 桌面应用 标签。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-11-4 21:21 | 显示全部楼层
HTML5 Web存储(Web Storage)技术及用法[size=0.928571429]615 人浏览
[size=0.928571429]暂无评论


在如今的Web开发中,HTML5是大家讨论的最大一个话题。HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好、更快、更灵活的气力。这些新功能中有一个非常让我感兴趣,它就是Web存储(Web Storage)。Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法。下面让我们来看一看Web存储(Web Storage)的基本用法!
Web存储(Web Storage)基本要领
  • 存储的数据可以是任何类JSON的结构化数据。
  • 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除。浏览器也因为存储空间的限制或安全原因删除它们。
  • 存储的信息在整个域名下都可以使用。
Web存储(Web Storage)里的方法
  • setItem(key,value): 往sessionStorage对象里增加一个key/value数据。
  • getItem(key): 根据key获取值。
  • clear(): 清空sessionStorage对象。
  • removeItem(key): 从sessionSto[......]

本条目发布于五月 14, 2014。属于HTML5教程分类,被贴了 Web Storage 标签。HTML5如何用window.postMessage在网页间传递数据[size=0.928571429]883 人浏览
[size=0.928571429]暂无评论


估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。
数据发送端
首先我们要做的是创建通信发起端,也就是数据源”source”。作为发起端,我们可以open一个新窗口,或创建一个iframe,往新窗口里发送数据,简单起见,我们每6秒钟发送一次,然后创建消息监听器,从目标窗口监听它反馈的信息。
//弹出一个新窗口var domain = 'http://scriptandstyle.com';var myPopup = window.open(domain             + '/windowPostMessageListener.html','myWindow');//周期性的发送消息setInterval(funct[......]

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表