杰拉斯的博客

关于Web语义化

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

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

(阅读全文…)

网页建设规范

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

一、命名规范

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

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

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

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

(阅读全文…)

[前端]CSS3命名规范

杰拉斯 杰拉斯 | 时间:2011-09-12, Mon | 5,461 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

Web前端开发规范文档

杰拉斯 杰拉斯 | 时间:2011-08-12, Fri | 5,689 views
前端开发 

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

(阅读全文…)

无图片版jQuery弹出框插件

杰拉斯 杰拉斯 | 时间:2011-08-12, Fri | 10,539 views
前端开发 

一、前面的些说明

remind提示框效果

关于之前版本的zxxbox jQuery弹出框插件,您可以狠狠地点击这里。当初写弹出框插件纯粹是学习的目的,另外就是临时应付个人站点上的一些弹框应用。所以写得比较简单,业余,并没有期望谁会去使用它。但是,后来,一些同行的留言以及相关的交流发现,还是有人使用此轻便,简洁的弹框效果的。

但是,一方面由于自己之前的水平比较稚嫩,同时,对插件的逻辑没有很好的梳理。所以,之前版本的弹出框插件,虽然也能用,但是,功能确实有效,不能给内置的弹框按钮添加回调方法,不支持Ajax加载,而且,还有些小的隐晦的bug等,在调用上也是有点不利索的。所以,这几天,我就把之前的zxxbox弹出框插件重新写了下。虽然弹框的UI界面还是更之前的一样,但是,内部的逻辑,调用,以及参数等都有所不同,可以说是从底层核心都改变了。所以,只是简单的以插件更新的方式放在之前的文章下,则会有有力使不出的感觉。故,另起一篇文章,对新版的zxxbox弹出框插件参数,使用等细致地讲解下,希望对有需要的同行有所帮助。

2.0版本的一些不足,如不支持Ajax,回调能力弱,无动画,扩展性等都得到了不同程度的修复。当然,功能的增加也使得之前插件的优点,像是调用简单,文件轻巧等优点则被弱化了,现在文件(含更新注释和内容注释)版本为11.4K,比之前大了3~4K。此插件相比之前最大的优点就是方法调用更加专业了,这个会在后面具体体现出来。还有一个不可忽略的优点,与之前版本一样,没有图片,兼容性也不错,只需调用一个JavaScript文件就可以了。

(阅读全文…)