必威体育下载Christian Heilmann

您当前正在浏览必威体育下载Christian Heilmann一月的博客必威体育简介档案,2013。

一月份存档,二千零一十三

闪光不是敌人——我们缺乏对重要事物的关注

星期四,January 31st,二千零一十三

昨天我发微博说促生长剂,一个网站,每次你点击一个按钮,它就会加载一个随机的cat gif和音乐。大多数人都很高兴能得到一些非常好的实习生,但是一答复对我来说,可悲的是,这是可以预测的:

@janl:@codepo8请不要链接到flash-bs。

燃烧女巫!我敢链接到使用flash的东西。每次我把一段YouTube视频嵌入到一篇关于HTML5.闪光是敌人!我怎么敢和它交朋友?

好,在YouTube嵌入的情况下,有一个原因:很多人要求我不要把我自己的托管视频文件包括进来,因为他们生活在连接速度较慢的地区,使用flash嵌入会给他们带来质量很差的视频,但是在他们的连接上可以查看和跳过/扫描,而不是下载一个相对庞大的文件。

此外,这个笑话是关于那些抱怨flash youtube视频的人,当我使用iframe嵌入时,给出HTML5视频给那些选择这个HTML5YouTube试用.爱的人HTML5他们需要抱怨的地方太多了,没有用,也不太可能。或者,更有可能——他们是巨魔。

使用一种被广泛用于讨论另一种技术的工具没有什么“讽刺”的。正如中雄辩的解释杰弗里·塞尔德曼的咆哮关于这个问题。

But back to Procatinator.Procatinator是“互联网奇思妙想”中的佼佼者。

我在参加恶作剧-我马上就回来

是为了让人们发笑,浪费几分钟时间,不要生气地回复邮件,还有小猫和音乐。它已经通过使用YouTube视频而不显示这些视频,而是将它们作为音乐播放,而代码显示这是一个有趣的项目,而不是其他任何东西,来绕过非法途径。And you know what?That is fine.重要的是最终结果,nobody gives a hoot about the technology used or the code quality.除了我们,没有人能自封为开放的捍卫者。

If you want to reach as many people as possible,你用任何有用的东西。这就是为什么imgur中的文本都是JPG格式的,没有可选文本或对等文本。它们易于创建和样式化,并且可以在每个环境中重新分布,包括那些不允许HTMLlike Facebook or Google+.当然,专业的异想天开的网站提供商也会提供一个文本,相当于让谷歌把他们的网站作为一个资源索引。把它归咎于声音显示。

去年,动画赠品有了大幅反弹。原因不在于它们的质量惊人,或者文件大小很小——相反,除非你真的知道自己在做什么(专业提示:感性的颜色,没有抖动,10%有损,放下那些花呢架)。原因是它们很容易在任何可以显示图像的地方生成和工作。

所以,闪光灯。为什么不是敌人?它是封闭的,与网络格格不入,毕竟!

没有闪光灯,作为一个内容分发平台的Web不会在它所在的位置。There,我说过了。原因是我们喜欢嘲笑的互联网奇想“浪费时间”和“业余工作”。没有闪光灯我们就不会家庭跑步者,我们不会有乔卡通和著名的Gerbil in a microwave,我们不会有韦伯与鲍伯,我们不会玩所有的游戏新场地还有更多。

TexSMAS024 TexSMAS049 TimSase0.2 TexSMAS089E
罗布·曼纽尔和我,注意,他穿着格里芬多的颜色,任何生姜应该。

上次去罗布的时候我就谈过这个,founder ofB3TA.com我们聊了聊我的工作。Rob是内容制作人,大部分的IT互联网异想天开,但其背景是为专业内容做IT工作。And his main point was that Flash makes it damn easy to get something out there and it is all about that.对他来说,网络内容的半衰期比我短得多,最关心代码和内容质量的人。Using Flash and its tooling it is simple to create a quick animation with music and get it out there.

