必威体育下载克里斯蒂安·海尔曼

贴有“HTML5”标签的帖子

数据属性Rock–正如CSS和JavaScript所知

星期三,10月10日,二千零一十二

目前,我的另一半kasia正在编写一个javascript培训课程,想用一个游戏来解释javascript的概念。所以我们坐下来,做了一个简单的游戏例子,而她正在为课程的结构而烦恼。因为她想解释如何与DOM在javascript中而不是使用画布,我们使用CSS动画和简单的键盘控件。在适当的时候更多的比赛,但我们发现,这是一个非常有用的东西,在野外并没有真正充分利用——数据属性的相互作用,CSS以及不断变化的状态。

定义播放器元素

我们想让游戏更容易破解,玩的人HTML可以改变它。这更像是我的一个请求,因为Mozilla有WebMaker项目,在11月的MozFest上会有很多游戏黑客。

为了定义一个player元素,我的语义fan会这样做:


              
              身份证件=
              “玩家”
              >
             
	
              
               >
              
		
              
              =
              “姓名”
              >
             >
		
              
              =
              “得分”
              >
             一百>
	>
>
  • 一百

这在以下方面是有意义的HTML,而且容易接近,也是。然而,在用javascript访问时,这很烦人,因为你需要三个元素匹配。另外,在维护方面,它意味着三个要素。在JS中,您需要执行以下操作:

var运动员=文件。查询选择器“玩家”名称=文件。查询选择器“玩家”分数=文件。查询选择器'玩家.得分'

为了改变分数值,你需要改变内层HTML分数参考。

分数。内层HTML = 

旁白:是的,我知道有很多HTML模板化解决方案,我确信有几十个jquery解决方案,但让我们继续使用普通的JS,因为这是关于教学的。

HTML5玩家元素

与其经历这些痛苦,我们发现使用数据属性要容易得多:


              
              身份证件=
              “DATAPER” 
              数据名=
              “乔” 
              数据评分=
              “100”
              >
             
>

最聪明的是HTML5已经给了我们一个美国石油学会要更改此数据:

var运动员=文件。查询选择器“数据播放器”//读警觉的得分: +玩家。数据集.分数警觉的名称: +玩家。数据集.名称//写玩家。数据集.分数 = /再次阅读警觉的得分: +玩家。数据集.分数

重新使用属性值

使用数据属性的另一个好处是CSS得到它们。例如,当分数值达到10时,您希望以红色显示分数值的颜色。在第一HTML使用一个列表,您需要在javascript中进行测试,并添加一个类来进行不同的显示。当然,你也可以直接用款式系列改变颜色,但这在维护方面是很糟糕的。它可以在渲染中引起反射,也意味着要向维护人员解释另一件事。

功能改变核心纽马克 {
	如果 纽马克= =  {分数。分类表.添加“低”
	} 其他的 {分数。分类表.去除“低”
	}
}

玩家  {
	颜色 αC00
}

旁白:jquery包含(“foo”)以将元素与其选择器引擎中节点内容中的文本匹配,但它已被弃用为CSS标准,所以这不是解决问题的方法。

当使用数据属性时,您不需要它–您只需要在CSS

数据播放器[数据评分=“10”] {
	颜色 αC00
}

要显示分数,可以使用生成的内容CSS

数据播放器::之后 {
	内容 阿特尔数据名
	位置 绝对的 
	左边 -50PX
}
数据播放器::之前 {
	不透明性 
	内容 阿特尔数据评分
	位置 绝对的 
	左边 100px
}

查看以下小提琴以查看所有动作:http://jsfiddle.net/codepo8/bmy6h/

我能想到的唯一缺点是,只有Firefox允许在生成的内容上进行转换和动画。总之,我们发现数据属性非常有用。

评论?这是螺纹谷歌+脸谱网.

HTML5和网络的未来——Dr.Seuss风格

星期五,7月6日,二千零一十二

更新:现在有提供视频(屏幕广播)和谈话音频在Mozilla的博客上。

我现在在巴塞罗那的Webvisions活动,西班牙明天我将要讲一讲“HTML5和网络的未来”。为了使事情更有趣一点,就像我喜欢看一样劳拉斯在飞机上看到很多参加会议的人都是父母,我想这将是一个很好的计划,写我的整个幻灯片甲板博士塞斯韵。这可能会非常顺利,或者惨败,但你必须抓住机会。

谈话(加上几张幻灯片)是在Slideshare上提供,作为一个PDF关于Dropbox作为一个风格的HTMLGitHub上的版本.也感谢谢博德为了一些押韵的帮助。

