Xiaoxiao's Weblog » web http://liuyuntian.com Wed, 16 May 2012 02:18:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Web内容可访问性指南(WCAG)2.0发布了 http://liuyuntian.com/2008/11/12/web-content-accessibility-guidelines-20.html http://liuyuntian.com/2008/11/12/web-content-accessibility-guidelines-20.html#comments Wed, 12 Nov 2008 13:29:20 +0000 xiaoxiao http://liuyuntian.com/?p=987 　　Web Content Accessibility Guidelines (WCAG，Web内容可访问性指南) 2.0 发布了！如果你不太了解WCAG，可以先看一下2006年2月份Junchen兄翻译的WCAG1.0。

　　WCAG2.0英文版 http://www.w3.org/TR/WCAG20/

　　下面两个有一些对比可参考变化，英文的，有高手请翻译。
　　http://wipa.org.au/papers/wcag-migration.htm
　　http://www.w3.org/WAI/WCAG20/from10/comparison/

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2008/11/12/web-content-accessibility-guidelines-20.html/feed 4 Understanding Web Design http://liuyuntian.com/2007/11/21/understanding-web-design.html http://liuyuntian.com/2007/11/21/understanding-web-design.html#comments Wed, 21 Nov 2007 14:01:49 +0000 xiaoxiao http://liuyuntian.com/2007/11/21/understanding-web-design.html 转载来源：A List Apart

We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.

If we want better sites, better work, and better-informed clients, the need to educate begins with us.

Preferring real estate to architecture
It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant.

The news media too often gets it wrong. Too much internet journalism follows the money; too little covers art and ideas. Driven by editors pressured by publishers worried about vanishing advertisers, even journalists who understand the web spend most of their time writing about deals and quoting dealmakers. Many do this even when the statement they’re quoting is patently self-serving and ludicrous—like Zuckerberg’s Law.

It’s not that Zuckerberg’s not news; and it’s not that business isn’t some journalists’ beat. But focusing on business to the exclusion of all else is like reporting on real estate deals while ignoring architecture.

And one tires of the news narrative’s one-dimensionalism. In 1994, the web was weird and wild, they told us. In ‘99 it was a kingmaker; in ‘01, a bust. In ‘02, news folk discovered blogs; in ‘04, perspiring guest bloggers on CNN explained how citizen journalists were reinventing news and democracy and would determine who won that year’s presidential election. I forget how that one turned out.

When absurd predictions die ridiculous deaths, nobody resigns from the newsroom, they just throw a new line into the water—like marketers replacing a slogan that tanked. After decades of news commoditization, what’s amazing is how many good reporters there still are, and how hard many try to lay accurate information before the public. Sometimes you can almost hear it beneath the roar of the grotesque and the exceptional.

The sustainable circle of self-regard
News media are not the only ones getting it wrong. Professional associations get it wrong every day, and commemorate their wrongness with an annual festival. Each year, advertising and design magazines and professional organizations hold contests for “new media design” judged by the winners of last year’s competitions. That they call it “new media design” tells them nothing and you and me everything.

Although there are exceptions, for the most part the creators of winning entries see the web as a vehicle for advertising and marketing campaigns in which the user passively experiences Flash and video content. For the active user, there is gaming—but what you and I think of as active web use is limited to clicking a “Digg this page” button.

The winning sites look fabulous as screen shots in glossy design annuals. When the winners become judges, they reward work like their own. Thus sites that behave like TV and look good between covers continue to be created, and a generation of clients and art directors thinks that stuff is the cream of web design.

Design critics get it wrong, too
People who are smart about print can be less bright about the web. Their critical faculties, honed to perfection during the Kerning Wars, smash to bits against the barricades of our profession.

The less sophisticated lament on our behalf that we are stuck with ugly fonts. They wonder aloud how we can enjoy working in a medium that offers us less than absolute control over every atom of the visual experience. What they are secretly asking is whether or not we are real designers. (They suspect that we are not.) But these are the juniors, the design students and future critics. Their opinions are chiefly of interest to their professors, and one prays they have good ones.

More sophisticated critics understand that the web is not print and that limitations are part of every design discipline. Yet even these eggheads will sometimes succumb to fallacious comparatives. (I’ve done it myself, although long ago and strictly for giggles.) Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo’s—and as brilliant, in its way—satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don’t know, let’s say Milton Glaser’s iconic Bob Dylan poster.

Typography, architecture, and web design
The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.

Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.

Of course, all comparisons are gnarly by nature. What is the “London Calling” of television? Who is the Jane Austen of automotive design? Madame Butterfly is not less beautiful for having no car chase sequence, peanut butter no less tasty because it cannot dance.

So what is web design?
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Let’s repeat that, with emphasis:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

She walks in beauty
Great web designs are like great typefaces: some, like Rosewood, impose a personality on whatever content is applied to them. Others, like Helvetica, fade into the background (or try to), magically supporting whatever tone the content provides. (We can argue tomorrow whether Helvetica is really as neutral as water.)

Which web design is like that? For one, Douglas Bowman’s white “Minima” layout for Blogger, used by literally millions of writers—and it feels like it was designed for each of them individually. That is great design.

Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.

Although a great site design is completely individual, it is also a great deal like other site designs that perform similar functions. The same is true of great magazine and newspaper layouts, which differ from banal magazine and newspaper layouts in a hundred subtle details. Few celebrate great magazine layouts, yet millions consciously or unconsciously appreciate them, and nobody laments that they are not posters.

The inexperienced or insufficiently thoughtful designer complains that too many websites use grids, too many sites use columns, too many sites are “boxy.” Efforts to avoid boxiness have been around since 1995; while occasionally successful, they have most often produced aesthetically wretched and needlessly unusable designs.

The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.

If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see.

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2007/11/21/understanding-web-design.html/feed 0 2006Web开发Top10 http://liuyuntian.com/2007/03/13/2006-web-development-top10.html http://liuyuntian.com/2007/03/13/2006-web-development-top10.html#comments Tue, 13 Mar 2007 18:04:38 +0000 xiaoxiao http://liuyuntian.com/2007/03/13/2006-web-development-top10.html 　　来自IBM的dW区的文章，全中文：http://www.ibm.com/developerworks/cn/web/top10/2006.html

　　这里还有年度Top10，大都与技术有关http://www.ibm.com/developerworks/cn/top10/?S_TACT=105AGX52&S_CMP=techcsdn

一.　搜索引擎优化（SEO）基础
作为 Web 站点开发人员，使您的 Web 站点得到搜索引擎的关注是获得成功的关键因素之一。在这个共分四部分的系列中，您将学习对 Web 站点进行有机优化所需的基础知识。

二.　[exurl=http://www.ibm.com/developerworks/cn/views/web/tutorials.jsp?cv_doc_id=181668]使用 Dojo 开发 HTML 小部件[/exurl]
您将学到使用 Dojo 开发 HTML 小部件的基础知识；包括如何引用一个图像、如何向 HTML 页面中添加事件处理程序以及如何处理复合小部件。

三.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-ie2mozgd/?ca=wa-t10]把应用程序从 Internet Explorer 迁移到 Mozilla[/exurl]
本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术，然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。

四.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-cachejson.html?ca=wa-t10]用 JSON 处理缓存[/exurl]
了解如何在服务器代码的帮助下将元数据缓存在客户端的优秀方法，服务器代码将提供 JSON（JavaScript Object Notation）形式的字符串化元数据。

五.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-lucene2/?ca=wa-t10]用 Lucene 加速 Web 搜索应用程序的开发[/exurl]
Lucene 是基于 Java 的全文信息检索包。本文将首先介绍如何利用 Lucene 实现高级搜索功能，然后学习如何利用 Lucene 来创建一个健壮的 Web 搜索应用程序。

六.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-lo-utf8/?ca=wa-t10]UTF-8 字符处理在 Web 开发中的应用[/exurl]
用 UTF-8 编码来处理 Web 应用信息的输入和显示可以使不同 Web 应用之间的信息交互标准化，并且可以简化应用的开发过程。

七.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-realweb1/?ca=wa-t10]真正的 Web 2.0: 书签？标记？del.icio.us 网站[/exurl]
此专栏文章将深入研究实际的 Web 2.0 站点，并演示 Web 架构师如何将 Web 中的最佳内容引入他们自己的网站。

八.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-javascript.html?ca=wa-t10]用函数式编程技术编写优美的 JavaScript[/exurl]
函数式或声明性编程是非常强大的编程方法，正逐渐在软件行业流行起来。这篇文章将介绍一些相关的函数式编程概念，并提供有效使用这些概念的示例。

九.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-qualbust14.html?ca=wa-t10]质量因素: 比较 Web 站点的外观和功能[/exurl]
作者在本专栏中揭示了如何将 Web 站点的优先级由外观转移到功能，并使用 Web 标准来确保跨浏览器的兼容性。

十.　[exurl=http://www.ibm.com/developerworks/cn/web/wa-richiapp/?ca=wa-t10]Rich Internet Applications 的技术选项[/exurl]
Web 应用程序就要进入下一级别了，Rich Internet Application (RIA) 可以极大地增强用户交互。在本文对 RIA 的概述中，您将学习如何将其应用于用户界面 (UI) 层。

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2007/03/13/2006-web-development-top10.html/feed 3 [新书]Web Accessibility:Web Standards and Regulatory Compliance http://liuyuntian.com/2006/09/20/web-accessibility-web-standards-and-regulatory-compliance.html http://liuyuntian.com/2006/09/20/web-accessibility-web-standards-and-regulatory-compliance.html#comments Wed, 20 Sep 2006 02:02:06 +0000 xiaoxiao http://liuyuntian.com/2006/09/20/web-accessibility-web-standards-and-regulatory-compliance.html [img=200,240,left,10]http://www.friendsofed.com/img/cover/1590596382.jpg”>　　发现了这本新书，《Web Accessibility:Web Standards and Regulatory Compliance》看了下目录还是不错，偏重了在js,flash等开发的可用性研究。

　　[exurl=http://www.amazon.com/Web-Accessibility-Standards-Regulatory-Compliance/dp/1590596382/sr=8-1/qid=1158689315/ref=pd_bbs_1/002-9344730-8160821?ie=UTF8&s=books]点击进入Amazon购书地址[/exurl]

　　居然见到了和CSS Mastery一起合卖，真是会卖钱 [cool]

　　An accessible HTML version of Web Accessibility: Web Standards and Regulatory Compliance, will shortly be available to purchasers of the printed version. More details coming soon.

The power of the Web lies in the fact that anyone and everyone can access it, and this should also extend to users with disabilities. Accessibility is about making websites accessible to those with aural, visual, or physical disabilities, or rather, constructing websites that don’t exclude these people from accessing the content or services provided.

This isn’t difficult to accomplish and doesn’t require anything more than your normal tool set-HTML, CSS, JavaScript, Flash, or whatever else. All you need to do is use these tools in the right way, and bear in mind the guidelines that exist to help you keep your websites accessible and the laws that enforce web accessibility around the world.

This book gives you all you need to know about web accessibility, whether you are a web designer or developer who wants your sites to be accessible, or a business manager who wants to learn what impact the web accessibility laws have on your websites.

After an overview of the accessibility law and guidelines, and a discussion about accessibility and its implementation in the enterprise, the book goes on to show how to implement accessible websites using a combination of concise references and easy-to-follow examples, covering:

Understanding assistive technologies
Creating accessible content using XHTML, JavaScript, CSS, Flash, and PDFs
Testing against WCAG (including 2.0) and Section 508
Retrofitting inaccessible sites where necessary
The book concludes with an in-depth analysis of accessibility law around the world. If you’re concerned about the legal and moral implications of web accessibility, then this book is perfect for you. It is written by some of the world’s experts on accessibility, leaving you in good hands.

Summary of Contents:

PART 1: THE IMPACT OF WEB ACCESSIBILITY
Chapter 1: Understanding Web Accessibility
Chapter 2: Overview of Law and Guidelines
Chapter 3: Implementing Accessibility in the Enterprise
PART 2: IMPLEMENTING ACCESSIBLE WEBSITES
Chapter 4: Overview of Accessible Technologies
Chapter 5: Assistive Technology: Screen Readers and Browsers
Chapter 6: Accessible Content
Chapter 7: Accessible Navigation
Chapter 8: Accessible Data Input
Chapter 9: CSS for Accessible Web Pages
Chapter 10: Accessible JavaScript
Chapter 11: Accessible Flash
Chapter 12: PDF Accessibility
Chapter 13: Accessibility Testing
Chapter 14: Introduction to WCAG 2.0
Chapter 15: Retrofitting Case Study: Redesign of a University Website
PART 3: ACCESSIBILITY LAW AND POLICY
Chapter 16: U.S. Web Accessibility Law in Depth
Chapter 17: Worldwide Accessibility Laws and Policies
Appendix A: Glossary of Terms
Appendix B: Guide to the Section 508 Standards for Electronic and Information Technology
Appendix C: Overview of PAS 78 Guide to Good Practice in Commissioning Accessible Websites

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2006/09/20/web-accessibility-web-standards-and-regulatory-compliance.html/feed 1 Microsoft Expression Web Designer beta1发布 http://liuyuntian.com/2006/09/06/microsoft-expression-web-designer-beta1%e5%8f%91%e5%b8%83.html http://liuyuntian.com/2006/09/06/microsoft-expression-web-designer-beta1%e5%8f%91%e5%b8%83.html#comments Wed, 06 Sep 2006 21:00:45 +0000 for3w http://liuyuntian.com/2006/09/06/microsoft-expression-web-designer-beta1%e5%8f%91%e5%b8%83.html 　　其实从CTP那个版本出来的时候我一直就在试用微软的时候这个改良“Frontpage”版，涂的不是别的，就是启动快，用着快。今天推出了Beta1，下载了，果然爽，不知道Dreamweaver的下个版本(9.0?)会怎么出手。

Microsoft Expression Web Designer 官方网站：http://www.microsoft.com/products/expression/en/web_designer/default.mspx

下载点这里

截图

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2006/09/06/microsoft-expression-web-designer-beta1%e5%8f%91%e5%b8%83.html/feed 7 [书]Web Designer Idea 设计师谈网页设计思维 http://liuyuntian.com/2006/06/13/web-designer-idea-designers-thinking-about-web-design.html http://liuyuntian.com/2006/06/13/web-designer-idea-designers-thinking-about-web-design.html#comments Tue, 13 Jun 2006 15:40:37 +0000 for3w http://liuyuntian.com/2006/06/13/web-designer-idea-designers-thinking-about-web-design.html 　　Relen的新书就要上市了，和Relen了解了一下这本书的想法和内容，感觉还是不错的，现在推荐给大家。飞思系列的书，应该Relen是第一个中国作者，韩国人出的不少。

　　为了本书宣传，Relen会进行一系列的小活动，可能参与者会通过活动获得这本书及Relen的亲笔签名。 [lol] 　敬请关注！

前言 网页设计从哪里开始？
　｜我们为什么而工作？
　｜行业的现状
　｜多方位思考及本书的写作意图

目的（意图、建立网站的目的）

引言
明确主题
材料分析
目标用户
“设计”目的
　｜特殊、唯一、印象深刻；以优势取胜
　｜优势在全面中变得平庸，网站内容忌臃肿
　｜视觉识别不足够，用“口号”加强补足
　｜可信度信息
网站策划书　
　｜策划书写作

信息（网站的内容；传递的内涵）

引言
信息与信息空间
｜信息的形式
　　　｜文字
｜图片　
｜动画　
｜音乐
｜信息的创建与管理
　｜信息的来源
｜信息空间的结构
　　　｜格子模式
　　　｜序列模式
　　　｜树型模式
　｜信息的编辑
　｜信息的积累
　｜信息空间的重组

视觉信息与文化传播
　｜视觉信息的情感表达

设计（网站的形式，可达到的范围）

引言
网页形式与设计

导航设计（可用性）
　｜导航的形式
　｜纯文字
　｜文字 + 装饰
　｜隐藏文字信息的导航
　｜导航的艺术性与可用性

版式格局
｜基础结构：栏式结构
　｜分栏数及其特征
　｜宽、窄栏与信息的关系
　｜栏中栏
　｜页长、栏底
　｜基础结构：区域结构
　｜分栏结构与区域结构
　｜信息特点
　｜规则的与不规则的划分
　｜网页版式设计及风格
｜融合与创新
　 ｜借鉴与展望
　 ｜常见格局的创作参考
　 ｜三栏与四栏
　 ｜拐角格局
　 ｜中等信息量的网页格局
　 ｜半包围式格局
　 ｜一个信息区的网页格局
　 ｜“国”字型格局
　
色彩设计
　｜网页色彩设计
　 　｜信息与色彩
　 　｜目的与色彩
　 　｜色彩与版式结构
　 　｜标志性物体的色彩
　 　｜色彩规划及调整
　｜色彩创作的思路
　 　｜主色
　 　｜辅色
　 　｜背景色（底色）
　 　｜以传达信息为主的设计用色
　 　｜色彩风格

风格设计
　｜统一外观与风格设计
　｜重复、替换、调整：统一的过程
｜减弱：强调和弱化
　｜风格设计的创作思路及参考
　 　｜特征扩大化
　 　｜扩展VI、吉祥物
　 　｜图形图像动画的魅力
　 　｜畅想主义

创意思维 (创意；择优后的成品)

引言
更新你的思维方式
　｜灵感的来源
　｜设计是择优选择的过程
　｜“最重要的”和“极限范围”
　｜想要反传统，首先要知道什么是传统

导航思维与页面设计　
　｜方向式导航
　｜导航面积的创意思维
　｜消失的导航――“信息域”导航的应用
　｜信息抽屉――展开和关闭　
　｜多导航系统的形成及应用
　｜导航重复了？
　｜导读与指示设计　

信息域与页面层
　｜跳转信息与信息置换
　｜为固定的信息域提供加长的信息区
｜活动的信息域与扩展空间的页面拉层
　｜重复性信息条目的运用

格局思维与页面设计
　｜参照物――固定与变化
　｜直线与曲线
　｜从首页到内页――视觉元素的呼应
　｜冲破格局：空间 (层) 结构

色彩表现力
｜亲和力
｜智慧、诚信
｜动感、活泼
｜人文、历史悠久
｜时尚
｜健康
｜幼儿
｜高雅
　｜真的是“视觉疲劳”么？

插图表现力
　｜光与影――空间感！
　｜插图的文化内涵与传达
　｜纯文字的魅力

设计与表达
　｜“大气”的营造
　｜细节在哪里？
｜是对话，不是独白

Relen的后记 和大家聊几件事情
　｜信息是一切的开始。
　｜设计的“拿来主义”
　｜种子和果子――这本书的价值所在
　｜可能是你关心的几个问题
　｜请关注本系列其他书籍的出版

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2006/06/13/web-designer-idea-designers-thinking-about-web-design.html/feed 2 推荐新书《Web Design Before & After Makeovers》 http://liuyuntian.com/2006/05/18/web-design-before-and-after-makeovers.html http://liuyuntian.com/2006/05/18/web-design-before-and-after-makeovers.html#comments Thu, 18 May 2006 23:49:27 +0000 for3w http://liuyuntian.com/2006/05/18/web-design-before-and-after-makeovers.html 　　近来工作一直非常的忙，回家中还不停的点击。终于，发现这本书还是不错的，本书把WEB的制作工程系统的描述了一遍，包括如何把table转向DIV啊，如何创建翻转图像啊，如何管理网站信息，如何操作盒模型啊。这本书没有过多的讲解高深的问题，用一个个实例来操作，系统的把WEB design变成一种轻松的事情，有懂一点点英文，又想快速学习网站制作的朋友们可以参考一下此书。

　　Web Design Before & After Makeovers

　　

　　内容不多说了，请看简介。Book Description

　　Through stunning four-color images that demonstrate how nondescript “before” situations gradually become astonishing “after” results, this book offers readers simple steps to achieve unique outcomes

　　Readers learn how to incorporate the latest Web-building techniques on their sites, redesign a site for optimum usability, limit user bandwidth needs, keep user experience consistent with CSS, and manage content

　　The medley of makeovers includes: full-site makeovers (user speed, color themes, improved accessibility), page makeovers (page sizing, working with tables), text makeovers (font selection, graphic alternatives), image makeovers (incorporating text with images, file sizing), navigation makeovers (improving navigation bars, menu additions), content makeovers (better Web writing, enhancing the home page message), and an extreme makeover (combining several smaller makeovers into a major site overhaul)

　　点这里购买：http://www.amazon.com/exec/obidos/tg/detail/-/0471783234/

　　改天办张信用卡，一直想买一些书。比如：《CSS Mastery》，我很不喜欢盗版书，但没法子，只能对着显示器看，如果有谁在Amazon购书的经历，请告诉我是怎么样的，运费如何。在此谢谢了。

　　更新一下，发现这本书也不错Mobile Interaction Design，国外的体验都研究到了手机的应用上，我们还停在Web上。
　　

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2006/05/18/web-design-before-and-after-makeovers.html/feed 1 W3C Day in Berlin to Focus on Mobile Web http://liuyuntian.com/2005/07/20/w3c-day-in-berlin-to-focus-on-mobile-web.html http://liuyuntian.com/2005/07/20/w3c-day-in-berlin-to-focus-on-mobile-web.html#comments Wed, 20 Jul 2005 11:15:59 +0000 for3w http://liuyuntian.com/2005/07/20/w3c-day-in-berlin-to-focus-on-mobile-web.html 很高兴在W3C上看到了这则新闻，如果手机上的WEB能提前领先一步提出标准，对整个行业都是非常有利的。

2005-07-18: The W3C Office in Germany and Austria is pleased to present W3C-Tag 2005 – Das Mobile Web (W3C Day) on 14 September in Berlin, Germany. The event is organized jointly with Berliner XML-Tage at Humboldt University. W3C Day focuses on mobile Web and W3C’s Mobile Web Initiative (MWI). Speakers include Philipp Hoschka (W3C) and Dr. Simone Emmelius (ZDF). The event is free and open to the public. Registration with Berliner XML-Tage is required. (News archive)

相关文章

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2005/07/20/w3c-day-in-berlin-to-focus-on-mobile-web.html/feed 0 Web 与排版学上的字体问题 http://liuyuntian.com/2005/07/12/web-%e4%b8%8e%e6%8e%92%e7%89%88%e5%ad%a6%e4%b8%8a%e7%9a%84%e5%ad%97%e4%bd%93%e9%97%ae%e9%a2%98.html http://liuyuntian.com/2005/07/12/web-%e4%b8%8e%e6%8e%92%e7%89%88%e5%ad%a6%e4%b8%8a%e7%9a%84%e5%ad%97%e4%bd%93%e9%97%ae%e9%a2%98.html#comments Tue, 12 Jul 2005 09:24:15 +0000 for3w http://liuyuntian.com/2005/07/12/web-%e4%b8%8e%e6%8e%92%e7%89%88%e5%ad%a6%e4%b8%8a%e7%9a%84%e5%ad%97%e4%bd%93%e9%97%ae%e9%a2%98.html 这是一篇网上的稿子，有参考价值。备份一下。

关于字体的讨论，其实无论是国外还是国内，都已经有不少，可是我发现绝大部分的内容或者有失偏颇，或者不够全面，下面我试图将自己一段时间内的观点总结一下，以求提出一个比较容易接受的 CSS 字体选择的建议。

事关大小
字体的大小总是一个困扰人的问题，用绝对单位还是用相对单位？或者具体来说，用什么单位？ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

相对大小包括：em, ex, px
绝对大小包括：in, cm, mm, pt, pc
em 就是相对 font-size 制定的大小而言的，例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin，当 em 本身用于 font-size 时，指的是它所继承元素的相对大小。
百分比也是相对 font-size 而言的。
因此我认为，em 和百分比都不适合设置字体的大小，因为相互变动的因素太多了，修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的，这不适合汉字的大小，所以也否决了。px 是根据当前显示设备的解析度而言的，同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为，如果网页中应该存在作为绝对参照系的长度，那么 pt 和 px 应该是首选，其他的长度根据这个绝对参照系，按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的，而问题在于，屏幕的解析度要比纸张低得多，所以如果直接把字体按照纸张上印刷的那个大小显示，肯定是看不清的，仅就英文字体而言，许多细微的点划、衬线都没法在那么低的解析度下表现出来，所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的，有一种看法认为，尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读，但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

对于中文字体的情况有所不同，中文字体在屏幕上的清晰显示依赖的是点阵字体，或者简单的说，就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun)，这套字体是华康公司 (Dynalab) 设计的，对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体：

那么比这个大小要大的汉字呢？就要依赖操作系统的字体圆整 (anti-alias，以下简称 aa) 技术了，一般大家认为，Mac OS X 和 Linux 下的 AA 要比 Windows 的 ClearType 好很多。然而不管怎么说，用太大的汉字是比较危险的。

事关风格
谈到英文字体，可以扯出许多掌故，不过这里且说说 Web 开发有关的。

关于 Times New Roman，首先，与大家一般保留的印象不同，Times 不应该是一个适合长时间阅读的字体，尤其不适合书籍的阅读，因为众所周知的，Times 一开始是给报纸设计的一种字体，而为了适应报纸这种在劣质纸张的快速印刷的环境，字体的衬线不得不夸张一些，否则细节很容易被油墨破坏，所以把 Times 用在书籍上其实是一种很不负责任的方式。

比这个更不负责任的是用 Times New Roman，Times New Roman 其实是一种压缩 (Condensed) 了的 Times，比原来的 Times 更细长，更不易读了。下面的一个比较应该比较容易分辨出优劣来：

Times 与 Times New Roman 的比较

是不是没有好的字体呢？不是，Sabon、Minion、Jansen-Text, Adobe Caslon, Adobe Garamond 等等都是非常适合阅读的字体，只不过这些字体都是商业的，也就是说，不是可以免费得到的。Microsoft 提供的字体中也有质量比较好的，比如 Hermann Zapf 亲自监制的 Palatino Linotype。事实上，Adobe 选择的 35 种标准的 PostScript 字体 (Times Roman, Helvetica, Courier, Palatino 等等) 中，Zapf 设计的 Palatino 就是使用最广泛的，也最容易阅读的字体。这些字体由 URW 免费提供了，是质量很好的字体，可惜的是并非应用得特别广泛 (不过大部分的 Linux Distribution 中都包括 urw-fonts 这个 package，大部分的 TeX distribution 也都包括 urw 这个 package)。

说到 Palatino, 我们也可以看看 Web 上 Palatino 和 Palatino Linotype 的区别：

Palatino 的比较

相信可以看出，高质量的 Type1 字体，本身就带有字体圆整效果，这是比 Truetype 优越的地方。

我的建议
我的建议是什么呢？恐怕还是老生常谈：

用 pt 作为绝对参照系。
中文字体尽量使用 9pt, 10.5 和 12pt 中的一种。
选择字体的时候，先考虑 Type1，再考虑 Truetype，最后考虑都没有的情况，比如我想用 Palatino, 那么应该：font-family: Palatino, “Palatino Linotype”, serif;。

Copyright © 2003-2009 Xiaoxiao's Weblog All rights reserved.
]]> http://liuyuntian.com/2005/07/12/web-%e4%b8%8e%e6%8e%92%e7%89%88%e5%ad%a6%e4%b8%8a%e7%9a%84%e5%ad%97%e4%bd%93%e9%97%ae%e9%a2%98.html/feed 0