您的位置:乐百家在线 > 乐百家官方网站 > 天性之谜,知名网址的

天性之谜,知名网址的

2019-10-14 01:56

H5 游戏支付:横屏适配

2017/10/31 · HTML5 · 1 评论 · 横屏, 游戏

原稿出处: 坑坑洼洼实验室   

对此移动端的轻量级 HTML5 互动小游戏(简称为 H5 轻互动),若是从荧屏表现格局来划分的话,能够分类为:竖屏式和横屏式。

 

图片 1

HTML5互动小游戏案例截图

常常大家做过的要求里,主若是以竖屏式为主,而横屏式比较少。对于竖屏式场景来讲,我们的经历会比较充裕,由此,此次首要式钻探下横屏式场景下的部分亟待留意的点,特别是什么去做横屏适配。

对此 H5 轻互动娱乐来讲,要达成横屏的话,主若是化解两点:
1.无论客商手持方向怎样,都亟需保险显示屏横向展现。
2.是因为显示屏分辨率的四种化,因而就终于横屏下也是内需开展横屏适配,有限支撑镜头在全部分辨率下都能够创建适配。

下边,大家本着这两点分别演讲怎么着化解。

有名网站的 404 页面长啥样?

2017/09/21 · HTML5 · 1 评论 · 404

原稿出处: Muzli   译文出处:众成翻译   

图片 2

图片 3图片 4google.com

.

图片 5

youtube.com

.

图片 6

facebook.com

.

图片 7

reddit.com

.

图片 8

muz.li

.

图片 9

.

图片 10

amazon.com

.

图片 11

vk.com

.

图片 12

linkedin.com

.

图片 13

imgur.com

.

图片 14

aliexpress.com

.

图片 15

bing.com

.

图片 16

图片 17图片 18tumblr.com

.

图片 19

.

图片 20

stackoverflow.com

.

图片 21

github.com

.

图片 22

dropbox.com

.

图片 23

craigslist.org

.

图片 24

dribbble.com

.

图片 25

awwwards.com

.

图片 26

csswinner.com

.

图片 27

producthunt.com

.

图片 28

coolhunting.com

.

图片 29

codyhouse.co

.

图片 30

mailchimp.com

.

图片 31

slack.com

.

图片 32

mashable.com

.

图片 33

bloomberg.com

.

图片 34

airbnb.com

.

图片 35

bitly.com

.

图片 36

virgin.com

1 赞 2 收藏 1 评论

图片 37

React Native 质量之谜

2017/04/14 · JavaScript · React Native

正文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁绝转发!
款待参加伯乐在线 专栏撰稿人。

在 PhoneGap、RubyMotion、Xamarin、Ionic 一众跨平台开辟工具中,React Native能够杀出一条血路,得到方今这么大的影响力,除了React社区生态圈的加持和推特(Facebook)的大力推广以外,其他二个最器重的开始和结果正是其在付出作用和使用质量方面获得了一个相比较好的平衡:

  • 支出功能因而JS工程实践,逻辑跨平台复用获得十分大进步
  • 属性则经过全Native的UI层获得知足

不过,虽说框架提供了那几个平衡本领,平衡点的抉择却调控在开拓者手中,本文将从React Native的天性角度来探问应该什么了解这么些平衡点。

至于HTML5的11个令人为难接受的事实

2012/01/01 · HTML5 · 2 评论 · HTML5

英文:11 hard truths about HTML5,编译:WebAppTrend

HTML5为Web开荒者提供了众多强硬的新特征,但是它的部分一定的限定会让它不大概和本地使用匹敌。

HTML5整合进了成百上千新的脾气,並且有望晋升Web编制程序形式。和每几个读书技艺情报的人所通晓的同一,未有其他同样东西能像HTML5对网络形成越多改变。在代码中出席一些HTML5,网址会变得更加快更炫。不过HTML5能为那个想要要网络上完成本地利用表现的人做什么样或然不在这里列了。

在享用了HTML5的新标签以至APIs之后,未来早已经是机缘来认同HTML5方式真的是有一点点限量的。这一个限制不但会让我们对HTML5的幻影破灭,还会有希望让我们在好几场面不再使用HTML5。

