显示标签为“web”的博文。显示所有博文
显示标签为“web”的博文。显示所有博文

2009年3月10日星期二

[多图]Web 设计中的拉洋片效果

http://www.cnbeta.com/articles/78901.htm

幻灯效果是 Web 设计中的新风潮,新的白宫网站也未能免俗,幻灯效果(拉洋片)特别适合在站点的首要位置展示一些核心的,展示性的内容。最早的幻灯效果多基于 Flash,随着 JavaScript 在 Web 设计师与开发者眼中地位的提升,基于 JavaScript 的幻灯效果开始取代 Flash。本文介绍了一些非常出色的 Web 幻灯设计实例。

Micro 一个非常干净简单的幻灯片效果。 Paramore 漂亮的轮播效果,边界处理也很出色。 Obox Design 简单干净的图片幻灯效果。 SpaceCollective 使用了一些很好的手工操作的图片幻灯。 Josh Smith 非常简单的图片混等,少即是美。 Benjamin David 很好的幻灯图片库,使用了垂直平滑转换效果。 Design By Humans 这个站点使用大型幻灯图片展示自己的产品,背景幕也随着图片而改变,非常漂亮。 Lucas Hirata 这个富有创意的作品展示站点使用幻灯效果展示大量作品。 Designsensory 一个标准的图片幻灯,可以通过数字控制当前显示的图片,也有对应的文字显示。 Banjax 很棒的幻灯布局,可以通过漂亮的缩略图控制显示。 Qlear 手动操控式幻灯片,用来展示作品项目。 Dean Oakley 另一个功能简单的幻灯效果,带当前页码显示。 Rob Young 这是一个富有创意的,独特的作品展示站点,点击具体项目,还会以 Lightbox 的形式显示该项目的更详细信息。 HelloThemes 这个站点使用一个简单的手动幻灯展示信息,按钮很大,水平变换很平滑。 MacAllan 这个幻灯中每个图片都会显示一定的时间,图片变换前,还会在边角显示一个示意图。 Global Oneness Project 使用了简单明了的幻灯片效果展示推荐的视频。 Behance 使用了方便的按钮和渐入渐出效果。 Ricoverdo 拥有漂亮风格的水平幻灯。 Scrap Blog 包含多种功能和 Cooliris 图片效果。 Deluge Studios 使用了做旧背景加炫目的色彩。 Daniel Stenberg 这是一个出色的作品展示幻灯效果,使用水平转换。 Piotr Kulczycji 这个幻灯效果出众,非常值得一看。 World Concern 这个基于 Flash 的幻灯效果包含一些很酷的页码控制按钮。 delicious 这个我们熟悉的 Delicious 首页幻灯非常简单。 Household 这个设计精良的幻灯使用非常平滑的转换效果和干净的布局。 Volkswagen UK 英国大众公司的网站的可用性很强,幻灯既支持按钮控制,又可以使用鼠标的滚动论控制。 Cream Scoop 另一个干净简单的图片幻灯。 Cade Martin 一个很简单的图片幻灯,使用干净的字体和基本效果。 Barack Obama 最新的白宫网站,基于 Java 的幻灯效果。 Thomas Prior 这个作品展示幻灯使用按钮和指示标志告诉用户现在处于什么位置。 Viktor Jarnheimer 这个幻灯使用 iMac 电脑屏幕作为图片框架,布局很干净。 MVB Web Design 一个简单网站上的简单幻灯。 James Lai Creative 位于做旧背景上的幻灯,拥有微妙的导航按钮。 Trevor Saint 该幻灯使用了非常漂亮的垂直转换效果。 Creative State 这个幻灯视觉效果出众,导航按钮在鼠标盘旋的时候显示缩略图。 K4 Laboratory 这个巨大的幻灯使用很出色的布局展示项目。 Threadless Kids 将鼠标放到导航按钮上,显示对应的幻灯图片。 Phunk'n Creative 暗背景上的漂亮展示效果。 本文国际来源:http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/ 中文翻译来源:COMSHARP CMS 官方网站


--
snigoal,Wuhan,China