这就是它归结为:工具!We shouldn't complain about Flash being used,我们应该确保构建工具,允许内容制作者以开放格式发布他们的作品。Mozilla的Webmaker计划就是这样的。爆米花可以是一个伟大的工具,使您的第一个交互式开放技术视频使用熟悉的时间线界面的闪存。更好的是,土砖,闪光背后的人正在开发允许内容创建者将其呈现为HTML5.如果有人知道选择Flash的人需要什么,是他们!Why don't we as a self-appointed spokespeople of open tech promote and support these efforts instead of complaining about the use of Flash?

那普氏治疗仪呢?它真的需要闪存来工作吗?是和不是。昨天晚上我花了半个小时来创建HTML5version of Procatinator使用更简单的,普通的javascript,CSS(using background-size instead of stretching the GIFs with jQuery) and using theYouTubeiFrAMAPI以及YouTube Data美国石油学会.我还得加入一个真正的永久排列选项,而且同步没有我等待的那么顺利。GIF装货。

So hooray,Chris saved the day and opened what was closed!Rejoicing all around.但我们必须问自己的问题是,我们从中获得了什么?人们抱怨使用闪光灯的主要原因是:

  • 他们没有闪光灯,也不想要。
  • 易访问性问题(在许多情况下,基于闪存和辅助技术的旧信息)
  • 它在iOS上不起作用。

后者才是真正的关键。我们对我们昂贵的苹果玩具感到兴奋,如果有人在我们非常封闭的平台上以一种不易理解的格式发布他们的内容,我们会受到冒犯。他们怎么敢不支持“人人都有”的东西?

好,it turns out that the non-support in many cases is by design as iOS doesn't make it easy to support it using open standards when it comes to audio and video.

对于Procatinator,我告诉制造商,他们可以使用youtube iframe美国石油学会确保HTML5支持而不是闪存依赖项.不是这样。主要问题是,节目主持人需要自动开始播放这首歌,在iOS中HTML5media content needs to be activated by the user to start loading and playing.因为在这种情况下,视频是不可见的,只是一个背景音乐提供商,没有“仅音频”美国石油学会对youtube来说,我所有的努力都没什么不同。通过操作系统的设计,我们的手被束缚住了。而且,作为开发人员,我们应该为此而尖叫和抱怨——而不是抱怨人们在使用有用的东西。

总而言之,当我们打开网络时,我们需要跨越的一大障碍并不是告诉人们使用他们所知道的东西。Our job is to provide the tools to make it the simple choice to use open technology and to create as many high-profile sites and products that point out that a lack of functionality is based on the platform not allowing it instead of the technology being insufficient.

What we have to avoid at all cost is bringing up a new dependency layer for end users.当我们构建“开放”时,抱怨flash需要安装是荒谬的。HTML5技术解决方案“只在一个浏览器中工作,或期望最终用户设置开发人员标志或下载夜间构建。这并不是因为用户的接受速度慢,这是因为我们对玩具过于兴奋。让我们继续努力,运用我们的知识,让人们更容易使用开放式网络。我们不能向他们要求任何东西,好像我们一样,我们会失去他们的。不闪,但对于本土技术。

讨论?Google+ thread以及在脸谱网

Zoom and Pick – an in-browser tool to pick colours from images

Monday,1月28日,二千零一十三

今天我又玩了拖放和HTML5帆布。结果是一个工具,可以从图像中选择颜色并创建相应的CSS/html调用变焦与拾取

动物与拾取
zoom-and-pick2

这是我在屏幕上解释它的作用:

接下来我会做一些小的演示多媒体数字网很快。The biggest fun part was creating the zoom functionality.

被批评驱使必须死亡

星期日,1月27日,二千零一十三

按要求:如果你想对此发表评论,这是Google+帖子一本笔记本.

批评是件好事。我是一个理性分歧的粉丝,人们在看到不同的观点后,相互挑战,对自己的工作进行不同的思考,改变自己的态度。玛格丽特·赫夫南的敢于反对泰德谈话是一个很好的资源,如果你想知道如何工作。这就是编辑的意义所在。一个好的编辑可以使一本书或一部电影比实际制作的要多得多,方法是挑战作者或制作人,让他们更进一步,思考更大。