天性之谜,知名网址的。其实是,即使HTML5确实有很刚劲的效果,但它并不可能化解全体标题。它的有的叠合效能是非凡强盛的,能让Web apps成为native app的无敌的敌方,然而安全难点、本地数据存款和储蓄的界定、同步难题以致政治难题都会让大家裁减对它的盼望。毕竟,任何才具都以有其范围的。

上边是Web开辟者需求接受的片段有关HTML5的事实。

 事实1:安全部是一场噩梦

顾客端总结最根本的难题是客户最后具有了对机械上运营的代码的调整权。在Web apps中,当浏览器具备三个很刚劲的调节和测量试验工具的时候,这种调控权比往年更易于被滥用。

当在浏览器中合拢了二个Javascript的调节和测量试验器比方Firebug,任何对脸书、谷歌以致其余网址感兴趣的人都得以插入断点来查看代码。那对于了然网址是什么运作的是极度方便的,但对此安全难点的话却是一场恐怖的梦。

虚拟有个变量的值是您想要改换的,Firebug或许其余多少个浏览器调节和测量检验器能够令你很轻巧地将数据改成你想要的其他数据。你想要通过改动您的地理地点来调侃一下您的朋友吧?那么你能够修改浏览器中的经度和维度变量,让浏览器“处于”世界上的别的地方。全体你的Web应用的neat features都得以被涂改,浏览器使得那样的改换比在本土使用中尤为轻易。

对此引发的安全难题,也可以有个别限制的。一些Javascript工具举个例子谷歌(Google) Web Toolkit和行业内部的编写翻译器同样复杂,它们的输出是不行令人费解的。不过部分工具比方JavaScript Deminifier能缓和这几个标题。

威慑当然也跟应用品质有关。一位通过改变浏览器上海展览中心示的经纬度来和爱侣开玩笑说在环游世界的中途是二回事,而获得别的人的权力又是别的二次事了,那会带来恫吓。一旦涉及到钱财,情况会更不佳。全部那个都意味着基于顾客端的HTML5是不能够用来拍卖敏感数据的,种种人都应有对友好的手艺加以警醒。

事实2:本地数据存款和储蓄是有限量的

浏览器中潜藏的地方数据库让Web应用更便于在管理器上缓存数据。对此外贰个在浏览器中享用这种台式机体验的人来讲,那些数据库可以省去带宽,进步品质。然则它们必然未有本地利用的多寡的强硬功效。

HTML5的数额存款和储蓄技巧料定是很主要的效果,不过你依旧不能将储存的数据迁移到其余一台机械上,或是制作别本、备份、用别的贰个利用张开。全部那些数据都以隐身在浏览器之下的。

某种程度上说,那是最不好的一种景况。因为您要承受存储这个数据库的具有权利而无法对它有其余决定。

部分风靡的浏览器能够让您看看在您的机械上创办了何等数据库,但这么些新闻是少数的。Safari以至足以让您能够删除数据库,不过你不能够浏览这一个音讯恐怕将它们迁移到别的一台机器上,那么些文件在设计之初就不曾让它亦可很轻便迁移,即令你能够产生那或多或少,假若您懂获得何地找那几个文件的话。

您一样无法一语破的到文件中看毕竟存款和储蓄了何等。当然,一个程序员能够看懂这个文件,但前提是他们商讨清楚了文件格式并且做一些hacking。这么些文件不像表单或许文本能够很轻易地荣任何编辑器展开,使得它们不像本地利用那样轻便被民众读懂。

真实情状3:本地数据能够被垄断:

顾客恐怕并不具备对数据的调整权,不过网址一律也被界定不能够管理客商数量。顾客换浏览器了?用户换机器了?比相当多Web开拓者对此都不能够。因为一齐难题,他们不能够让用户创制越来越多多少。

Web开荒者也急需操心本地数据库的安全。即使未有工具得以让客户能够很轻易修改本地数据并提高权限,但服务器同样也未曾力量去阻止顾客完结。全数因为运行客商修改Javascript代码的安全漏洞同样会潜移默化数据库。它们门户大开,等着有人写一个Greasemonkey脚本或部分本地代码去退换数据。

真相4:离线数据对同步是一场惊恐不已的梦

HTML5的本地数据存款和储蓄十分的大提高了离线使用Web应用的力量。独一的标题是数量同步。

