必威体育下载基督教Heilmann

您当前正在浏览必威体育下载基督教Heilmann一月的博客必威体育简介档案,2014.

1月存档,2014

快速黑客:Mozilla纪念碑名称查找器

星期四,1月30日,2014

在旧金山Mozilla办公室外面矗立着一座美丽的纪念碑感谢所有与Mozilla合作保持网络开放的人,安全的,诱人又漂亮。

莫桑比克纪念碑

总体而言,这是4536个名字,四边各有两个格子,这意味着你的名字可能很难找到。不烦恼,为Chris More发布了一个数据集,其中包含文档中的名称和位置.使用此数据集和一些CSS三维转变,我现在很高兴为您提供Mozilla纪念碑取名器。

纪念碑名称查找器

你可以看到它是如何工作的在这个视频.

如果你想看到真实的图像,这是另一个使用原始图像的黑客!

再一次,非常感谢所有帮助Mozilla成为现实的人!给你!

伟大的科技史:1981年的电子报纸《数字考官》

周一,1月27日,2014

想象,如果你愿意,坐下来喝早茶,打开家庭电脑阅读今天的报纸。

这个1981年的精彩新闻谈到旧金山考官和其他报纸试图用大型计算机和电话连接以数字格式提供内容的实验:

《连线》杂志详细报道了这颗宝石还有一些有趣的细节。

最让我兴奋的是当时在采访中提到的思想的纯洁性:

这是一个实验,我们正试图弄清楚作为编辑和记者,它对我们意味着什么,对家庭用户意味着什么。我们不是来赚钱的,我们可能不会损失太多,但我们也赚不了多少钱。

当时,报社的工作人员试图联系到两千到三千名家庭电脑用户,然后打印整页的广告,得到了500多名“送优惠券”的用户。

在这里,对我来说,下一个重要的事情是订阅者的反应——一个以每小时5美元的电话费等待两个小时来传送报纸文本内容的人。他非常明白这意味着你可以为自己保留一份论文的副本,你可以只保留你需要的东西,而不必得到所有的东西,并丢弃其中的一部分。

由我们的服务的用户发布、分发和存档的神奇礼物现在又回到了封闭的想法,比如付费墙和应用程序,这难道不是一件憾事吗?

网络濒危物种:图片

星期四,1月23日,2014

曾经,网络是一个蓬勃发展的快乐进化的生态系统,美丽的生物。就像任何环境一样,迟早,人类会介入并杀死许多东西——无论是主动的还是偶然的——并削弱所说生态系统的多样性和健康。在这个系列中,我们将看到一些奇怪的动物组成了我们所知道的网络,重新介绍他们,展示你如何做你的部分,以确保他们不会消亡。

今天,我们看到的是一种非常受欢迎的宠物动物,这种动物通常被对待的方式不是它应该被对待的方式:形象。

贾波特画廊:艺术家基思·多尔斯

给我看看你的颜色

图片是网络流行的原因。自从第一个浏览器开始支持它们,我们的网络对学术圈以外的出版商来说很有趣。向我展示,不要告诉我,而这一切。开始时,事情很清楚:

马克·安德烈森提议IMG1993中的标签他这样定义它:

这将为浏览器命名一个位图或pixmap文件,以尝试通过网络并将其解释为图像,在标记出现时嵌入到文本中。

他还定义了当图像无法加载时应该做什么(还提到了现在非常模糊的图像格式,可以使用):

浏览器应该在支持哪种图像格式方面具有灵活性。XBM和XPM是很好的支持,为例。如果浏览器不能解释给定的格式,它可以做它想做的任何事情(x mosaic将弹出一个默认位图作为占位符)。

简单地说,为了在文档中添加峡谷的图像,您需要执行以下操作:


              
              SRC=
              “峡谷,PNG”
              >
             

这是事情出错的时候:当图像无法加载或显示时会发生什么?显示一个占位符。但是占位符没有意义,正确的?你只告诉最终用户出了问题。而不是图像的意义。

对象元素后来,已经解释了最初想法的一些缺点:

以前版本的 HTML允许作者包括图片(通过 IMG)和小程序(通过 小应用程序)。这些元素有几个限制:

  • 它们未能解决如何包括新媒体类型和未来媒体类型这一更普遍的问题。
  • 小应用程序元素只与基于Java的小应用程序一起工作。此元素已弃用,取而代之的是对象.
  • 它们会造成可访问性问题。


              
              数据=
              “峡谷,PNG” 
              类型=
              “图像/ png”
              >
             这是一个
              
               >
              特写镜头>大峡谷的。>

重要的是,这可以扩展到所有的嵌入式媒体,音乐,视频中,小程序和接下来可能出现的任何东西。相反,我们得到了IMG标签,然后我们得到了视频元素,audio元素和iframe元素——每个元素都提供了通用对象元素可以完成的高度定义的子集。

