必威体育下载基督教Heilmann

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

1月存档,2014

快速破解:Mozilla纪念碑名称查找器

周四,1月30日,2014

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

墨兹莫塔

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

纪念碑名称查找器

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

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

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

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

周一,1月27日,2014

想象,如果你愿意,坐下来喝你的咖啡,打开家里的电脑读今天的报纸。

这个1981年的惊人新闻谈到《旧金山观察家报》和其他报纸的一项实验,他们试图通过大型计算机和电话连接,以数字格式提供内容:

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

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

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

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

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

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

网络濒危物种:图片

周四,1月23日,2014

曾经,网络是一个蓬勃发展的快乐进化的生态系统,美丽的生物。就像任何环境一样,人类迟早会介入,杀死很多东西——主动的或无意的——并减少生态系统的多样性和健康。在本系列中,我们将了解一些构成我们所知的网络的奇怪动物,重新介绍他们,展示你如何做你的部分,以确保他们不会消亡。

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

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

给我看看你的颜色

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

Marc Andreesen提出IMG1993年的标签他这样定义它:

它将一个位图或pixmap文件命名为浏览器试图拉出网络并解释为图像的位图或pixmap文件,在标记出现时嵌入到文本中。

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

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

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


              
              SRC公司=
              “canyon.png”
              >
             

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

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

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

  • 它们未能解决如何包括新媒体类型和未来媒体类型这一更普遍的问题。
  • 小程序元素只与基于Java的小应用程序一起工作。不赞成使用此元素对象
  • 它们带来了可访问性问题。


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

重要的是,这可以扩展到所有的嵌入式媒体,音乐,视频中,applet等等。相反,我们得到了IMG标签,然后我们得到了视频元素,音频元素和iframe元素——每个元素都提供了通用对象元素可以完成的高度定义的子集。

尽管卑微的img的缺点,它有一些神奇的属性可以为你工作:

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

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

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

伤害图像:滥用alt和标题

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

一个很好的例子就是如何使形象快乐XKCD。它们的制造者在alt属性中为图像提供可感知的替代文本,并在标题中添加额外的信息。他们把这个名字叫做"复活节彩蛋"这完全没问题,对他们很有效:

自动化


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

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

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

快乐的刺猬在月光下嬉戏

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

声誉不佳的图像:性能

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

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

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

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

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

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

如何人性化地对待图像

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

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

没那么难,现在是吗?让那些影像舞动,闪耀,我向你挑战!

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

周三,1月22日,2014

身兼Noubarzadeh让我大吃一惊他用样式表作画,请完全创建在Chrome开发工具。它看起来像这样(按比例放大):

csspainting

还身兼录了一段他创作的视频以下内容:

然后,当然,他也让我很难过,如图所示-仅限WebKitCSS前缀。

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

你可以看到修复过程

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

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

瞧,它适用于Chrome,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选择了第一个。这意味着你的链接可能会出现在另一个产品的广告旁边,让潜在的读者感到困惑。我前几天遇到的一个很好的例子是斯科特·汉塞尔曼的你是个骗子吗?的帖子,有了这样的标题,出现在一个广告旁边,上面写着他对他的主机服务的支持。令人困惑的消息,多吗?

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

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

简单,但有效。