够了,我们开始:

  1. 有一个大的网站在那里,
    它的巨大的我告诉你,
    它跨越了全世界
    但是很无聊而且蓝色
  2. 然后改变来了,
    形状为狐狸
    这是狡猾的打开
    它把所有的锁都弄坏了。
  3. 其他出现了,
    并加入了好战
    歌手,安冒险家
    和A闪亮的新骑士.
  4. 这些都玩过了在一起
    说同样的话
    它带回来了老玩家
    加入他们在歌曲中。
  5. 标准被设定,
    而且它改变少许东西
    更丰富的网络对于应用程序
    承诺它带来了。
  6. 呸,标准!谁需要他们?
    一些浮华的有人说,
    直到一个电话那是聪明的
    踢他们外面的它的床。
  7. 我们过去了标准,
    随着网络工作越来越丰富,
    所以HTML5和朋友们
    画得好多了 .
  8. 事物是乐趣
    应该是闪亮的凉爽的
    这就是为什么新标准
    带来许多新工具.
  9. 听力
    是人们喜欢做的事。
    使用 很简单,
    你可以做到,也是。
  10. 他们两个都是网络本土化
    这就是为什么鼓掌.
    他们可以交互作用其他内容,
    爆米花爆米花使这成为按扣.
  11. 如果跳动频率
    你需要玩什么,
    检查网络音频美国石油学会-
    它给你的只是这个——甚至今天.
  12. 玩得好带电池,
    使用请求动画帧()
    别让它阻止你
    它有这么长的名字.
  13. 三维图形惊险的
    作为游戏玩家会告诉,
    我们现在在网上有了
    它被称为WebGL.
  14. 水去到处你倒出来,
    只要问问克里斯他的MacBookAir:
    中型水厂让你像液体一样
    回应而不是绝望。
  15. 自然运动是光滑的
    只是打开你的眼睛。
    CSS动画变换过渡
    你可以模仿这个-美好的
  16. “网络意味着你需要在线”
    我听到聪明的人幸灾乐祸的,
    好,我们有离线存储
    所以——穿上你的外套.
  17. 得到一个凸轮还有一些朋友
    你想不想闲聊
    韦伯特就是你需要
    即使到炫耀你的猫.
  18. 有时押韵不来容易的
    正如你刚刚意识到的。
    所以让我们继续前进吧迅速地
    这只是承受不了太多.
  19. 艺术家需要一个
    HTML5给我们这个。
    读,写入和转换像素,
    所有在客户中,太疯狂了!
  20. “我们没有丰富的元素!”
    很多人抱怨
    使用Web组件具有X标签
    创造它们——容易的维持。
  21. 密码坚韧,
    它是容易的看,
    所以允许登录具有电子邮件
    使用褐色的.
  22. 这个网状物是一个混乱
    具有第三方按钮比比皆是。
    网络意图制造它们无意义的
    让我们没有它们周围。
  23. 按设计HTML5是宽恕的
    它的语法分析器伟大的.
    它不想破坏网络,
    所以我们不要弄坏它代替它。
  24. 当然可以写些奇怪的东西
    而且他们工作-有毫无疑问.
    但是它们会是吗其他人可读
    这就是它关于.
  25. 你不是为你自己
    或者你的朋友谁是相同的.
    发展对于下一个家伙
    所以确保你不会责备.
  26. 不要跳在河中,
    如果你不知道深度.
    在网上使用现代主义
    应该是你的第一步骤。
  27. 给予新材料新球员
    并用它来增强.
    不要支持当它不是需要
    IE6-它不能跳舞
  28. 用一个供应商前缀浏览器告诉你
    “这还没准备好”.
    所以无论如何,给他们一个机会,
    但是不要期望走稳.
  29. 还有那些前缀消失
    你不能忘记!
    以A结尾无前缀的版本,
    这是你最好的选择。
  30. 所以我们要求你帮助我们
    建立一个网站那将最后的.
    未来友好展望未来,
    停止建筑过去的.
  31. 万维网在手机上,
    平板,计算机,电视。
    我们必须向前移动.
    否则我们的存在就会停止。
  32. 硬件锁上
    我们的目的,
    所以退房火狐操作系统
    如果你喜欢网络,你会喜欢的-毫无疑问.
  33. 最后但最少的,
    如果你发现什么错误的
    拜托文件错误告诉我们,
    事情就是这样完成的。
  34. 所以你有很多事情要做
    退房分享.
    我们真正地想让你这么做,
    来吧,让我们看看你照顾.
  35. 除非像你这样的人
    关心一整个可怕的命运
    没有什么会好起来的。
    不是这样。
  36. 所以做得好读和听,
    长篇大论
    我们今天只有这些时间,
    再见,谢谢!

