ProjeKt D.K » web-developement http://blog.punkid.org Where We ROT! Sun, 04 Jul 2010 07:51:43 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Going Mobile II http://blog.punkid.org/2010/03/03/going-mobile-two/ http://blog.punkid.org/2010/03/03/going-mobile-two/#comments Wed, 03 Mar 2010 10:10:22 +0000 punkid http://blog.punkid.org/?p=349 还是讨论mobile web design的话题，对之前的Going Mobile做些补充和修正。因为我的blog模板是完全用HTML5重写的，所有不支持HTML5以及CSS的移动设备浏览器全部忽略，我指的是此文只针对iPhone Safari，Google Android Chrome Lite以及Opera Mini/Mobile这些Modern Browsers。

善用@Media规则

Opera Mini/Mobile, Chrome Lite, iPhone Safari都支持@media规则，所以下面这行代码基本上就能搞定这些主流的移动设备浏览器了。

@import url(css/handheld.css) only screen and (max-device-width:480px)

如果你希望为iPhone Safari/Chrome Lite添加独立的样式表的话，加上-webkit prefix就可以了。

@import url(css/handheld_iphone.css) only screen and (-webkit-max-device-width:480px)

Viewport的重要性

由于Opera Mobile的默认screen width是850px，而iPhone Safari则是980px。如果你跟我一样，不设定body的宽度，而是让它自适应屏幕宽度的话，你会发现在移动浏览器上你的网页宽度可能远远超过了480px。添加viewport的META到HTML head里能有效避免这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

通过width=device-width将网页默认宽度设置为设备屏幕尺寸。

Float and Fixed Positioning

float能不用尽量不用，但不等于说float就不能用，至少iPhone Safari，Chrome Lite以及Opera Mini/Mobile对浮动的处理都是很准确的。

真正需要避免的是fixed定位，一是浪费了原本就不大的屏幕空间，二是滚动页面时容易导致花屏。

使用Max-Width

如果你的图片动辄500px的宽度，在移动设备的浏览器上显示肯定会溢出屏幕，最好的办法是给img加上max-width属性:

img {max-width:100%; height:auto;}

充分利用好HTML5 input

HTML5为input加入了很多激动人心的新属性，包括新的type，placeholder以及autofocus。

新的Input类别

新加入的input type包括email, url, search…使用这些type准确定义你的输入框，不仅让代码更语义化，而且在iPhone Safari上也能获得更大的输入便捷。

例如，如果你的input定义为email type:

<input type="email">

在iPhone Safari上点击输入框，弹出的虚拟键盘是这样的:

input-type-email

图片来自Dive into HTML5: A Form of Madness

最下面的一排按钮包括了email地址常用的@, .符号。

而如果你的input定义为url type的话:

<input type="url">

在iPhone Safari上弹出的虚拟键盘则自动包括了常用的.，/，.com符号。

input-type-email

图片来自Dive into HTML5: A Form of Madness

长摁.com的话还能在com, org, net中切换，不得不赞叹Apple的工程师对iPhone的细节把握，可惜的是Google Android就没这么聪明了。

Placeholder属性

placeholder这个新加入的属性可以在input中加入提示性文字，当点击input时该提示性文字则自动隐藏。以往这样的功能是需要依赖于javascript才能实现的。

input-attr-placeholder

如上图，加入以下代码，在输入框内会出现(Required, will not be published)的提示性文字。

<input type="email" id="email" value="" placeholder="(Required, will not be published)" required />

经测试，iPhone Safari和Chrome Lite都支持该属性。

Autofocus

另一个新增加的input是autofocus，目的是在页面加载完后自动聚焦到指定输入框内，这个效果经常在网页账号登陆页面上使用，例如Gmail, WordPress的登陆页面等等。同样，iPhone Safari，Chrome Lite以及Opera Mobile都支持它。

<input id="login" autofocus>

No Font-Face