然而,执行不当的批评可能会吓坏,扼杀并让人们觉得自己是一个失败,尽管他们所做的只是一个很容易纠正的小错误。

/不赞成

好的批评需要时间和努力。一个好的批评家不仅指出有缺陷,相反,解释缺陷是什么很重要,它们对整体质量的影响是什么,以及可以做些什么来改进。一个坏批评家直截了当地告诉我们该怎么做,相信由批评家自己的环境影响所形成的主观真理或工作方式。那样的话,批评家可能会和被批评的人一样离谱。

I just spent a few days at hack events helping people port their existing or build completely new apps.It was very insightful seeing a massive range of developers in different stages.我最困惑的是,当我展示一些想法和解决方案时,那些有很好想法的人会被困在技术问题上,他们会以压倒性的感激之情来面对我。当我问这些开发人员他们询问人们的经验时,我听到了很多“嗯,我不敢问,因为我不想在网上听起来很愚蠢,人们很快就会放弃你做的那些糟糕的事情”。

这使我悲伤。我,像我认识的大多数网络开发人员一样,必威体育下载通过观察别人的东西和戳来学习并改变它,直到它做了我想要的。然后我研究了它为什么会起作用,并花了我生命中的几个月时间在邮件列表和论坛上征求和给出想法和建议。当然,在激烈的讨论中,我们都说了些可怕的话,过早地把事情抛在一边,但最终还是达成了共识——有一种感觉就是你必须通过交流来变得知名,并且更加了解你可以从中学习到的人。必威体育下载

进入社交媒体,并扔掉140个字符,实时网络快速的世界谁说的最离谱的事情和“是可怕的”。社交媒体的速度及其碎片化(你在Twitter上发布了吗,脸谱网,谷歌+,github,你的博客,JSFiddle,JSBin or where?) is a breakneck environment and it leads to people acting – possibly unconsciously – like complete sociopaths.

以此类推。在她的博客上,我的同事希瑟·亚瑟描述了她写的一个软件是如何在Twitter上被无情地击落的。被别人仰慕。希瑟为此感到很难过——不仅因为她受到了批评,但主要是因为没有解释为什么her code was deemed bad.

这个未知的元素可以让任何人很容易发现自己的缺陷:

在这一点上,我只知道,通过创建这个项目,我做了一些非常错误的事情。好像我做错了什么,太蠢了以致于它会让人震惊。So wrong that it doesn't even need to be explained.我的代码太糟糕了,会让人眼睛流血。所以我当然开始抽泣。

Some of the people who shot down her code in far too short messages lacking any context and informationnow 道歉and there were some good quotes in there:

我很抱歉。我让别人觉得很糟糕,我觉得很糟糕。我觉得更糟,因为我不是故意说他们很糟糕,但不小心做到了。
很容易忘记人们编写代码。But it is important that we don't forget that.编写代码很容易,把它摆在世界面前不是。

希瑟以一个非常好的观点结尾:

每当我遇到新的编码人员或去开会时,我都会宣传开源。我告诉他们做一些有用的东西,然后把它放在外面。你能想象一下,如果这些新的开源者中的一个接受了我的建议并得到了这个回应,没有我的支持。你能想象吗?

由于我们的批评速度太快,不够详细,我们现在可能会劝阻许多新的人,他们可以在不久的将来创造惊人的东西。这是可悲的。

我很幸运,我在推特上有追随者(在巨魔中),他们不害怕在我对某件事过于苛刻或油嘴滑舌时向我指出。当这种情况发生时,我会努力弥补,发现我每次都在学习,它教会了我很多东西。必威体育下载

让我们看一个很好的例子来说明如何做事情。前几天我发了一封信用一个请求加载脚本和样式我读了这篇文章,然后说了一句“嗯,I am not sure" about it.然后我发现一条评论完全涵盖了我想说的内容,丝毫没有伤害简:
——
嘿,Jan,
很高兴看到人们四处闲逛;提出新想法总是件好事,不管它们有多现实(这里重要的是扩展我们的想象力)。
顺便说一句,你所描述的方法在过去从来没有被其他人做过,我认为这是一个很好的理由:它没有帮助…混合CSSJS是个坏主意恕我直言,for many reasons:

CSSIs loaded in parallel by the browser,而JS不是;

CSS在头部加载(在DOM呈现)由于性能原因,JS通常加载在主体中;

缩小CSSJS的工作方式不同,所以把一个包含到另一个之中是在寻找麻烦;

在一个相当大的应用程序中,有了一个较大的代码库,把所有东西放在一个单独的文件中,最终会得到一个无法管理的大文件;

将它装入一个单独的块中将被证明是不实际的;either you end up with福柯或者你会得到一个白页,直到你的浏览器完成文件加载;此外,loading 1 single minifiedCSS文件和1个小型JS文件在优化方面通常已经足够。

我甚至没有考虑到最近谷歌的言论/谣言似乎表明,现代浏览器在下载多个资源时(在最近的一次屏幕放映中,它是一个有棱角的家伙,浏览了这个概念),也非常优化和性能。不要放弃尝试;疯狂的想法有时会带来伟大的发现;)

干杯,
达维德
——
看看这里发生了什么?与其说一句“这是愚蠢的”话,不如说一句“这是愚蠢的”。戴维德·阿尔贝托·莫林以一种完美的方式批评:他开始鼓舞人心,指出这确实是一个新的想法,列出了使这个想法有缺陷的技术细节,列举了一些例子,最后感谢简提出了这个想法,并鼓励他继续这样做。

This takes time,this takes effort,但总体上是积极的结果。简很高兴得到评论并从中吸取教训,必威体育下载我对戴维德(我以前从未听说过的人)非常尊敬,简可以更新他的帖子或跟进考虑技术问题的帖子。

Long story short.If we want to encourage people to go out and show the world what they did (and we all 必威体育下载learn from that) we need to stop dropping dismissive short sentence criticism and instead spend more time to explain,核实并证实我们的批评。这样我们仍然可以防止坏代码被使用,但我们不会同时被视为一个可怕的人。

正如Steve Klabnik所言:

Twitter让人很难不意外地成为一个混蛋。

让我们使用允许我们提供上下文和解释为什么我们的批评的渠道——如果它是Github上的代码,问题跟踪器是一个伟大的地方。我们仍然可以发送一条推特,指出我们在那里的批评,从而表明我们在关心和改进,而不是伤害和赢得互联网。

照片由霍比亚斯苏多尼格姆

您可以做五件事来提高HTML5的性能

Friday,1月25日,二千零一十三

在过去的几周里,我们忙于帮助开发人员转换HTML5从WebOS和Chromeos到FireFoxOS等平台的应用程序,以及这个操作系统目前所瞄准的目标硬件。因为这些都是慢速手机,我们发现必须做一些调整。原因是在大多数情况下,库使用过时的方法在屏幕上设置动画和定位内容。这些旧的工作方式是支持传统浏览器所必需的,在很多情况下也不需要,因为这些传统浏览器从一开始就看不到应用程序。

在克朗格河上超速行驶

旁白:我将在我在jquery欧洲会议被称为“帮助还是伤害?”.

Tip 1: UseCSS动画/过渡

Instead of using your library's动画()目前,它使用了许多性能不佳的技术(设置超时,上/左定位)使用CSSanimations.实际上在很多情况下转变够了。原因是浏览器为您优化了它们,硬件加速了它们。另一个好处是动画是在CSS其他的外观和感觉,以及一致同意的标准语法。CSS动画可以使用关键帧对效果进行大规模的粒度控制,甚至可以监听动画期间发生的事件。你可以很容易地触发动画CSS随着悬停,聚焦或目标选择器,或者通过动态地向父元素添加和删除类。If you want to create animations on the fly or modify them in JavaScript,詹姆斯·朗为这本书写了一个简单的图书馆CSS-animations.js

技巧2:使用requestAnimationFrame()而不是集间Valk()