网络是纽约MDN Hackday的平台-演示

星期日,3月25日,二千零一十二

昨天我们去了新劳动城市对于多媒体数字网骇客日我开始一天的谈话HTML5,它为开发人员带来的机会以及人们在白天可以玩什么。

这个幻灯片可用我录下了一个我展示它们的画面。电影放映是YouTube上提供或在各种HTML5兼容格式位于维迪利(嵌入以下内容):

如果你想要一个只有音频的版本,你可以在archive.org上找到那个或在这里:

下面是我在演讲中要介绍的内容:

该登机了,有关多媒体数字网工作周和黑客日很快就会出现在Mozilla的博客上。

HTML5画布中的Web

星期二,2月21日,二千零一十二

每当有一个开放的论坛要讨论时HTML5,你会得到非常有趣的问题。有时你也会得到你只是掌心的。其中一个是昨天在Facebook上,有人想要一个“简单的网络”HTML5“。当我无聊地看着《西斯的复仇》时,我想我还是试试看。所以,给你-一个简单的网络HTML5帆布.

怎么做到的?其实很简单,我只定义了画布中的一段网页:

varC=文件。创建元素 画布 CX=C.获取上下文 “2D” = 文件。身体.附属儿童CC.宽度 =C.高度 = 四百CX。线宽 = CX。翻译 二百 二百 CX。移动到   CX。莱因托 -三十 -二百 CX。用贝塞尔曲线绘制图形  -一百七十 三十 -二百 CX。莱因托   CX。移动到 -二十五 -一百六十 CX。用贝塞尔曲线绘制图形  -一百四十 二十五 -一百六十 CX。移动到 -十八 -一百二十 CX。用贝塞尔曲线绘制图形  -一百 十八 -一百二十 CX。移动到 -十二 -八十 CX。用贝塞尔曲线绘制图形  -六十 十二 -八十 CX。移动到 - -四十 CX。用贝塞尔曲线绘制图形  -三十  -四十 CX。

我将画布的上下文转换为400×400像素画布的中心,并开始绘制线条。我画了一行从200/200(现在翻译时是0/0)到-30/200(左上角)。然后,我在段(30,-200)的右上角绘制一条二次曲线,曲线点位于两者之间。然后,我将画布“铅笔”移动到左侧的其他点,并绘制二次曲线到它们的对应点。所有这些我都设定了尝试和错误-我确信有一个聪明的算法可以做到这一点,但这是可行的。

为了达到网络效果,我所要做的就是在绘制每个部分之前旋转画布。我在每次迭代中将角度增加了18度,并以弧度旋转画布:

varC=文件。创建元素 画布 CX=C.获取上下文 “2D” = 文件。身体.附属儿童CC.宽度 =C.高度 = 四百CX。线宽 = CX。翻译 二百 二百 
对于 = <= 三百六十+= 十八  {CX。节约CX。旋转* 数学.圆周率/一百八十 CX。移动到   CX。莱因托 -三十 -二百 CX。用贝塞尔曲线绘制图形  -一百七十 三十 -二百 CX。莱因托   CX。移动到 -二十五 -一百六十 CX。用贝塞尔曲线绘制图形  -一百四十 二十五 -一百六十 CX。移动到 -十八 -一百二十 CX。用贝塞尔曲线绘制图形  -一百 十八 -一百二十 CX。移动到 -十二 -八十 CX。用贝塞尔曲线绘制图形  -六十 十二 -八十 CX。移动到 - -四十 CX。用贝塞尔曲线绘制图形  -二十  -四十 CX。恢复
}CX。

就是这样——一个网络HTML5帆布。

新闻网站启用视频:重新布线

星期四,2月2日,二千零一十二

明天我将在微软伦敦制作IE10支持类列表说话新闻:重新连线–有关开放式网络视频主题的动态媒体以及您可以使用它做什么。为此,我有10分钟的时间,然后在小组中回答问题。

更新:这个音频现在可以在archive.org上找到

幻灯片——就其价值而言——正在播放幻灯片

启用Web的视频

下面是幻灯片中使用的注释和我将向观众讲述的故事,以及供您尝试的所有链接:

启用Web的视频

今天我有几分钟的时间和你谈谈在线视频,以及为什么它是记者们的一个极好的机会。

视频正在播放…

毫无疑问,视频是一种非常吸引人的信息格式,新闻,娱乐——嗯,真的吗?视频比文本更容易解释复杂的主题,因为人们可以看到和重复你所做的。你可以展示而不只是告诉或希望人们读你辛勤写的东西。