如若一个Web应用连接到互联网上,它能够持续地将数据存款和储蓄到云中去。而当使用离线时,应用中发生的多少就不能够积存到云中。若是一位切换了浏览器依然应用了分化的机械,就能够出现别本,那时一道就能产生三个大难题。更倒霉的是,机械钟自己就只怕是不一致步的,使得发掘新星被封存的数额是不具体的。

本来,那对本地使用来讲也一贯都是贰个主题材料,可是在地面使用中,为共同负担的是人,他得以经过翻看文件名并改换日期来进展联合。不过因为HTML5并不曾给顾客对隐身在浏览器之下的数据库的调控权,开垦者必得提供客商分界面让客商通过这几个分界面来保管同步难点。

那毫无是四个全然棘手的难题。开采职员能够透过利用版本调控系统来拍卖这么些标题,而现行反革命的版本调节系统在拍卖这么些难点春季经变得进一步复杂了。但所有那项手艺并不代表那是一个很轻便选拔的缓和方案。合併差异GIT库是件很费时间的事情。HTML5开荒者们必要先拍卖好这几个标题,本事管住HTML5 Web应用的同步。

谜底5:云端什么都未有向你答应:

为HTML5将数据存款和储蓄在云端而带来的兼具结构性的难题来攻讦HTML5实在不是件很公正的事务,但云端是几个要求的一部分,因为云省去了安装软件和备份数据的难为。

是因为HTML5地点数据存储的界定,多量Web应用存储依然要保存在劳动器端,但那恐怕是惨绝人寰的。就在前不久推特(TWTR.US)决定将不再选用三个基于Linux的插件来上传照片,结果,那个插件去掉的,同等被去掉的是由此那么些插件上传的相片

如此的例证少之甚少见,可是因为各个缘由,它们正变得更扩充。你能确认保证极度可爱地无需付费提供他们的方方面面HTML5使用的新生公司在几年后竟然多少个月后还留存呢?你不得不自求多福。

场合还更不好。正如过多Web应用所显著表达的这样,这一个数量并不是您的,在命局景况下,你无法诉诸法律来恢复数据。有些更不可信赖的劳务条目以致说数目能够“未有任何原因”就被剔除。

HTML5不但没有幸免那些主题材料,它的布局其实是承接保险了其余由你的浏览器缓存的多少都会积攒在云端,这一个数量是退出了您的主宰的。HTML5的炒作说那是它的叁个优势特色,但那其实却很轻易导致不利影响。

事实6:强制晋级并非是种种人都想要的

有个传说,或然是设想的,说一人采取Gmail账户和歌厅里认知的中国人民保险公司持着随意的沟通。当Google+出现之后,全数的历史记录都出现了,因为Google+在论坛里活动连上了那一个旧的地址。每一天,这么些旧名字和旧面孔都会冒出询问是不是要加盟到论坛中去。

当Web应用公司须要提高的时候,他们会将全数人三遍性晋级。固然那听他们讲是为了让客户不再受进级安装文件之苦,但对此那个不想利用新特点的人的话,那确是一场惊恐不已的梦。那不像上面是一个有关大家隐衷的主题材料。新软件或许因为新旧软件包里面包车型地铁依据关系而有时崩溃。

事实7:Web Workers并不会管理优先级

Web Workers(译者注:一种新的 JavaScript 编制程序模型)是HTML5的三个极度风趣的特征。与其去行使Javascript古板的wait、delay和pause命令,未来Web开垦者能够拆分他们的指令并且结合到Web Workers的CPU hogs中。换句话说,HTML5 Web开荒者能够让浏览器表现得像操作系统同样。

但难点在于,Web Workers并从未复制操作系统的具备特性。就算它提供了一种方法来说负载分支并分别,然则却尚无主意来治本负载或是设置优先级。API只是让音信传遍只怕传播Worker对象。那便是它做的方方面面了,剩下的都提交浏览器了。

CPU充裕的利用比方code crackers会潜入流行网址的后台吗?顾客被交给会周期性被窃取的网址了吗?病毒已经附在一切有效的软件上了,那么攻破网址就只是时间难题了。而顾客面临那全数能做的非常少,因为她俩不曾办法去监测大概追踪Worker objects做了怎么着。Computer被重定向到钦命网页的时候只会更慢。

实际情况8:格式不合营数不清

