102009

些日子有位童鞋在R-help邮件列表里问如何生成那种单词大小与其出现频率成比例的图,这玩意儿也就是通常所说的标签云(Tag Cloud)。我琢磨了一下WordPress的插件wp-cumulus,发现其原理很简单,不过就是将标签信息以XML形式通过JavaScript传递给一个Flash文件,所以也很容易用R去实现这个传递过程,即:将文本、超级链接以及频数写成XML,然后嵌入到HTML文件中。整个过程参见Creating Tag Cloud Using R and Flash / JavaScript (SWFObject)这篇日志,函数源代码和示例数据都可以从那里下载。

效果是这样的:

Your browser does not support Flash or Javascript!

(通过RSS阅读的童鞋们请打开原文链接在浏览器中观看,否则啥都看不到)

042009

写完那个引用自己硬盘图片地址的,突然想起两张陈年老图:

停止战争

比萨斜塔

它们深刻说明了:作为现代人,不懂HTML是不行滴。

302008

这个话题关心的客官应该在网上看到过不少老外在他们的主页上强烈声明他们能接受的邮件格式,其中最广泛的一点可能就是关于HTML格式的邮件。很多人都反对或讨厌接受HTML格式的邮件,而仅仅接受纯文本格式的邮件,原因洋洋洒洒可以有几十条。如果你有足够的耐心,你不妨读一读这个页面

另一点就是MS Word附件,这也是他们非常反对的。关于这一点,当然属自由软件战士Richard Stallman在GNU网站上的声明最有名了。

本人没有耐心去阅读上述页面,但我非常同意这两点。HTML邮件纯粹是浪费空间,接收者只需要看邮件的文本即可,发送者不用自己加粗或放大字体,更有甚者如网易邮箱还使用信纸,这所有的工作对于你的接收者来说可能都是白费:他们的计算机和你的可能大不一样,你发过去的带格式的邮件在他们那里也许变形得没法看了,所以一般还是发纯文本邮件吧。MS Word也有同样的考虑:你的接收者未必使用Windows系统或者安装了Office的某个版本,换言之,MS Word不是跨平台通用的文档格式(不幸的是很多人都被微软洗脑了),因此对于发送的附件来说,要尽量考虑对方是否能够打开,例如PDF格式就是跨平台通用的,而且版本的影响很小(这一点要强烈谴责MS Office 2007!)。

使用Web界面收发邮件的用户可以设置邮箱使用纯文本格式发邮件,使用客户端的同样也可以设置软件切换为纯文本格式。

今天又遇到一例Word发过来打不开的情形,于是操起键盘写下如上两点注意事项。尤其是那些跟老外发邮件的同志们,切记要注意。另有一点,最好不要给洋鬼子看“雅虎邮箱,您的终生邮箱!”之类的签名。

132007

了MSIE能利用自身的缓存,真是让我想破了头。好在到现在终于找到了一种解决办法,其实所有的技巧都在于:不要用JavaScript调用任何与URL有关的对象。既然不能用JavaScript动态改变页面内元素(比如图形<img src=… />)的URL,那么,想要在页面内动态快速显示图片的路基本上只剩下一条了,那就是CSS。基本原理是:利用JavaScript动态改变一个层(<div id=…></div>)的CSS属性,若想让它显示,则设置为*.style.display = “block;否则,设置为*.style.display = “none。通过对若干个层的依次显隐,一副动画就大功告成了。

当然,Firefox对这种办法也是支持的。至此,我才基本搞定了动画在网页上的显示方式——万里长征的第一步。

今天看JavaScript Reference顺便也了解到window.onload的作用,当一个页面在客户端加载完成之后这个函数就会被调用,因此可以事先在页面内放置一个“正在加载”的说明字样,等页面全都加载完毕了之后把这个说明隐去,并将动画的“开始”按钮设置为可用(disabled = false)。这样一个动画页面就完美了,吼吼。

依然参见:http://r.yihui.name/misc/java.htm(猛增速度,faster,直接把时间间隔减小到0秒,看看是什么效果)

外一篇:之前走了什么弯路