尽管不起眼的IMG的缺点,它有一些神奇的属性可以为你工作:

  • 中高音–当图像无法显示时提供给用户代理的可选文本,这意味着它不能被加载或者不能被解码
  • longdesc-一个链接文档,以更冗长的方式解释图像所描述的内容。例如,可以对数据和图表数据关系中的发现进行更长的描述。从没听说过那个?加入我们的俱乐部吧!
  • 的名字–用于脚本编写的映像的名称(仅为向后兼容而添加)
  • 高度宽度–要将图像大小调整到一定的大小,或者告诉浏览器大小,而不必从图像元数据中读取大小。
  • usemapISMAP对于客户端图像映射(在我们之前,这是非常流行的CSS可以将元素堆叠在另一个之上)

除此之外,还有标题属性,几乎可以加到任何东西上。

当图像指向外部资源时,它还允许您使用JavaScript做很多事情。您可以通过订阅load事件处理程序来检测它是否已加载,并通过订阅其错误处理程序来响应是否存在问题。这使您能够对正在发生的事情进行非常细致的控制。

伤害图像:滥用alt和标题

当人们因为图片在浏览器中的显示方式而没有按照他们的本意使用图片时,事情就变得奇怪了。alt属性(否,没有alt标签这样的东西)不能得到它应该包含的信息,相反,title属性获取大量信息,因为当用户悬停在元素上时,它是可见的。

一个很好的例子就是如何使形象快乐XKCD.他们的创建者在alt属性中给出了图像敏感的可选文本,并在标题中添加了额外的信息。他们把这个名字叫做“复活节彩蛋”,很好,并且对他们很有效:

自动化


              
              SRC=
              “http://imgs.xkcd.com/comics/automation.png” 
             
标题=“自动”来自“自动”
意思是“自我”,和“交配”,意思是“拧”。 
中高音=“自动化”>

当然,完全可以接近,此图像应该有一个longdesc属性,指向图像消息的文本表示。这也可以是另一种文本,但可能有点长,因为图像中不仅有一个文本要解释,但也有其含意和细微差别。如果需要这样做,您也可以使用FIGCAPTION构建。HTML5医生有一个惊人的细节,但是很容易理解这些帖子.

中高音标题标题应该始终被视为“拥有的好东西”,不能指望最终用户能够访问它。Alt,另一方面,是绝对需要的。如果图像由于某种原因不能显示(这是完全可能的),那么它就是用户得到的结果。在火狐和Chrome中,例如,您只能在浏览器中显示文本,而不是图像:

欢乐的刺猬在月光下嬉戏

对于没有视力的用户来说,可选文本是最重要的,作为屏幕阅读器,他们将宣布文本。如果没有指定可选文本,辅助技术可能会回到读取文件名,这可能是一种既烦恼又徒劳的练习。

声誉不佳的图像:性能

最近的图片名声不好,因为它们被认为是网页性能问题的一个巨大来源。这是真的:在文档中使用的图像越多,越HTTP必须进行协商,加载更多的外部文件,解码并显示。第一个大的解决方案早在2004年就出现了,当Dave Shea创造了这个术语并解释了“图像精灵”背后的技术.Image sprite是一个绝妙的主意,它将页面上的所有图像都放在一个文档中使用单个图像。因此,您只能加载和解码一个图像,并用CSS在所有不同的地方你都需要它。Dave所描述的这种技术的缺点是没有文本回退(没有alt属性),但这是可以弥补的正如我在对原文的评论中所解释的那样使用图像替换技术。

过去(甚至现在)出现的其他问题是,图像在移动设备上使用时效果不佳。手机版的Flickr,例如,以前在DIVs上使用img元素比使用背景图像要慢得多,作为描述在“创造回应”HTML5触摸界面“两年前的对话”.

把图像扔出去,然后移动到CSS

如今,我们可以变魔术CSS.我们真的可以。梯度,阴影、圆角,背景大小,我们所拥有的所有优点使得为我们的设计中纯粹的艺术部分(“屏幕家具”)创造图像完全没有必要,并且给我们更多的灵活性。一个梯度CSS可以清楚地调整到任何元素的大小,一个梯度PNGJPG会冲洗掉或像素掉。

没有参数。然而,最近很多展示都在使用CSS油漆,哪一个,如果只是视觉辅助,完全好了。语义上有价值的图像不应该用这种方式获得而是img,由于前面提到的原因,您可以创建一个文本回退,当出现问题时会显示该回退,甚至当图像无法加载或解码时(使用加载和错误处理程序)也可以做出反应。两者都不可能CSS,你所能做的就是希望一切都好起来。大多数浏览器都可以在您使用的元素中隐藏文本CSS风格,但并不是所有的都能呈现最终的视觉构造,你创建了很多CSS指令。因此,如果出了问题,你只给用户一个文本来理解。