font-face虽然在iPhone Safari，Chrome Lite以及Opera Mobile下都支持，但是以我的blog为例，即使开启了gzip压缩，一个Graublau Web字体还是有38kb。最好还是为移动样式表重新定义下font-family，去掉自定义字体。

Related posts

]]> http://blog.punkid.org/2010/03/03/going-mobile-two/feed/ 0 Going Mobile http://blog.punkid.org/2009/08/25/going-mobile/ http://blog.punkid.org/2009/08/25/going-mobile/#comments Tue, 25 Aug 2009 08:59:36 +0000 punkid http://blog.punkid.org/?p=328 还是接着上回的话题吧，感谢leafduo和Lushnis两位很有手机品味的朋友的测试 :D

为什么做这个测试呢？我自己现在绝大部分时间都是在用手机上网，所以自然而然对我的blog进行mobile化改造很必要了。我的Nokia E71上用的是Opera Mini浏览器，它有两个优点，一是对标准（HTML5, CSS）的支持，二是页面经Opera服务器中转压缩处理，省流量。Nokia S60自带的基于webkit的浏览器我也试过，但是既不能解读handheld也不能处理高级点的Media Queries，所以基本上如果单纯从CSS, HTML下手，没法把它从众多桌面浏览器中区分开来，为它设立一个格外的mobile stylesheet。iPhone Safari我也把玩过几次，它对页面的渲染相当好，几乎不需要我格外去设立一个stylesheet了。其他的掌上设备浏览器还包括Android Chrome Lite，Netfront，UCweb等，我都没测试过。

针对各主流手机浏览器设立独立的样式表

因为目前主流的手机屏幕宽度像素都在320px以内，为了让我更好的用E71浏览我自己的blog，我为320宽度屏幕设立了一个独立的样式，把整个容器的宽度都调整到320px，字号也调小到相对大小1.3em。

@import url(css/handheld_320.css.php) handheld;
@import url(css/handheld_320.css.php) only screen and (max-device-width:470px);

前面一行是为了target那些支持handheld Media的手机浏览器，后者因为Opera，Safari和Chrome都支持高级的Media Queries，我把最大允许设备屏幕宽度设为470px，这样就能保证在用iPhone/iTouch, HTC G1/G2/Hero以及Nokia的Opera Mini上都能启用handheld_320.css样式表，不用进行水平滚动了。

现在，iPhone， HTC Android，M8都支持横屏模式了，以iPhone为例，横屏时浏览器的窗口宽度是480px，启用handheld_320.css的话未免太浪费水平空间了。所以有必要再对这类横屏模式启用另一个基于480px宽度的stylesheet，我于是再编写了一个handheld_480.css的CSS。

在一个理想的世界中，如果iPhone Safari，Android Chrome Lite这些浏览器支持更进阶的Media Queries的话，直接使用:

@import url(css/handheld_480.css.php) only screen and (max-device-width:480px) and (orientation:landscape);

就能保证iPhone Safari，Android Chrome Lite直接启用handheld_480.css了，然而现实是这两款浏览器都不支持orientation，Opera也不例外。所以我只能采取笨一点的方式，将480px宽度的设备默认为iPhone, Android, M8的横屏模式。所以target他们的代码妥协为:

@import url(css/handheld_480.css.php) only screen and (device-width:480px);

注意，如果同时引入了针对320px和480px宽度的mobile样式的话，针对320px设备的max-device-width一定要小于480px，否则对于iPhone, Android, M8这类横屏设备，handheld_320.css, handheld_480.css会同时启用。

不幸的是，这招在iPhone Safari和M8 Opera上都无效，Android上尚未实验。按理说iPhone Safari和Android Chrome Lite是支持device-width media query的，为何不起作用，不解ing…

另外，由于iPhone Safari会默认启用自动缩放功能，以保证整个页面在可视域范围内。既然我们已经有了handheld_320.css和handheld_480.css样式表，就没必要让它自动缩放了。在<head>里加入这一句HTML代码:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

这样iPhone Safari的初始化缩放为1（即不缩放），允许的最大缩放倍数为2。

关于移动样式表的一些CSS Tips

调整好字号，字体，我的blog默认启用的是1.6em的大号字体，在小屏幕上看实在有点挥霍空间了，有必要调小几号，我一直都是em字号方式的拥护者，为什么？见Effective Style with em。

页面一定要留白，虽然屏幕有320px，480px的宽度，实际上我能用到的可能就300px，460px，为了更好的阅读，页面上下左右各补白10px是有必要的。我直接在父容器wrapper里定义:#wrapper {padding:10px;}就是了。

减少不必要的空白，桌面浏览可以大胆的增加whitespace，这样看起来更舒适，但是移动设备不一样，过多的使用翻页，滚动条会加速手机的磨损，所以我在做mobile样式处理时，尽量减少过多的空白。

注意浮动和右对齐，float这个属性一定要注意，特别容易在小屏幕上发生溢出现象，所以能不用float就尽量不用，用的话也得算好容器宽度够不够用，text-align:right更得注意了，在320px以及更小的屏幕上，为了看到水平居右的文字还得拖动水平滚动条是件多么费功夫的事。我在handheld_320.css中几乎把所有右对齐的文字都调整为左对齐了。当然，handheld_480.css我没这么干，大屏幕不用怕 :D

注意不要溢出父容器的box-model，我在桌面样式上使用了负的margin把文章小标题移到文章一侧，形成marginal aside的样式。

.entry h4 {float:left;width:200px;margin-left:-200px;}

但是移动样式上，我回归到常规的标题模式：

.entry h4 {float:none;margin-left:0;width:100%;}

清除浮动和margin，宽度重新设置为100%，这样就不会出现水平滚动条拉动的现象了。

减少不必要的图片和节点，手机流量费贵啊，3G更贵，除非有wifi，不然sina, pconline这种我从不用手机浏览。所以，没必要的背景图片，修饰图标尽量都给去掉，至于jQuery这类花哨的特效，ajax技术，至少我的Opera Mini用不了，加载了也白费，浪费流量。

Accessibility是个很大的问题，你用电脑能点的到的我用手机未必点击的到，所以保持代码的语义化，精简化，标准化很重要，多拿手机测试下就知道哪有问题了。

End

最后，欢迎各位多用你们的爱机浏览我的blog，iPhone/Android/Palm Pre这类设备咱没钱买，没法完完全全保证我的blog能在这些设备上有好的浏览体验，多多指正，指出问题及解决方案最好。

都09年了，赶紧上移动设备，用mobile技术驱动你的网站吧（如果你也希望我多浏览浏览你的网站的话）。

Related posts

]]> http://blog.punkid.org/2009/08/25/going-mobile/feed/ 0 Going HTML5 http://blog.punkid.org/2009/08/16/going-html5/ http://blog.punkid.org/2009/08/16/going-html5/#comments Sun, 16 Aug 2009 09:02:48 +0000 punkid http://blog.punkid.org/?p=326 既然Firefox, Opera, Chrome, Safari都已经支持HTML5了，为什么不开始向HTML5迁移呢？

从xHTML 1.0 Strict迁移到HTML5的工作量远比我想象中要小的多，header, nav, section, footer, article这些标签的使用让整个页面代码语义化，简洁化不少。基本上本站已经HTML5化了，至于代码的细节打磨工作慢慢来吧。

至于IE…全部不予考虑了。

另外，最近给blog加入了打印样式表，移动平台的话用Opera Mini，iPhone Safari也都测试过了。

最后分享两个HTML5过程中的小tips:

1. 一定要记得在CSS里加入这句，不然新的HTML5元素都是以inline方式显示的。

header, footer, section, nav, aside, article, dialog, figure {display:block;}

2. 为了平滑过渡到HTML5，以及减少CSS修改工作量。建议在header, footer这些新标签里保留原来的id属性。我都是这么写的: <header id="header">。

总而言之…如果你的浏览器太old-school了，还是直接订阅feed看就是了。

Related posts

]]> http://blog.punkid.org/2009/08/16/going-html5/feed/ 3 Quanta Plus : A Brief Review of an IDE under Linux http://blog.punkid.org/2007/03/05/quanta-plus-a-brief-review-of-an-ide-under-linux/ http://blog.punkid.org/2007/03/05/quanta-plus-a-brief-review-of-an-ide-under-linux/#comments Mon, 05 Mar 2007 05:59:02 +0000 punkid http://blog.punkid.org/2007/03/05/quanta-plus-a-brief-review-of-an-ide-under-linux/ Quanta Plus

一直都想介绍一下Quanta Plus这款linux下的IDE (基于Qt的程序)。这是我目前使用过的最好用，最上手的网页编辑器了，D.K的所有代码也都是在这个编辑器下写的。我曾经推荐过另一款linux下的IDE: Aptana。那相比Aptana，Quanta Plus有什么优势呢?

1. Quanta Plus的界面相当的简洁，而且如果你一直用的是KDE下的Kate或Kwrite的话，你会发现Quanta Plus和Kwrite,Kate具有很好的consistency，相似的界面设定以及一致的快捷键操作，统一的高亮显示，它基本上可以说是Kwrite的Deluxe版，上手非常方便。

quanta-preview

2. Quanta Plus支持标签页显示…不过在我的Gentoo上标签页有点小问题，就是关闭标签页时会出现1到2秒的无响应。

quanta-tabs

3. Quanta Plus和Win下的Dreamweaver一样具有智能自动补充功能，以下是我在编写WP theme的functions.php时出现的变量自动补充提示。

quanta-auto-completion

4. 同样对于CSS，XHTML，Javascript也都具有相应的自动补充功能，尤其值得称道的是在编辑HTML/XHTML时，如果你更改某一tag，它会自动更正相对应的闭合tag。

quanta-auto-modify

我更改<p>标签为<div>，相应的它会自动更正后面的闭合/p标签为</div>。

5. Quanta Plus非常注重Web Standards。你可以设置默认使用的DTD或者事后更改DTD。

quanta-DTD-setting

quanta-change-DTD

6. Quanta Plus对于CSS编辑模式同样具有不少独到之处。

quanta-css

你可以分别查看CSS文件里的tags/IDs/Classes/Pseudo style。

quanta-color-picker

利用Quanta Plus自带的拾色器，可以帮助你选取你需要的颜色并自动添加为value。例如我在输入了background:后点取拾色器，选中#FF4674这款颜色，然后点OK就会自动补充#FF4674到background:后面。

7. 如果你在handle一个比较大的项目的话，那建议你使用Quanta Plus的Project。

quanta-project

支持ftp,ssh,webdav等多种上传/同步方式。

8. Quanta Plus的预览功能，因为Quanta Plus是基于QT的程序，预览模式下使用的是KHTML引擎，当然你也可以设置调用Firefox/Opera等浏览器进行预览。请不要怀疑KHTML，它可是目前唯一全部通过了CSS3 selectors测试的引擎，其次是Safari和Opera, Mozilla/Firefox的Gecko…我只看到了Firefox的版本号从1.5到2.0的飞跃，引擎版本倒是没啥大动静。

不过Quanta Plus还不能像TopStyle一样对CSS进行预览…期待改进

9. 记住以下这些快捷键，它们可以大大提高你的工作效率(Also under Kate,Kwrite)。

  • Ctrl + I /Ctrl + Shift + I — 增加/减少缩进
  • Ctrl + U/Ctrl + Shift + U — 转换为大写/小写
  • Ctrl + D/Ctrl + Shift + D — 注释/删除注释
  • Ctrl + J — 合并为一行
  • Ctrl + Tab — 切换标签页
  • Ctrl + W — 关闭标签页
  • …

Related posts

]]> http://blog.punkid.org/2007/03/05/quanta-plus-a-brief-review-of-an-ide-under-linux/feed/ 3