在此之前,我走的弯路太多了,现在综合起来也就一个特点:那些方法全都涉及到URL……

  1. 比如设置图片的src属性(*.src = …
  2. 比如设置表格的背景(*.setAttribute(“background”, …)
  3. 比如设置对象的背景图像(*.style.backgroundImage = “url(…)”
  4. 比如把一个对象的HTML代码(包含图片标签)赋给另一个对象(*.innerHTML = **.innerHTML
  5. 等等

而对一个对象的显隐控制不会涉及到图片地址,只是单纯的显示或隐藏一个对象——实质上它一直都在这个页面里。

102007

天半夜被一个JavaScript的问题迷惑了好一阵子,然后才反应过来,这又是IE和Firefox的差别。主要问题是,Firefox对 document.all["id"] 这种获取页面内元素的方式并不太支持,而最好通过 document.getElementById(“id”) 这种更严格的方式来引用页面内的对象;对于IE而言,两种方式都可以。

之所以涉及到这个问题是因为我想在HTML页面中直接实现动画展示,省得还要费尽苦心去研究GIF文件格式然后读写GIF文件以便生成GIF动画文件,通过JavaScript的方式生成动画比研究GIF要容易多了,只需要调用Java脚本改变一幅图的src属性就足够了,然后用一个循环让图像“动”起来。示例参见:http://r.yihui.name/misc/java.htm页面底部(点击按钮观看布朗运动)

082007

这两个网站是我所看到比较经典的JS图片放大效果网站:

前者是在页面内缩放,后者是采用的“全屏”效果,我看后者的代码稍微简单一些,就采用了后者,不过也借鉴了前者的一个放大镜图标,这样有助于提醒访问者他所看到的这幅图片时可以继续放大的;不过这个图标还费了我半天劲才让它在IE中也显示出来,主要是IE对CSS中文件路径的解析比较奇怪,而Firefox就能正确解析出来。

那么以后本站中的图片就可以有缩放效果啦!而且对于多幅图片,还可以以幻灯方式依次浏览,嗯,8错8错。

062007
网页时比较头疼的事情之一就是要不停地考虑兼容问题:一方面考虑不同的分辨率下的效果(1024*768、1280*1024等),另一方面就是浏览器的兼容(Internet Exporer、Mozilla Firefox等)。在我做网站的初期,我比较重视前者,因此做网页时经常换分辨率,那时候还特别重视800*600的分辨率,如今觉得这种小显示器可能已经只是少数了吧,因此还是以1024*768为中心设计网页的宽度(980px左右),保证在1024*768下面把屏幕基本填满,而在1280*1024下面看着也不觉得太窄就行;后来开始用Firefox时,发现IE和Firefox对HTML的解析有很多区别,因此开始琢磨浏览器的兼容问题。

昨天花了好半天时间把这个Blog的模板自己重新改写了一遍,这个过程中曾经对层(div)的对齐问题恼火了一阵子,因为设置body的文本对齐为居中之后,里面的div在Firefox下死活都不肯居中对齐,后来才明白,必须得设置div的左右边距为auto才行。总体感觉Firefox对HTML的解析还是好一些,比如本页右边的那些方框中的列表项我都设置了强制不换行(white-space: nowrap;)、隐藏多余的部分(overflow: hidden;),可是当鼠标移上去的时候,IE就会把多余的部分又给显示出来,而Firefox就不会。这一点我想了半天都没找出好办法解决,于是就那样扔着吧,不管了。

其实这次改模板的主要目的是想应用<fieldset><legend>这两个标签,顺便把灰色的背景改为白色、把引用<blockquote>和代码<pre>的样式重新设置一下。一段时间之前我曾经看到过一个叫Planet PHP的国外Blog站,当时特别喜欢它那种像Visual Basic里面Frame控件的格式,也就是这样的:

FIELDSET - Form Control GroupThe FIELDSET element defines a form control group. ?By grouping related form controls, authors can divide a form into ?smaller, more manageable parts, improving the usability disaster that ?can strike when confronting users with too many form controls. The ?grouping provided by FIELDSET also helps ?the accessibility of forms to those using aural browsers by allowing ?these users to more easily orient themselves when filling in a large ?form.

While FIELDSET is not supported by old browsers, it can be used safely by explicitly closing any preceding P element with </P> or by including an empty P prior to the FIELDSET. This causes non-supporting browsers to infer the start of a block-level element even though they ignore the block-level FIELDSET element.

The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any inline or block-level element, including another FIELDSET.

因此看了看它的网页源码,发现用的是<fieldset><legend>标签,本来之前觉得挺神奇,还以为是用CSS+表格作出来的,看了源码才知道原来这么简单。于是乎,我这个Blog页面也就改造成这样了。

关于引用和代码的样式,其中“引用”采用了一个“引号”的图片作为背景放在左上位置,而“代码”采用了上下两条水平虚线作为分界标志,这两种样式的字号都缩小为11px,不过在IE下面看不出11px和12px汉字的区别,但在Firefox下英汉的11px字号都确实被缩小了。

292007

HTML语言简单,而且理论上用cat()函数就足够写文件用了,但我觉得Eric Lecoutre写的这个R2HTML包还是很有价值的,轻轻松松就可以获得漂亮的网页输出。

主要函数:

  • HTML():这是个泛型函数(generic function),会根据传入参数的类型(class)自动生成相应的HTML代码。
  • HTMLbr():熟悉HTML的人一看就知道,这是换行符”<br>”。
  • HTMLhr():同上,这是水平线”<hr>”。
  • HTMLInsertGraph():顾名思义,这是插入图片,即”<img src=… >”。

其实比较好玩的是即时生成HTML的两个函数:

  • HTMLStart()
  • HTMLStop()

它们会记录你在R中的一系列操作,最后用框架页的形式给出类似于日志(log)的报告。

WWW.YIHUI.NAME XIE@YIHUI.NAME © 2007 - 2010 by Yihui Xie