Loading...

你有多久没有用可视化编辑器写html了

类归于: HTML客户端, 网站技术 — 江东 @ 2009-06-13 17:19:53 才(28)条评论

大一的时候,学微波通信的我选了一门选修课,叫做网页设计,从那之后就对动态web编程感兴趣了。

在学习web相关的东西的过程中,frontpage用过几次,随后就用了dreamweaver。当年在水木清华BBS上听闻高手用文本编辑器写网页,并且宣称用存文本编辑器效率更高。当年感觉不可思议,用文本编辑器确实可以,但是不可能效率更高,那人简直就是装深沉,有现在的话说是装“13”!

今天突然想到这个事情,发现自己电脑中多年没有dw,甚至连安装程序都找不到了。原来,业余web编程的我,也早在4、5年前就放弃了可视化编辑软件了!

其实这并不是水平高的体现,引用《买油翁》的文字:“无他,唯手熟尔”!

实话实说,现在确实用纯文本编辑器速度快多了,在打开DW的时间内,可能我要做的小部分修改已经完成。web发展到现在,设计越来越简洁,用css可以随心所欲将希望的div摆在自己认为合适的地方。

各位朋友,你呢,是不是也放弃了DW这根拐杖!

预报一下:今天上午开始,在写一个简约的单用户图片管理程序,现在大约完成50%,整个程序就一个php文件,想去体验未完成版本的,请去这里0bad.com

分享一段基于jQuery的表单验证的javascript

类归于: HTML客户端, 网站技术 — 江东 @ 2009-03-18 14:32:13 才(4)条评论

有jQuery,一切都好办了,因为用它可以方便的定位到html中的任何一个节点,下面一段代码是cosbeta用于表单验证的javascript脚本:

首先引入jQuery库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

然后编写验证表单的函数

(read on …)

如何设计一个能用google翻译多语言的站点

类归于: HTML客户端, 网站技术 — 江东 @ 2009-03-02 12:55:34 才(13)条评论

很多时候,我们需要做一个多语言的站点,cosbeta认为目前多语言网站的解决方案比较多,比如:

  1. 做几个不同的分站,通过用户第一次的选择将用户定位到相应语言的分站;
  2. 编辑网站内容的时候,添加多种语言,然后通过用户的选择从数据库中获取对应的语言;
  3. 添加一个google翻译按钮,用户自行选择google翻译查看不同语言的版本;
  4. 利用google 翻译接口,通过js实时翻译网页文字,cosbeta今天打算要介绍的就是这种方法;

上面4种方法的优缺点我这里就不多描述了,相信大家都很清楚了。应客户的要求,再加上翻译方便和翻译的通用性的需求,cosbeta决定用第4种方法为客户解决多语言的问题。

最开始cosbeta的解决办法是想通过程序模拟客户端去直接读取google对当前页面翻译的内容,从而实现页面的多语言版本。比如用户访问http://storyday.com?p=1,当用户需要访问日语版时,cosbeta就将此页面通过php发送给google的网页翻译接口,然后将翻译的结果读取出来,显示在当前的页面上。然而后来cosbeta发现这种方式是不可取的,一方面google对客户端的限制比较严格,用php模拟客户端可能会导致数据获取的失败,另外一方面,google并没有推荐这种方式,所以很容易导致翻译失效。

后来cosbeta就转向了google的翻译API,配上jquery对Dom灵活的操作,很容易就解决了这个问题。 (read on …)

广州电信ADSL继续抽风

类归于: HTML客户端, 互联网事 — 江东 @ 2009-01-04 20:48:15 才(2)条评论

还是记录一下吧,看看电信什么时候才能正常
以前的记录如下

  1. 广州电信封路由-ADSL老是断网 2008-01-26
  2. Bluehost这两天奇慢无比2008-04-10
  3. 广州电信ADSL的3月经又来了2008-06-28
  4. 广州电信ADSL继续抽风 2009-01-04

Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=43ms TTL=245
Reply from 220.181.31.8: bytes=32 time=41ms TTL=245
Reply from 220.181.31.8: bytes=32 time=44ms TTL=245
Request timed out.
Request timed out.
Request timed out.
Request timed out.
Request timed out.
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=60ms TTL=245
Reply from 220.181.31.8: bytes=32 time=42ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=92ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=48ms TTL=245
Request timed out.
Reply from 220.181.31.8: bytes=32 time=240ms TTL=245
Request timed out.

Ping statistics for 220.181.31.8:
Packets: Sent = 302, Received = 227, Lost = 75 (24% loss),
Approximate round trip times in milli-seconds:
Minimum = 41ms, Maximum = 628ms, Average = 52ms
Control-C

javascript and HttpOnly cookies

类归于: HTML客户端, 网站技术 — 江东 @ 2008-12-20 16:42:41 才(2)条评论

对于很多只依赖于cookie验证的网站来说,HttpOnly cookies是一个很好的解决方案,在支持HttpOnly cookies的浏览器中(IE6以上,FF3.0以上),javascript是无法读取和修改HttpOnly cookies,或许这样可让网站用户验证更加安全。

wikipedia中对于httpOnly的描述如下:

`HttpOnly’:

Set-Cookie: RMID=732423sdfs73242; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain=.example.net; HttpOnly

When the browser receives such a cookie, it is supposed to use it as usual in the following HTTP exchanges, but not to make it visible to client-side scripts.[21] The `HttpOnly` flag is not part of any standard, and is not implemented in all browsers. Note that there is currently no prevention of reading or writing the session cookie via a XMLHTTPRequest.[36]

所以,若是网站基于cookie而非服务器端的验证,请最好加上HttpOnly,当然,目前这个属性还不属于任何一个标准,也不是所有的浏览器支持,另外知名的wordpress程序也已经更改了cookie的属性为httpOnly。

javascript无法读取HttpOnly cookies,若想在js中获取cookie的属性该如何处理呢?

cosbeta也没有什么比较好的办法,所以只有告诉大家都绝招:还得动用服务器端脚本读出cookie,然后用输出js代码,或者用ajax去获取服务器端程序读出的cookie值。

于是cos-html-cache因此升级了。

该优化一下这个blog了

类归于: HTML客户端, 网站技术 — 江东 @ 2008-09-26 09:32:31 才(7)条评论

朋友在gtalk提醒我,说我的blog搜索引擎不太友好,需要改善了,并且建议我site:storyday.com看看。果不其然,不看不知道,一看吓一跳,列出来的内容居然全部是本blog的导航内容,看来确实一点都不友好。那么就对症下药吧,既然google显示的全部是导航的内容,那么我把导航的html移动到底部应该就可以了吧,于是开始动刀,将header上的导航代码移动到 footer中,然后在footer中加上一句
$("#menu-ct").html( $("#cos-wp-menu").html() );
这样导航依旧显示在原来的位置,但是html代码确在最后了,希望这样能有点作用 ,马上进入google website管理员工具,把蜘蛛的抓取时间设为最快,看看多久能有效果

Jquery树形菜单的实现

类归于: HTML客户端, 网站技术 — 江东 @ 2008-09-03 20:01:16 才(7)条评论

jQuey这个东西很好很强大,用jQuery操作DOM简直是易如反掌。这不,刚才icemapro小弟给我留言,希望我能写一个jQuery的树形菜单,在强大的就Query的帮助下,仅仅花了大约10分钟就完成了,其中还有大约7分钟在考虑css的问题,所以熟悉jquery可是对你很有帮助的哦,废话不多说,下面发布代码,讲解方式依然在注释中体现:
菜单的html代码如下,你可以根据需要进行扩展:


我想上面的html代码应该不用解释了吧,否则这篇文章你也没有看得必要了哈,下面是css的实现,其实css是最难搞的,目前搞定是实现目录式树形,其他树状也是很简单的,无非就是改变一下css

a:link,a:visited{font-size:12px;
color:#094477;text-decoration:none;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding,否则打死都无法兼容FF和IE*/}
li.folder{
background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
margin:0 2px;
text-indent:20px;
/*folder背景,目前放到是windows目录背景,如果是其他树形,用其他背景图片替代即可*/
}
li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
.disnone{
display:none;
}/*这是一个公共的css class,表示隐藏该元素*/

下面开始介绍重点,那就是js的实现,可能这个重点会让你失望,毕竟代码才那么简单的几行,当然在运用jquery之前肯定是要引入jquery库文件的,本例子中直接引用的本blog(生活点滴)中的jquery库:

下面是js代码,解释依然在注释中:
function Exp(obj){
var html_element = $(obj).parent('.folder');/*获取当前点击的父dom,在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
var sub_element = $(html_element).children(".folder"); ;/*根据当前的父dom,获取本级的子dom*/
if( html_element.attr('class').indexOf('folder-op') != -1 ){
/*css class .folder-op表示当前已经展开的类,如果展开,则前面的+背景变成-背景,具体可以在后面的例子中看到
如果class中含有该类,则表示当前已经展开,所以下面的两行的任务是:1.隐藏该目录,2.remove掉此css class
*/
html_element.removeClass('folder-op');
sub_element.hide();
}
else{
/*否则,添加表示目录已经展开的类,展示该目录*/
html_element.addClass('folder-op');
sub_element.show(500);
}
}

对,对于js就只需要上面的几行,太简单了,对吧,下面是例子: (read on …)

javascript初级教程2:操作文档对象

类归于: HTML客户端, 网站技术 — 江东 @ 2008-07-17 20:22:05 才(4)条评论

传说在很久很久以前,我打算写一下javascript入门到文章,结果仅仅在开了一个头之后便忘记续写了。今天晚上,忘记把电池带回家了,做不了其他事情,于是乎抓紧时间补上后续的教程。

在上次的日志中,我谈到这样一个看法:服务器端程序是负责输出文本,也包括输出javascript,而javascript则是负责操作浏览器。今天我就大致的说一说javascript是如何操作浏览器的。在javascript中,我们可以将一切都看作对象(各位看官,别看见对象就害怕,其实js的这个对象没有那么恐怖)。首先我们来举一个通俗的例子,比如我们想叫一个小妹妹把一个饭碗举起来,用javascript可以这样表达:

人.女人.小妹妹.右手.捧起(饭碗)。

我们看看这代代码,首先找到对象人.然后引用人的成员.女人,最后定位到右手,引用函数“捧起”,参数就是饭碗了。

好了,所以,你知道了一些常见的对象表述,便可以灵活的运用js来操作了。下面介绍一下常用的操作:
alert('hi');//警示消息,内容是"hi",当然hi也可以是其他变量
window.close();//关闭窗口
document.getElementById("my-id").value = "123";//给id="my-id"这个元素赋值 .value只对表单有效
document.getElementById("my-id").innerHTML = "123";//如果 id元素是html区域,如div span li等等
document.getElementById("my-id").innerHTML = "这里也可以是html代码";

是不是很简单呢,注意上面代码中大小写不能错误!

今天就写这么简单的几行,因为电池快用尽了,其实知道对象操作的基本思想之后,你甚至可以直接用javascript框架了。