We build “teaser” pages for upcoming projects, we collect users’ email addresses and send them invitations. But be careful here, this is your first rollout, i.e. the first impression of your project. How sad would it be if you screw it up?
Back to our topic, you may wanna start with this:
<input type=”email” />
Nice, clean and neat. Then style it.
background-color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.27), 1px 2px 3px rgba(0, 0, 0, 0.443) inset;
color: #888;
border: 1px solid #333;
cursor: text;
padding: 10px;
font: italic 16px Georgia;
width: 280px;
display: inline-block;
Wait, did we mention it’s a input form for E-mail addresses?
<input type=”email” name=”email” />
This is tricky. When the “name” of elements are the same and the “autocomplete” is enabled, as you type, the browser will show “auto complete” results, hence we got your idiomatic Email address(es).
Wait, assume you have a unconventional name/username, like me, “disinfeqt”. Our browser made a difficult decision, then a ugly, red wavy line appears at the bottom of your Email address. You will thank me for this:
<input type=”email” name=”email” spellcheck=”false” />
Then you begin to think about some hints:
<input type=”email” name=”email” spellcheck=”false” placeholder=”yourname@example.com” />
The “placeholder” works dramatically in Webkit browsers, like Safari and Chrome, but does nothing in Firefox.
Last trick for our input form, try to disable this input form after submitting user’s Email, with jQuery:
$(“input[type=email]”).attr(“disabled”,”true”);
Isn’t this fun?
Update: I forget one last trick, add ime-mode: disabled; into your stylesheet, specific optimization for non-English users.
用了一周的琐碎时间把旧版的虾米移动版 http://m.xiami.com 改造成现在这个样子。
Bulit w/ jQuery 1.4.4, jQuery Mobile 1.0a2, HTML5 (data-attr), CSS3.
现在还只是测试版，只实现了基本的功能，样式还没调整，所以遇到莫名其妙的东西请不要惊讶。
Update: 本来想放链接，想想还是算了吧。
似乎有人说过挺喜欢这个博客的主题？ :D 于是我把它发到 Tumblr 的主题库里了，然后在这里大致介绍一下：
- 可自定义的网站 Slogan 和 Twitter Username
- 为多帐号博客优化（每个作者都显示独立的头像）
- 支持新建独立页面
- 集成发送到 Twitter 和 Facebook Like
- 去除评论系统和恼人的 Notes
- 为中国用户优化，在首页隐藏需要代理访问的内容（你应该懂的）
- 使用 Google Web Font
- 内置代码高亮器（使用方法请见 SHJS 文档）
- 不兼容 IE
设置选项请见 Customize -> Appearance
Enjoy :)
Shading Theme http://www.tumblr.com/theme/14530
我是一个深度 CMS 用户。从 2005 年起，我开始折腾 WordPress。大概 07 年，我开始写独立博客，又过了两年，由于学业事业等等因素，停止了内容供给，转向网页和交互设计。
我不想再对 WordPress 评论什么，它是一个已经被我遗忘的东西，我只想谈谈 CMS。
对一个作者来说，CMS 是他的平台，从使用的意义上讲，就是必须先把 CMS 这个平台搭建起来，然后再用内容去把网站充实起来。你需要一个 PHP 或者什么主机，一个 CMS 程序，一个默认的主题，然后就是无尽地修改主题，安装插件来扩展功能。网站的外观取决于主题，而后台的编辑和管理则依赖于 CMS 本身。对于普通的供稿者，似乎一切看上去都是天经地义的。
但是，如果把问题反过来，那将是一个劫难。
试想，你是一个网页设计师和前端开发者，你可以随心所欲地在 PS 恣意发挥你的灵感创意，天马行空也没有人会怪你。但是，当你把 PSD 辛辛苦苦地切成 HTML+CSS，准备把它做成一个 WordPress 主题的时候，你面对的不再是美好，不再是创意，不再是灵动的色彩和优雅的 CSS，这里只有狰狞丑陋的 PHP 语法和 WordPress 的荆棘般的 hooks。
当然，这些对于一个 WordPress Theme Developer 来说，连“问题”都算不上，也许你认为：啊，CMS 本该如此，它用它自己的架构方式帮我整理内容、展现网页，我的设计必须要跟它的默认架构靠拢；嘿，它已经有一个 entry-content 的 class 了，可以直接拿来用，多好！
你有没有想过打造最 fit 你自己的 CMS？
也许你喜欢把你的设计直接变成 CMS？也许你需要“动态”的内容只有一小块而已？也许你只是需要一个展示网页，却不得不为了迁就 WordPress 去把本身静态的内容“动态化”？
欢迎来到新一代（或者说：真正属于网页设计师）的 CMS 世界。
我拿一个功能最简单的 Pulse CMS 来介绍：
它只有几百K，它不依赖数据库（What!），甚至它不需要放在你网站的 root 下（WTF!），它却能为你提供动态（此处为“可编辑”之意）的内容。
拿我的网站 http://www.zdxia.com 做例子，在几天之前，它其实只是一个静态的 html 文件，默认的 url rewrite 规则掩盖了这个事实；页面上的所谓动态内容，不过是我每次用 Cyberduck 编辑的。
再详尽一些，来看看源码：
<p class="reco">
<a href="http://j.mp/dssync" target="_blank" onclick="Observerapp.incrementEvent('d391c003');">
<strong title="Try it now!">SugarSync</strong> - The best way to synchronize all your files, for free.</a>
</p>
嗯，这就是可笑的“动态”部分，让我们用10分钟把它真正动态化。
- 下载 Pulse CMS 请注意，Pulse 有两种版本，如果你需要更高级的功能（比如用 Pulse 做为博客系统），请购买 Pro 版；
- 把 Pulse 上传到你的服务器，需要提醒的是，请不要把 Pulse 放到你的根文件夹，它的作用是“生成”内容，而不是“展现”内容，这是它跟 WordPress 的最大区别；
- 在 includes/config.php 修改你的登录密码；
- 访问 Pulse 地址，比如 www.zdxia.com/pulse ；
- 新建一个 Block
- 添加完成后，返回上图中的 Blocks 页面，点击你刚添加的 Block，进入编辑界面；
- 接下来，我们把上面提到过的源代码粘贴到这个 block 中，注意：请使用“源码”模式
- 点击保存，把视线转移到底部的 Embed Code，复制里面形如 <?php include(“/var/www/wtf/pulse/blocks/reco.html”); ?> 的内容；
- 打开你的首页文件，如果它只是一个 html 文件，请把后缀名改为 php；
- 用步骤 8 里的代码替换掉原本是静态的代码。
访问一下，嗯？
如果你在寻求更强大的实现，请购买 Pulse Pro 或参考 CMS, Blog and Beyond 一文。
如果有疑问，请在 Twitter 上询问我：@disinfeqt