换句话说:虽然创建一个MacBook只使用CSS从一个元素,你不知道它是否显示正确。如果能拥有它是件好事,一切都好。如果那本MacBook是你公司的标志,或者是一张向读者解释信息的图表——坏主意。在CSS使用大量和大量的潜水器和温泉Ns是一种客厅把戏——它在不同的浏览器上都不可靠,向后兼容在语义上也没有任何意义。图像不仅仅是一个视觉结构,它还提供了意义,当图像看不见或显示错误时,您应该提供一种使该意义明显的方法。那些图像HTMLCSS“在不同分辨率上很好地缩放是我们需要在图像格式级别上解决的一个问题(SVG想到了这一点)。这不是我们应该一起滥用的东西HTML为了它的视觉效果。我们停止用表格单元格作画-记住,我们在1像素宽或高的行和列上使用背景颜色来创建边框——我们不应该回到这些日子。

如何人性化地对待图像

我们现在拥有的技术允许我们以惊人的方式使用图像。这取决于你如何明智地使用它:

  • 如果画面纯粹是为了好看,使用一个CSS背景和受益于调整大小和定位选项。如果无法加载图像,请确保使用与文本颜色具有足够对比度的回退背景色。
  • 如果图像是视觉设计的一部分,需要缩放,请考虑使用渐变,圆角和阴影CSS代替。但是要注意,在移动元素或滚动页面时,这些可能是不好的,所以要少使用它们。
  • 如果图像对文档的信息起重要作用,或者表示一个交互元素,比如一个按钮,使用IMG标签。这使得替换文本和错误处理比以前简单得多CSS解决办法。如果你使用img给它一个合理的替代文本,不要省略alt属性或给它一个空属性或[图像]。

不是那么难,现在是吗?让这些图像舞动和闪耀,我谅你不敢!

修正一个webkit-only效果使用崇高的文本

周三,1月22日,2014

身兼Noubarzadeh只是把我吹走了他用样式表作画,完全在chrome devtools中创建。它看起来像这样(按大小缩放):

csspainting

Afra也录了一段他创作的视频

然后,当然,他也让我伤心,如图所示-仅限WebKitCSS前缀。

所以我决定运用我自己的力量,如果不那么令人印象深刻,魔法与为所有现代和未来的浏览器修复它不依赖–webkit–前缀。

你可以看到修复过程

因为崇高的文字充满了敬畏,我要做的就是:

  • 修复未关闭的div元素(如Firefox高亮显示所示HTML语法错误为红色)–搜索/div\n–全部查找,用>和换行符替换\n
  • 选择所有webkit -[^;]+实例
  • 复制他们,粘贴在;
  • 全部替换–webkit–;与+空间

瞧,它适用于铬,Safari和Firefox。当然,我很幸运。由于Afra的原始代码非常干净,我可以写非常简单的regex:)

记住:不要依赖——webkit——它会非常伤害你,很快!

两个简单的联合技巧会出错:有一个形象和不信任iframes

周二,1月21日,2014

写博客很简单,但是很多人都忘记了有很多像我这样的怪胎已经这样做了很长一段时间了RSS还有一些新朋友会在Facebook上分享你的链接,谷歌+和其他社交网络。

野兽男孩-沟通障碍

因此,在你的帖子中做两件事非常重要:

  • 不依赖iframes工作
  • 社交媒体网站有缩略图吗

至于IFRAMES,我的好朋友Jens Grochtdreis今天早上发布关于在Web开发中需要新工作流的内容,通过在speakerdeck(即iframes)上嵌入两个对话来证明他的观点。对我来说,他的帖子看起来像这样:

博客文章嵌入没有显示-我得到的是两个标题有希望的内容

两个标题,没有内容。我在Twitter上报告了这个问题,现在他把标题链接到扬声器面板上的URL。每个人都赢了。

出于安全原因,如果iframe内容混合了http和https,大多数读者都会过滤掉它。在未来我们会遇到越来越多的事情内容安全政策成为一个更大的话题(是的,网络不安全,对,这是我们的工作)。

第二个关于拥有图像的技巧是很好的,但很重要。在你的post -一个真实的图像元素,不是背景图片——意思是Facebook,当有人在这些系统上共享链接时,谷歌+和其他人将在您的博客文章标题旁边显示此图像。如果你不选择缩略图,Facebook选择了第一个。这意味着你的链接可能会出现在另一个产品的广告旁边,让潜在的读者感到困惑。我前几天遇到的一个很好的例子是斯科特·汉塞尔曼的你是个骗子吗?邮政,有这样的头衔,出现在一个广告旁边,上面写着他对他的主机服务的支持。令人困惑的消息,多少?

斯科特·汉塞尔曼在Facebook上分享了一篇错误的缩略图

在我看来,人们点击旁边与上下文相关的图片链接的次数要多得多。因此,提供一个可以让每个人都感觉更好。

简单的,但有效。