——这已经解释很多次了集间Valk()call runs code at an assumed frames per second speed that may or may not be possible.它告诉浏览器渲染结果,即使浏览器当前没有绘制,因为视频硬件不在下一个显示周期中。另一方面,requestAnimationFrame()will wait till the browser is ready and only send your changes when they will result in a visual display.使用RAF的另一个很好的副作用是,当标签处于非活动状态时,动画不会发生——这样,你的应用程序就不需要负责锤击中央处理器/GPU and sucking battery whilst it doesn't do anything for the end user.

技巧3:使用CSStransforms而不是位置:绝对and top/left

同样的原因是硬件加速。CSStransforms using翻译,y)运行在图形处理器whereas positioning absolutely and using top and left hammer the main processor.如果不舍入像素位置,情况会更糟。使用转换也意味着你有一个更大的阿森纳在你的建议。旋转和三维转换只意味着添加到转换字符串中。对于顶部/左侧,您需要自己计算它们,并与景深混淆。保罗爱尔兰有一个深入分析转换()从性能角度来看。In general,however,you have the same benefits you get from usingCSS动画:使用正确的工具进行作业,并将优化留给浏览器。您还可以使用一种易于扩展的方式来定位元素——如果您使用顶部和左侧定位来模拟翻译,则需要大量额外的代码。Another benefit is that the technique is the same in Canvas.

提示4:使事件立即发生

作为老学校,易访问性Web开发人员我们喜欢单击事件,因为它们还具有支持键盘输入的附加好处。但在移动设备上,速度太慢,您应该使用触启touchend相反。原因是这些应用程序没有延迟,使得与应用程序的交互看起来很迟缓。If you test for touch support first,你也不会牺牲无障碍性。英国《金融时报》使用一个名为快速点击为此目的,可供您使用。

小贴士5:尽量保持简单和重复使用

我们发现的一个重大性能问题HTML5应用程序是移动很多DOMelements around makes everything sluggish – especially when they feature lots of gradients and drop shadows.简单化你的外观和感觉,以及在你拖放的时候移动代理元素有很大帮助。

例如,当你有一个长长的元素列表(比如tweets)时,不要全部移动它们,只保留那些在当前屏幕上可见的元素,以及一些在直播前后的元素,并隐藏或删除其他元素。将数据保存在javascript对象中,而不是读/写到DOM表现出巨大的进步。将显示视为数据的表示,而不是数据本身。这并不意味着你不能直接使用HTML作为来源。只需阅读一次,然后滚动10个元素,根据结果列表中的位置更改第一个和最后一个元素的内容,而不是移动100个不可见的元素。The same trick applies in games to sprites – if they aren't in the current screen there is no need to poll them.相反,重新使用从屏幕上滚动下来的元素作为新的元素。

更多阅读:

(包括视频和所有内容)

前进一步,后退两步:应用程序真的是未来吗?

星期二,1月15日,二千零一十三

我尊敬的同事卢克·克劳奇写了一篇有趣的文章,题为包装的HTML5应用程序——我们在模仿失败吗?这与我产生了很好的共鸣。在书中,他描述了在手机上扫描二维码,然后通过Facebook进入餐厅的过程。This right now involves installing a QR code reader,Facebook应用程序和许多中间步骤都不符合餐馆老板的最佳利益,需要用户耐心等待。

软件!

My reservations towards QR codes aside (hey,with核燃料电池,这将是“点击你的手机在这里登记”——你听到了,Apple?) I think Luke points to a much bigger topic here that very much annoys me:我们在拖延,if not moving backwards in the evolution of content delivery.

让我们将用例减少到最低限度:最终用户想要得到一些内容。This could be music,视频,照片,一本书,有指示或游戏的地图。It all is data,如果以正确的格式排列,零和一就构成了我想要的东西。作为数据提供者,我们的工作不应该在消费者实现这一目标的过程中设置太多的障碍——我们的工作应该是让这一切变得简单。