HTML5引入了<audio>和<video> 标签,第一及时上去,它们和图像标签同样好用。只要在里面参与几个U昂CoraL,浏览器就能够引进数据流。不过,倘若它真有如此轻易的话,为何小编浪费了多个星期来让具备首要的浏览器能够播放基本的音频文件呢?

分别浏览器营造者只兑现了有个别并不是一切的旋律录制格式确实不是HTML5委员会的错。我们都以人,都想要争夺领导权。往往在一个浏览器上干活例行的公文到了另外二个浏览器上却不可能工作了。开采者要怎么着测验那或多或少呢?API开采者极度聪明,他们走入了canPlayType函数,但正是那些函数亦不是兼具浏览器都协理的。

实际9:各浏览器的兑现是单独的

HTML5的园子诗般的愿景是壹回事,其落到实处的二流的切实可行是另一回事。诚然,技师正在尽他们最大大力来完结架构师的企盼,但就是有局地标签和目的不可能符合规律干活。

举例说,有广大说辞去欣赏HTML5的地理定位API。它提供了对隐衷的一定水平的蕴藏,对准确度也会有决定。要是它能直接牢固地干活该有多好——有的浏览器就能够一连超时,那些浏览器依旧不太掌握,因为它应当掌握台式机上是未曾GPS微电路的。

说起底,大家会去抱怨浏览器没有完全落到实处HTML5的性状,实际不是去责问API自个儿的结构难点。这一实际突显了Web开拓者在开拓基于HTML5的Web应用时所面前遇到的挑衅。

真情10:硬件idiosyncracies带来新的挑战

抱怨某个浏览器塑造者超过了职务须要而提供更加好的本性表现就像也可能有失公平,但那绝不是过河拆桥。三个法拉利具备者在绕过了一个灯杆未来,他就可以意识有的时候候额外的引力并不是总是好事。

Microsof通过将IE和低档硬件驱动整合而升高了IE浏览器中画布对象(Canvas object)的特性。它竟然做了有的游玩举个例子pirateslovedaisies.com来显示其属性。

但后天程序猿们需求小心那几个附加功效是不是能够落到实处,而且这几个代码的运营速度也是无力回天确认保障的。

比方说,pirateslovedaisies.com的游艺设计者设计了三个开关来开启或许关闭IE协助的特点。然而,有未有七个API来报告您这一个特色是什么吧?未有。最简便易行的法子是由此浏览器名字来实行测量试验并预计帧速率。相当多戏耍开辟者皆有多年经验来打探可用硬件的范围,独一的化解措施正是不准创新,但那将是Web开辟者又要化解的八个新的问题。

真情11:政治向来都存在

有个叫伊恩Hickson的人,是HTML5行业内部的最首要起草者,也是生命的最高独裁者(the Supreme Dictator for Life)。小编想她们那是在欢愉,因为这么的头衔实在太不相配了。标准的编者只是在建议提出,浏览器公司的编码天才们才是最终做出决定的人。他们得以选拔完结也许不实习某些性子,然后Web开拓者将要去测验结果是还是不是稳定。几年之后,标准就能依附与贯彻程度的分外情况做出改变。

广大Javascript开垦者将宽容性难点都预先流出了开支代码库的人,比如jQuery。这一个层让我们不必去精通不一致浏览器之间的异样。但是,那些代码在今日是还是不是丰盛强壮?只偶然间才会分晓。

那么些议题展现了这几个圈子中最根本的标题。大家想要自由、创立性以至因为浏览器间的卖得快竞争而发出的充足性格。立异的步伐一点也不慢,然而因为浏览器开垦者都分秒必争加多新的特点以获得先机,使得各种浏览器之间有越来越多的不等。

但大家期望能有三个合併的管理员那样就能够博取牢固。不过,对于独裁和自治间的争斗,一直都不曾一个妙不可言的消除办法。与其为这一个差别胃疼,大家兴许想要听听WinstonChurchill对下议院所说的话:“事实上,民主是一种最不佳的内阁情势,除非别的的情势都由此了二回又三回的考查。”

 

赞 收藏 2 评论

图片 38

CSS3弹性伸缩布局(一)——box布局

2015/08/23 · CSS · CSS3

原来的书文出处: 郭锦荣   

强制横屏突显

页面内容展现方向可分为竖排方向和排名方向,如下图所示。

 

图片 39

页面内容突显情势:竖向排版和横向排版

