几个快速公告!
iPhone/iPod 版屏幕录制
很多人要求这个。我抵制了很长时间,主要是因为我认为在这么小的屏幕上观看它们毫无用处。但我承认,听和大致看可能足够好了,如果你需要回顾某些内容,你总是可以获得更大的版本。iTunes 链接。原始 RSS 链接。
iPhone 界面
只是为了好玩,我重新启用了 CSS-Tricks 的 iPhone 界面。它基于 本教程,并进行了一些更新和改进。它算不上多么漂亮,也不具备全部功能。只是如果你是这样使用 iPhone 的,那么它提供了一种更轻松的阅读内容的方式。
设计语录“API”
我将 API 放在引号中,因为它可能在技术上并不是真正的 API。我编写了一些 JavaScript 代码,从设计语录中提取并显示页面上的随机语录。这个想法是,任何人都可以将脚本插入到任何页面并提取随机语录。你可以 在这里查看测试页面,并查看 这里的 JavaScript 代码。它可以工作……但速度有点慢,而且需要 jQuery。我对这些东西一窍不通,所以如果有人对如何更智能/更快地做到这一点有任何想法,请告诉我!
幸运的是你没有为 iPhone 设置切换按钮。对我来说,如果没有标准版本,这有点烦人。移动网站很糟糕。
嗨,Chris,前几天我尝试了你其中一个 iPhone 版本,我从中获益匪浅。我同意你无法真正分辨屏幕上发生了什么,但它仍然非常有用。干杯!
我认为能够在火车上或其他地方边听边看会很酷。如果你想查看代码,我同意你可能需要一台 PC 或 Mac,但对于设计方面的内容,这将非常有效。
Chris 做得好,感谢你所有的辛勤工作
你为什么首先要为拥有 iPhone 的这么一小部分人担心?你是否也在考虑开发 Symbian 版本(s60 和 UIQ)、WinMo 版本、BlackBerry 版本?它们都拥有更大的用户群。别忘了几个月后发布 Android 版本,好吗?
我并没有生气,即使我听起来像是在生气…… :)
iPhone、P1i 和 Touch HD 的自豪用户。
如果我错了请纠正我,但这不仅仅是针对 iPhone 的。你也可以在 iPod 上使用它们,因此,这个市场非常庞大。
看起来今年圣诞节提前到了!谢谢!
嘿,Chris,
我知道一些关于加快提取语录速度的想法,你可以使用 AJAX 方式从数据库中提取它们。
无论如何,如果你需要一些帮助或想要更多想法,请给我发送电子邮件。
非常感谢,终于我不必强迫自己坐在电脑前观看了。
Chris,你的“API”无法工作,因为安全策略(在大多数浏览器中)限制了 XHR(Ajax)请求,这些请求只能在同一域之间进行。这被称为“同源策略”。有一些方法可以解决这个问题。最常见的一种,尤其是在此类 API 中,是 JSON,或者如果你信任 API,则使用 JSONP(带填充的 JSON)。这是一种非常简单的从其他域收集数据(使用 JavaScript)的方法——另一个域必须具备适当的 API 以提供 JSON 格式的代码。
JSON 代表 JavaScript 对象表示法,这是 JSON
_________________________
{
"fruit1" : {
"type" : "tasty",
"name" : "apple",
"age" : "2 days"
},
"fruit1" : {
"type" : "meh",
"name" : "lime",
"age" : "1 day"
}
}
_________________________
所以,正如你所看到的,它只是一个基本的 JavaScript 对象。API(服务器端)需要生成此格式的内容,以便你可以通过 Ajax 请求它,然后你通常需要将其解析为可用的 JavaScript 对象。
请注意,JSON(顺便说一句,由 Doug Crockford 创建)背后的主要思想是 XML 的更简单替代方案……
我之前提到了 JSONP,它不需要 Ajax。JSONP API 的输出将如下所示
_________________________
functionName({
"fruit1" : {
"type" : "tasty",
"name" : "apple",
"age" : "2 days"
},
"fruit1" : {
"type" : "meh",
"name" : "lime",
"age" : "1 day"
}
});
_________________________
此 JSONP 加载到一个脚本标签中(动态添加到 DOM)。“functionName”通常在请求脚本(生成上述输出的脚本)的查询字符串中的“callback”参数中指定。
jQuery 具有用于检索 JSON 的原生函数,例如
_________________________
$.getJSON('http://your-api-url.com/script.php?json=true&items=10&callback=?', function(data){
alert("The first fruit's name: " + data['fruit1'].name);
});
_________________________
这是一个自定义的(由我制作的)JSON 函数,它执行相同的操作
_________________________
function getJSON(URL,success){
var ud = 'json'+(Math.random()*100).toString().replace(/\./g,'');
window[ud]= function(o){
success&&success(o);
};
document.getElementsByTagName('body')[0].appendChild((function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = URL.replace('callback=?','callback='+ud);
return s;
})());
}
_________________________
所以,正如你所看到的,它所做的就是向 DOM 添加一个脚本标签,其 src 指定为 API URL(作为参数传递给函数)。
嘿,James,感谢你提供的关于 JSON 的精彩速成课程!我稍微尝试了一下,它确实是真正的 API 的正确方法。我非常希望设计语录提供一个真正的 JSON API,但我目前缺乏完成这项任务的技能。该网站正在使用 WordPress 运行。
在我看来,这将是一项定制工作,但这将成为一个非常棒的 WordPress 插件的基础。
网站和屏幕录制的 iPhone 版本!对于一个随时随地抓住机会学习的人来说,任何东西的 iPhone 版本都是一项巨大的财富。感谢圣诞老人!
感谢你制作了屏幕录制的 iPhone 版本。
我在上班的路上观看录制内容,我还会在电脑上再次观看以了解代码细节。
除了你的 JavaScript 方法之外,还有一个非常精简的 PHP 随机语录生成器,我非常喜欢 这里(向下滚动到“PHP 随机文本横幅轮播器”)。
它从一个简单的文本文件中提取语录和任何你想要添加的 HTML。
PHP 最终可能是最佳选择,但我希望它能从数据库中提取数据。WordPress 是后端,它为网站提供了大量其他功能,否则我希望能保留(RSS 提要、归档生成、主页上的随机帖子、未来的可扩展性、轻松的主题等)
iPod 版本……我被迷住了。这就像圣诞礼物中至少有一件是我真正想要的。谢谢圣诞老人 ;-)