每当人们说“用户想要应用程序”时,他们真正说的是“人们想要的是一种能够尽其所能使用硬件并能够以简单的方式找到它的东西”。不会像一声呼喊那样翻滚、吸吮,但是描述得更好。我记得上网前的日子,当软件在邮件中出现在软盘上并且必须安装时,第三个安装盘出现读/写错误,因此您必须给公司打电话或回到商店去更换。我还记得我必须安装一个工具来切割桌子布局的图像或为我的假期计划路线。我还记得我买游戏时被告知我的电脑不够好——总是用声卡,这并不像它假装的那样“与SoundBlaster兼容”。

现在看来这很荒谬,我们嘲笑这样一个想法:不能只打字,“Hackney,在我们手机或浏览器的搜索框中找到一张地图。然而,当我们说应用程序是一种更好的体验、我们的工作的未来以及人们想要的东西时,我们似乎渴望回到这个世界。

我们所做的就是赞扬应用程序及其简单性,奖励公司锁定用户——比如说,要求真正的SoundBlaster。我们声称应用商店更容易恢复,但是这些公司花了很多钱在电视上宣传他们的应用和游戏,in newspapers and in banner ads on the web.应用商店并不容易。它们不按比例缩放。我等着这一天——这一天很快就会到来——在那里你可以在应用商店买到更好的位置,much like you could in "price comparison web sites" and search results.

如果你把应用商店的模式与网络上发生的事情进行比较,那么应用商店就是雅虎的目录,它被搜索杀死了,而谷歌是最大的创新者。我们意识到,当网络资源列表的格式允许发布者推广其内容并让点击它的人数决定首先显示的内容时,管理和编辑这些资源列表的工作就太多了。

如果你想记住,we already had a failed attempt at app stores.塔库斯下载网站,新生网和其他人也同样尝试过桌面应用程序,现在没有人再关心它们了,它们陷入混乱,成为垃圾邮件发送者的天堂。

现在对应用程序的关注,以及对最终用户来说比网络更好的体验的重复神话,都是基于人为的网络障碍:

  • 应用程序对设备硬件有更多的访问权限
  • 随着硬件的销售,应用商店得到了推广。

对于每个宣称应用商店是分发应用程序的更好方式的人,我建议查看数百个空的应用商店移动服务提供商的设置,或者那些比Android或iPhone更不成功的硬件。荒地里充斥着琐碎的应用程序,价格过高,很快就转换和打包了在其他平台上取得成功的旧标题。

这不是关于用户想要什么——而是关于行业和分销商习惯了什么,不想改变什么。一个打包的应用程序比一个Web应用程序更容易定价,它的发行计划和跟踪也更容易。就像物理CD、DVD和书籍还有相当长的时间要消失,对我来说,这个打包的应用程序是最后一个可以做物理分布的恐龙。

很多事情需要改变,直到我们意识到我们有一种极好的方式来传播被称为互联网的媒体。媒体可以保持新鲜,当我们需要时可以更新,当我们不再需要它时可以丢弃,而不必每次都下载大量的数据。

其中大多数都是基于不灵活的商业模式,并将对分销的完全控制视为赚钱的唯一手段。其中一些是心理上的。A neatly packaged app you need to install and uninstall seems like something more solid than a web app.看起来更值得信赖,同时也会造成更多的伤害。这是“20%以上”的汽水饮料,你永远不会知道你错过了这么多。

我很担心,如果我们现在不站在我们的立场上,指出应用程序是过去的一种分发模式,而不是未来的模式,我们将重复我们过去对应用程序目录所犯的同样错误。Of course you can now list 23123 reasons why apps are better than web apps on mobile devices,但我敢说,你会发现一个不是基于设备或操作系统供应商阻止访问非本机代码功能的代码。我们称赞一种基于锁定的简单分发模型。

The argument you hear betway体育官方网about this is that end users don't care,他们只是想要他们的应用程序。事实上,他们没有被告知其他选择。同样,这都是市场营销——该死的好市场营销,诚然,但我们的最终用户的许多需求来自于看到和想要什么,而不是首先需要它。