对于竖屏式 H5 轻互动的话,页面会被期望保持竖排方向展现。而只要页面出现横排方向显示的气象,开拓者往往会选拔使用提示蒙层来举行和煦提示,让用户自己作主保持竖屏体验,如下图所示。

 

图片 40

唤醒蒙层提示客户保持竖屏体验

同等地,在横屏式 H5 轻互动娱乐中得以行使平等的艺术开展简易管理,在页面内容按竖排方向彰显时,开荒者实行对顾客提示其维持横屏体验。

只是,那对客户体验并不和睦,因为那对于那么些习惯于张开锁定为竖排方向功能(如下图所示)的 iOS 平台客商,或然是关闭显示屏旋转作用(如下图所示)的 Android 平台客商来讲,他们要求多二个拍卖步骤——先关闭竖排方向锁定可能开启显示屏旋转,然后再横向手持设备。

 

图片 41

竖排方向锁定功效(iOS)与荧屏旋转(Android)功效

之所以,越来越好的做法是挟持横屏显示,对显示器 resize 事件开展监听,当决断为竖屏时将总体根容器进行逆时针 CSS3 旋转 90 度就能够,代码如下所示。

JavaScript

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度 var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, $wrapper = document.getElementById("J_wrapper"), style = ""; if( width >= height ){ // 横屏 style += "width:" + width + "px;"; // 注意旋转后的宽高切换 style += "height:" + height + "px;"; style += "-webkit-transform: rotate(0); transform: rotate(0);"; style += "-webkit-transform-origin: 0 0;"; style += "transform-origin: 0 0;"; } else{ // 竖屏 style += "width:" + height + "px;"; style += "height:" + width + "px;"; style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);"; // 注意旋转中式点心的管理 style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;"; style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;"; } $wrapper.style.cssText = style; } window.onresize = detectOrient; detectOrient();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 横屏
      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 竖屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();

但是!这里有坑:假诺你是采取CreateJS 框架进行付出,那么就不可能经过 CSS3 路子对含蓄 Canvas 的根容器进行旋转管理,因为旋转后会导致 Canvas 内的戏台元素的风浪响应地方错乱。
化解办法是,换到选取 CreateJS 框架内的 Stage 的 rotation 属性对任何舞台旋转处理,代码如下:

JavaScript

if(self.isPortrait) { // 竖屏 // 舞台旋转 self.stage.x = self.canvasHeight; // 注意:x偏移也便是旋转中式茶食管理,更简明 self.stage.rotation = 90; // more... }else { // 横屏 self.stage.x = 0; self.stage.rotation = 0; // more... }

1
2
3
4
5
6
7
8
9
10
if(self.isPortrait) { // 竖屏
  // 舞台旋转
  self.stage.x = self.canvasHeight; // 注意:x偏移相当于旋转中点处理,更简单
  self.stage.rotation = 90;
  // more...
}else { // 横屏
  self.stage.x = 0;
  self.stage.rotation = 0;
  // more...
}

React Native的行事原理

在React Native的使用中,存在着三个不等的技术王国:JS王国和Native王国。应用在运转时会先举行双向注册,搭好桥,让三个王国知道互相的存在,以至定义好相互同盟的章程:

图片 42

(图片源于: )

接下来,在利用的骨子里运转进程中,四个技艺王国通过搭好的桥,相互合作完结顾客效能:

图片 43

(图片源于:http://www.jianshu.com/p/978c4bd3a759)

为此,React Native的实质是在七个本事王国之间搭建双向桥梁,让她们可以相互调用和响应。那么就足以把上海体育场合简化一下:

图片 44

CSS3弹性伸缩布局简要介绍

二〇〇四年,W3C建议了一种斩新的方案—-Flex布局(即弹性伸缩布局),它能够省事、完整、响应式地促成种种页面布局,包罗直接令人很头疼的垂直水平居中也变得很简短地就一蹴而就了。不过这一个布局方式还地处W3C的草案阶段,何况它还分为旧版本、新本子以至混合过渡版本三种区别的编码格局。当中名不副实过渡版本首固然针对性IE10做了同盟。最近flex布局用得比比较多的依然在运动端的布局,所以此番重大讲授一下旧版本和新本子在活动端选拔的一一知识点,让大家对地下的flex布局熟识起来。

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:天性之谜,知名网址的

关键词: