杰拉斯的博客

标签:规范

JavaScript编程风格

杰拉斯 杰拉斯 | 时间:2012-05-05, Sat | 16,453 views
前端开发 

Douglas CrockfordJavascript权威,Json格式就是他的发明。

去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么。
Douglas Crockford

我非常推荐这个演讲,它不仅有助于学习Javascript,而且能让你心情舒畅,因为Crockford讲得很幽默,时不时让听众会心一笑。

下面,我根据这个演讲和Crockford编写的代码规范总结一下"Javascript编程风格"。

(阅读全文…)

关于Web语义化

杰拉斯 杰拉斯 | 时间:2012-02-16, Thu | 6,372 views
前端开发 
“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,
每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;
针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。
这是一种恶性循环,是一种巨大的浪费。”

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。 其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

(阅读全文…)

网页建设规范

杰拉斯 杰拉斯 | 时间:2011-11-13, Sun | 10,478 views
前端开发 

一、命名规范

文件命名的原则:以最少的字母达到最容易理解的意义。

1.一般文件及目录命名规范:

每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们) 。

多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm

(阅读全文…)

[前端]CSS3命名规范

杰拉斯 杰拉斯 | 时间:2011-09-12, Mon | 5,910 views
前端开发 
  • 头部:header
  • 内容:container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper wrap
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:link
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 投票:vote
  • 合作伙伴:partner
  • 摘要:summary
  • 按钮:btn
  • 标签页:tab
  • 当前的:current
  • 小技巧:tips
  • 图标:icon
  • 注释:note