Electronic Joint Business

Solution for E-Business

html5

在 .NET 4.5 中使用 Websocket

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,

IETF 的 RFC 6455 对 WebSocket 协议进行了标准化, 在 Wikipedia 和 W3C 站点上提供了更多的介绍和详细资料。

WebSocket 连接是通过在客户端和服务器之间的 HTTP 握手来建立的(前缀是 “ws://” 或者 “wss://”) 。拿 Wikepedia 上例子来说明,客户端会这样发出请求:

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

之后服务器发出响应来接受连接:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这里的 “Sec-WebSocket-Key” 和 “Sec-WebSocket-Accept” 用于通过密钥验证算法来确认客户端和服务器之间的连接。

>>> 阅读全文

 

, , , ,

WebGL 教程 (一)三角形和正方形

文章评价:

欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。

我们先看一下本文在支持 WebGL 的浏览器中的运行效果:

要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。

注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。

>>> 阅读全文

 

, , , , , , ,

用 WebGL 和 HTML5 创建三维分子查看器

简介
许多人对 OpenGL 相当熟悉,但是对使用 WebGL 就有一点陌生。然而,许多 OpenGL 的概念和格式都可以应用到 WebGL 上。本文打算在 WebGL 编程方面做出一些尝试,可以让你了解 WebGL 的一些难易程度。象我这种略知 OpenGL 而对 WebGL 完全没概念的新手,这个例子也只花了我不到 6 个小时。现在有许多用 Java applet 或 C++ 程序写好的查看器。本项目尝试用 Javascript 和 WebGL 来完成同样的工作。让人惊讶的是,这一点也不难。

背景
WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

如何使用本文的代码

将本文的代码安装到 Web 服务器上,你可以选用本地服务器,也可以选择远程服务器。打开 index.html ,选择 Choose File 按钮,从本机选一个 PDB 文件,然后你就可以看到分子了。

这是一些快捷键:

>>> 阅读全文

 

, , , , , ,

IE 10 开发者指南之文档对象模型

Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性,包括:

  • 高级点击测试API — Advanced Hit Testing APIs
  • CSSOM 浮点值支持 — CSSOMFloating Point Value Support
  • 媒体查询监听器 — Media Query Listeners
  • 触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events
  • 注意:这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。

    高级点击测试API
    IE10 和 Metro 风格应用中的文档对象模型 (DOM)都支持 elementFromPoint 方法,该方法返回某个视区(viewport)中位于坐标(X,Y)处的元素。这个方法对单一元素仍然有效,比如说点击页面上的某个图片。但是,对于游戏、图形编辑器之类使用多个图层的应用,点击屏幕,是无法获得相交于该点的所有东西的。

    IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法,这两个方法可以获得所有相交于指定的(X,Y)坐标或者矩形区域的所有元素,并返回节点列表。

    msElementsFromPoint 方法
    msElementsFromPoint 方法以某点的坐标 (X,Y)为参数,返回所有相交于该点的元素节点集合。. 该列表按 Z 顺序排序,这意味着第一个元素就是最顶层的元素。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之SVG

    SVG (Scapable Vector Graphics,可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准,它是一种使用 XML 来描述二维图像的语言。

    SVG 允许3种形式的图像对象存在,分别是矢量图形(如由直线、曲线等组成的路径)、点阵图像和文本。各种图像对象能够组合、变换,并且能修改其样式,也能够定义成预处理对象以便再用。SVG 还支持各种特效,包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及模板对象等。同时,SVG 可以是互动和动态的,动画可以直接加入 SVG 文本,也可以通过脚本加入。在新的SVG版本中,还可以表现视频、音频等其它信息。

    SVG 通过使用脚本语言来完成比较复杂的应用,脚本语言调用 SVG 对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。任何一种 SVG 图像元素都能使用脚本来处理类似鼠标单击、双击以及键盘输入等事件。

    由于 SVG 文本是 XML 名字空间中的有效字符,这些字符能作为 SVG 图像的关键字而通过搜索引擎进行查询。

    注意:这些特性在 IE10 和 采用 HTML 的 Metro 风格应用同样适用。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之索引数据库

    Internet Explorer 10 支持索引数据库API(IndexedDB), 来存储结构化数据。不同于cookie 和 DOM 存储,IndexedDB 提供了组合(group)、 遍历、搜索、过滤 Javascript 对象的功能。

    IndexedDB API 由多个对象组成,每个都为特定的任务而设计:

    • 数据被保存在对象存储(object stores)里,它是 Javascript 对象的集合,这些对象的属性包含独立的数值。
    • Javascript 对象被保存在对象存储中,也称为记录 (record),每个记录都有一个共同的属性 key path。该属性的值被称为键值(key value) 或者键(key)。键值 (Key values)用于标识对象存储里的单个记录。
    • 索引按照某一属性的值来组织对象,它返回键值的集合,通过键值可以从原来的对象存储中获得独立记录。
    • 游标 (cursor) 是值的集合。当索引定义了游标时,游标代表着索引返回的键值集合。当一个对象存储定义了游标的时候,游标代表着保存在游标中的记录集合。
    • Key Range为索引或对象存储中的记录集定义了值的范围。 Key Rang可以用来过滤游标的结果。
    • 一个请求意味着对数据库中对象采取的不同动作。例如打开数据库会产生一个请求对象,你可以为这个请求对象定义事件处理器来对请求的结果产生反应。
    • 事务管理着操作的上下文,并用于维护数据库活动的一致性。例如,你可以版本变更的事务上下文中创建对象存储。如果事务被放弃,在此事务中的所有操作都被取消。

    索引数据库 API 规范定义了两套 API: 同步 API 和异步 API。IE10 支持异步 API。因此,对数据库的操作不会马上被执行,而是让返回对象的操作在后台执行。因此,IndexedDB 是事件驱动 API,你首先创建请求,然后定义事件处理器来响应请求的成功或者失败的结果。

    很重要的一点,这些特性在 IE10 和使用 HTML 的 Metro 风格应用是一致的。

    使用请求来打开数据库
    因为索引数据库 API 规范还在发展中,大部分厂商都为自己的 IndexedDB 实现添加了一个前缀,比方说webkitIndexedDB 或者 mozIndexedDB。对 IE10 来说,则是 msIndexedDB。为了得到正确的结果,我们用一小段检测代码来访问 IndexedDB API ,如例子所示:

    >>> 阅读全文

     

    , , , , , , ,