视频也很难编辑和更改

视频的一个问题是它比文本更难维护。编辑一个视频需要更多的技术专家技能,而且比写一篇文本或在一篇文章中更改某些内容花费的时间更长。比如说你在一篇很容易改正的博客文章中错了一个数字。在视频中,这意味着重新编辑,最坏的情况是重新拍摄。对于网络,它还意味着重新编码视频,使其符合网络消费的格式,并将其重新上传到需要的服务器。

视频也是网络上的黑洞

另一件大事是,虽然你的视频引人入胜,令人惊叹——对于网络上的搜索机器人来说,它们实际上一无所有。视频内容没有索引,其中的信息不允许人们找到它。

那怎么办呢?

我们生活在一个视频必须以固定的方式制作的时代,这似乎是一个相当古老的时代。有名字,标签,地图叠加,视频中的其他视频、图像和附加内容。这不仅意味着这些东西不能更新,但在很多情况下,当涉及到在线视频时,也意味着视频的整体质量会阻碍其质量。

分离使事情更容易维持

在网络上,我们早就知道,通过将关注点彼此分离,我们可以提供更好的结果。事物的外观是在别处定义和维护的,而不是它们本身。文字是没有任何设计的,设计是在网站模板或产品的整体外观中定义的。这样就可以方便地在多个位置和格式中重用文本,包括移动和桌面需求,甚至可以作为订阅源中的新闻订阅。

分离使任何人都能增强

好吧,这将进入“数据嬉皮士领域”,但是如果你分开你的内容,让你的视频可用,然后,任何人都可以帮助提高它的质量,并提供标题的示例翻译。为此,有一个简单的接口通用字幕可用。

分离增加了可接近性和发现能力

字幕和字幕是一个很好的例子,使视频内容更容易提供给人们。不仅是听力障碍,还有任何人。例如,你可以在健身房或酒吧里进行辩论,而无需倾听。另一个重要的问题是,视频的抄本可以让谷歌和必应搜索到。而且,如果定时,它允许人们立即跳到视频的某个部分。

HTML5视频允许所有这些!

HTML5视频是网络互动视频的一个进步。它的开放性使我们能够用它进行创新,将视频内容编织到网络中,就像我们过去对文本和图像所做的那样。不需要有插件,无需为在Web上提供快速加载和高质量格式的视频支付许可证。通过使用开放格式,您可以使您的视频成为我们称之为万维网不一会儿。

只是另一个页面元素

HTML5,多媒体只是我可以添加到设计中的另一个页面元素。你可以让它部分地互动,你只能展示其中的一部分,你可以随心所欲地旋转和设置样式。例如,我一直讨厌《星球大战》中的第二个太阳向我们展示塔图因不在地球上。在这个演示我现在可以把太阳拖走了。

时间戳是胶水

主要的诀窍是我可以完全控制视频HTML5我可以根据视频播放的时间做出不同的反应。我还有很多其他可以监控和反应的东西,展示在这里并使用HTML5画布我甚至可以在播放时更改视频本身。

接入实时网络

所有这些都允许我们有一个视频,并从网络上获取信息与之混合。来自Twitter的实时更新,其他视频,来自其他来源的照片和评论——所有这些都可以很容易地使用,因为我们在网络上使用视频,而不是将已经完成的视频放到网络上消费。这个埃及18天互动演示例如,演示如何在1月28日胡斯尼·穆巴拉克的演讲中添加各种实时的网络信息。

向后倾斜,放松,拿些爆米花

好消息是,Mozilla——为改善网络而非营利组织——正在使您更容易通过我们的爆米花项目。爆米花是一个javascript库和工具,用于将Web内容添加到视频中,并在Web上重新分发最终产品。

一些快速演示

已经用爆米花做了一些很酷的东西:

  • 第一百万座塔是加拿大国家电影委员会在世界各地探索“垂直生活”的独特多项目纪录片。
  • 这些街道的历史是一部关于黑豹党历史的音频纪录片,通过谷歌地图进行了增强,图像和其他多媒体
  • 水牛被杀黄昏是“吸血鬼杀手巴菲”和“暮光之城”的混合,以弹出式视频的方式提供信息。

爆米花及其制造商

我们现在需要你帮助我们,让像你这样的人更容易接受在线视频的互动性。为此,如前所述,我们创建了popcorn.js,但我们也制作了一个工具,可以让你在界面上创建视频。它叫爆米花机,我们想让你踢它的轮胎,告诉我们什么是失踪,什么可以做得更好。