韦德国际官网我也想来谈谈HTTPS,中新的原生元素

我也想来谈谈HTTPS

2016/11/04 · 基础技术 ·
HTTPS

本文作者: 伯乐在线 –
ThoughtWorks
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

H5 游戏开发:游戏引擎入门推荐

2017/12/28 · HTML5 · 1
评论 ·
游戏引擎

原文出处:
凹凸实验室   

韦德国际官网 1

一起来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 ·
dialog

原文出处: Kirsty
TG   译文出处:Keith   

韦德国际官网 2

不到一个月前,HTML 5.2 正式成为 W3C
的推荐标准(REC),其中,推出了一个新的原生模态对话框元素
,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家

这是 “ 最基础的示例

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可见的,如果没有 opendialog
将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

韦德国际官网 3

绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且
水平居中,默认情况下,它 和内容一样宽

安全越来越被重视

2014年8月份Google在官博上发表《 HTTPS as a ranking
signal 》。表示调整其搜索引擎算法,采用HTTPS加密的网站在搜索结果中的排名将会更高,鼓励全球网站采用安全度更高的HTTPS以保证访客安全。

同一年(2014年),百度开始对外开放了HTTPS的访问,并于3月初正式对全网用户进行了HTTPS跳转。对百度自身来说,HTTPS能够保护用户体验,降低劫持/隐私泄露对用户的伤害。

而2015年,百度开放收录HTTPS站点公告。全面支持HTTPS页面直接收录;百度搜索引擎认为在权值相同的站点中,采用HTTPS协议的页面更加安全,排名上会优先对待。

前言

很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog
元素,使用最多的可能还是 showModal()close()

const modal = document.querySelector(‘dialog’); // makes modal appear
(adds `open` attribute) modal.showModal(); // hides modal (removes
`open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector(‘dialog’);
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时,将会在 dialog
周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是
完全透明 的,你可以使用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal()
不同的是它没有阴影,用户可以与非 dialog 元素进行交互

“HTTP = 不安全”,为什么说HTTP不安全?

HTTP报文是由一行行简单字符串组成的,是纯文本,可以很方便地对其进行读写。一个简单事务所使用的报文:

韦德国际官网 4

HTTP传输的内容是明文的,你上网浏览过、提交过的内容,所有在后台工作的实体,比如路由器的所有者、网线途径路线的不明意图者、省市运营商、运营商骨干网、跨运营商网关等都能够查看。举个不安全的例子:

一个简单非HTTPS的登录采用POST方法提交包含用户名和密码的表单,会发生什么?

韦德国际官网 5

POST表单发出去的信息,没有做任何的安全性信息置乱(加密编码),直接编码为下一层协议(TCP层)需要的内容,所有用户名和密码信息一览无余,任何拦截到报文信息的人都可以获取到你的用户名和密码,是不是想想都觉得恐怖?

那么问题来了,怎么样才是安全的呢?

游戏场景分类

在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

  • 游戏效果呈现方式( 2D ? 3D ? VR ?)
    这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有
    2D 渲染、3D 渲染、VR 渲染三种。
    而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom
    由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对
    Canvas 和 WebGL 展开介绍。
    一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas
    渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择
    WebGL 渲染或者浏览器内嵌 Runtime 。
  • 游戏复杂度
    这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

浏览器支持和 Polyfill

目前,只有 chrome 支持 “

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的将来就会支持

韦德国际官网 6

上图为 caniuse.com 关于 dialog
特性主流浏览器的兼容情况

幸运的是,我们可以使用
dialog-polyfill
来缓解这种尴尬,它既提供了 JavaScript
的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用 `
标签来引用它。目前,它已支持各主流浏览器,包括
IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

对于包含用户敏感信息的网站需要进行怎样的安全防护?

对于一个包含用户敏感信息的网站(从实际角度出发),我们期望实现HTTP安全技术能够满足至少以下需求:

  • 服务器认证(客户端知道它们是在与真正的而不是伪造的服务器通话)
  • 客户端认证(服务器知道它们是在与真正的而不是伪造的客户端通话)
  • 完整性(客户端和服务器的数据不会被修改)
  • 加密(客户端和服务器的对话是私密的,无需担心被窃听)
  • 效率(一个运行的足够快的算法,以便低端的客户端和服务器使用)
  • 普适性(基本上所有的客户端和服务器都支持这个协议)
  • 管理的可扩展性(在任何地方的任何人都可以立即进行安全通信)
  • 适应性(能够支持当前最知名的安全方法)
  • 在社会上的可行性(满足社会的政治文化需要)

游戏引擎推荐

笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

  • 引擎支持的渲染方式
  • github上的 star 数
  • 更新时间
  • 文档详细度
  • 周边产品

2D,3D,VR 都支持的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
游戏开发过程中的每个环节基本都有工具支撑。 不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
LayaAir YES YES(优先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
提供开发工具和可视化编辑器 支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发

样式

打开和关闭模态框是最基本的,但这是肯定不够的,“

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
`::backdrop` 来优化

“ 显现时背影的样式

dialog { padding: 0; width: 478px; text-align: center; vertical-align:
middle; border-radius: 5px; border: 0; } dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但
polyfill 会在 dialog 后面添加一个 .backdrop
元素,我们可以像下面这样定位它

dialog + .backdrop { background-color: rgba(0, 0, 0, 0.4); }

1
2
3
dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下来,是时候向 bialog 里添加更多的内容,一般包括 headerbody
footer

XHTML

<dialog id=”sweet-modal”> <h3 class=”modal-header”>sweet
dialog</h3> <div class=”modal-body”> <p>This is a
sweet dialog, which is much better.</p> </div> <footer
class=”modal-footer”> <button id=”get-it”
type=”button”>Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

HTTPS协议来解决安全性的问题:HTTPS和HTTP的不同 – TLS安全层(会话层)

超文本传输安全协议(HTTPS,也被称为HTTP over TLS,HTTP over SSL或HTTP
Secure)是一种网络安全传输协议。

HTTPS开发的主要目的,是提供对网络服务器的认证,保证交换信息的机密性和完整性。

它和HTTP的差别在于,HTTPS经由超文本传输协议进行通信,但利用SSL/TLS來对包进行加密,即所有的HTTP请求和响应数据在发送到网络上之前,都要进行加密。如下图:
韦德国际官网 7
安全操作,即数据编码(加密)和解码(解密)的工作是由SSL一层来完成,而其他的部分和HTTP协议没有太多的不同。更详细的TLS层协议图:
韦德国际官网 8
SSL层是实现HTTPS的安全性的基石,它是如何做到的呢?我们需要了解SSL层背后基本原理和概念,由于涉及到信息安全和密码学的概念,我尽量用简单的语言和示意图来描述。

Egret

韦德国际官网 9

Egret 周边产品

白鹭引擎是企业级游戏引擎,有团队维护。Egret
在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和
TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP
打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了
WebAssembly ,这对于性能的提升又是一大里程碑。

最后,在添加一些 CSS,你就能得到你想要的

发表评论

电子邮件地址不会被公开。 必填项已用*标注