2009年3月5日星期四

W3C验证失败的10个常见原因

W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能。下面十个细微的失效问题难住了大批程序员,我们告诉你如何解决。在本文开始前介绍一些使用W3C验证程序时需要注意的问题。

不要担心验证程序的警告——如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步。 一次更正一个错误——按顺序进展工作,从上到下,一次修正一个错误。HTML用浏览器从上到下浏览,这些错误也是按同样顺序显示。 每次修正代码后要刷新代码,使它们重新生效——一个小错误常常会引发之后整页的连串错误。因此如果操作不当,"修正错误"也可能引发更多错误。每次修正后使代码重新生效,这样就可以确保完全解决问题。 知道了上面这些基本的异常情况,下面我们就来看看版面设计无效的几个原因。

  1. div 标签未关闭 这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时,总会大吃一惊。开启的div标签是最普遍的版块设计失误之一,也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签,诊断时就像大海捞针一样麻烦。
  2. 麻烦的embed标签 九十年代早期,Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签,如"embed",即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE(文档类型)验证,就只能放弃嵌套。 如果同时想要生效的版面设计和嵌入式媒体,可以试试Flash Satay方法。
  3. 不当的DOCTYPE声明 不声明DOCTYPE,或者在文件开始错误声明DOCTYPE,也是一个常见错误。根据一般经验,Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。Strict 声明代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. 结尾斜线 如果你的网站不能验证,很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西,特别是在image标签等元素中。例如: 在严格的DOCTYPE中这是无效的。要在img标签结尾处加上"/"以解决此问题。
    <img src="" alt="">
  5. Align标签 如果DOCTYPE被设为Transitional,你就会使用"align"标签,但如果要求更高一点希望得到Strict验证,你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用"float"或者"text-align"来代替align转换元素。
  6. JavaScript 如果已经声明Strict DOCTYPE,就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员,因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。如果必须用到JavaScript,可以在其前后加上如下标签: <script type="text/javascript">
    /* <![CDATA[ */ // JavaScript here }; /* ]]> */ </script>
  7. 图像需要"alt"属性 你可能还没有注意到,图像也是高级验证的潜在绊脚石。除了结尾斜线,高级验证也要求用alt标签来描述图像,如alt= "Scary vampire picture". 搜索引擎也靠alt标签来识别网页上的图像,所以无论怎样加上alt标签总是好的。
  8. 未知实体数据 实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替"&"等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。
  9. 不良嵌套 嵌套就是元素里又包括元素,如下所示:
    <div><strong>Sweet!</strong></div>
    我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签,但又先关闭div标签。这可能不会改变版块布局,但却会使你的版块设计失效。
  10. 缺少"title"标签 尽管这看上去是一个很明显的错误,很多程序员(包括我自己)还是经常会在"head"版块中遗漏title标签。当你看到"missing a required sub-element of HEAD"(缺少HEAD的必要子元素)时,才会发现自己忘记添加title标签了。
原文:10 Reasons Why Your Code Won't Validate (and How to Fix it)

--
snigoal,Wuhan,China

2009年2月27日星期五

[多图]跨浏览器兼容测试8大利器

http://www.cnbeta.com/articles/78103.htm

仅仅是一年前,跨浏览器兼容测试还不是一件容易事,市面上的测试工具都有一些缺陷,要么太贵,要么功能有限,要么很难用。最近我们终于看到了一些新的工具 出现,其中的一些可谓十分出色。本文精选8种最新的跨浏览器测试工具,这7款简单的工具让你的工作变得十分容易,而且它们完全免费。

#1 — Xenocode Browser Sandbox Xenocode Browser Sandbox 改变了基于 Windows 的浏览器兼容测试工具的游戏规则,只需点一下鼠标,就会直接打开一堆各式各样的浏览器窗口,你可以在不同版本的 IE, Firefox, Google Chrome, Safari 进行测试。是真正的测试,不是屏幕截图,该工具完全免费。唯一遗憾的是,目前不支持 Mac。 #2 — CrossBrowserTesting.com 免费用户一次可以获得5分钟的测试时间。CrossBrowserTesting.com 非常简单,登录后,选择一个合适的操作系统和浏览器,就可以开始了。你的测试系统是一台真正的机器,上面安装了你需要的浏览器,你可以使用 Java 小程序或 VNC 连接你的测试机,和 Xenocode 一样,是真正的测试,不是屏幕截图。 #3 — IETester 这是一款可以免费下载的 Windows 程序,目前仍处于早期测试期。这是唯一的可以帮你测试左右 IE 版本的免费程序。下载并安装该浏览器,你可以选择 IE 渲染版本并开始浏览。甚至可以对两个版本的结果进行肩并肩测试。 #4 — BrowsrCamp 这是一款 Safari/Mac 测试工具,免费版提供几近实时的屏幕截图,虽然缺少不同版本测试功能,但速度很快。如果肯出点钱,你还可以完全控制整台测试机并进行纵深测试。 #5 — Litmus 这款跨浏览器兼容测试工具在短短几个月迅速成名,成为最受欢迎的测试工具之一。不过免费版只支持 IE7 和 Firefox 2 测试。付费版功能更多,支持非常广泛的浏览器,甚至邮件客户端。不过单用户49美金每月的费用实在不低。 #6 — NetRenderer NetRenderer 看上去有点不起眼,它用来测试 IE 兼容性,像很多服务一样,NetRenderer 是基于屏幕截图的。支持 IE5.5 到 IE8,截图生成速度非常快几乎不用等待。他们还提供一个浏览器工具条可以快速进入测试。该工具是免费的。 #7 — BrowserShots BrowserShots 最近成为最常用的跨浏览器测试工具,它支持几乎所有操作系统和浏览器,包括一些非常罕见的组合。免费用户只有一个限制,就是要等付费用户不用的时候才能用。 鉴于其流行程度,在某个时间段,可能很难及时返回测试截图,因为它依赖成员用户的计算机返回截图,你选用的操作系统和浏览器组合越常见,返回速度越快。 Bonus #8 — Adobe MeerMeer 这是 Adobe 即将发布的一个外观漂亮的测试套件,第一次在 Adobe MAX 亮相后,几乎所有听说过该工具的人都为之倾心。 MeerMeer 有非常明显的优势,最值得一提的是它的 "洋葱皮"功能,可以将不同浏览器到结果一层一层叠加起来对比。非常值得期待。 本文国际来源:http://freelancefolder.com/7-fresh-and-simple-ways-to-test-cross-browser-compatibility/ 中文翻译来源:COMSHARP CMS 官方网站

2009年2月26日星期四

PDFtoWord:精准的文件转换器

 Pdftoword 号称是目前最为精准的pdf to word文件转换器,简单的作了一下对比分析。

pdf to word文件转换器是最有实用价值的在线工具,数量并不是很多,以前介绍过ConvertpdftowordPdfundo,最近也并没有发现更多的pdf to word转换器,直到今天。Pdftoword 号称是目前最为精准的pdf to word文件转换器,尚未公开使用,需要email邀请使用。今天简单的试用了一下,感觉非常不错,对中文支持也很不错,值得大家去使用!




目前,Pdftoword 还在内部测试,大家可以先用我的帐号(ybcz0519@163.com)去看看,或者用"smashingapps"邀请码去申请一个,不过动作要快!

Pdftoword 的使用与很多此类的服务类似,上传文件,自动转换,通过email下载。用了两张截图简单测试一下其精准的效果。

原pdf文件:



 

Pdftoword 转化后:



 

Convertpdftoword转换后:



确实,Pdftoword 无愧于精准之王,对中文同样转换很好,文字方面不多说了,大家可以自己测试。特别突出的是一个细节,Pdftoword 转换后的文档仍以段落为单位,没有很多的换行符,而以前大多转换器都是以行为单位,以致末尾有很多的换行符,你复制粘贴时会有许多麻烦!

网址:http://www.pdftoword.com/

------------------
snigoal@Wang,HUST.Wuhan.China
 

VISIT COUNT