web前端开发firefox插件推荐

web前端要在页面调试代码,不免需要各种工具来提高开发速度,而基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。俗话说,“工欲善其事,必先利其器”,如果做web开发,没装几个像样的插件,会被人“笑话”的哦。:)

下面就和大家分享下我的插件吧:

点评:Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试 功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari),简直难以置信。除此之外,其他功能还很强大。比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具
说明:查看,编辑,Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具,开发人员必装。强烈推荐装上。

以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的各种各样的信息,使我们进一步的了解当前所浏览的网页。
说明:超强的web分析工具,开发人员必装。

Tamper Data 的真实含义,即“篡改数据”(或者说定制 HTTP 请求):截取浏览器发出的每一个 HTTP 请求,提示我们选择是要进行定制,还是不做定制而直接提交请求,还是终止当前被截取的请求,然后根据我们的选择决定是打开定制窗口,还是直接向 WEB 服务器提交请 求,还是终止当前的请求。
说明:查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。

YSlow是一款用来分析网页,并提出前端性能改进建议的Firefox插件。YSlow依据预定义或用户自定义的规则为网页评级。它同时提供了许多性能分析工具,如:Smush.it™JSLint
说明:能够帮我们分析web页面比较慢的原因,它是基于 Firebug的,也能分开浏览web页面的元素,比如js,css.

HTML Validator是一个Firefox扩展,它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础,Tidy最初是W3C为验证HTML代码开发的一个工具。
说明:著名的 CSE HTML Validator 引擎。

Firecookie, 是一个嵌入在Firebug中的cookie浏览管理插件。

如果在Web开发中用到了cookie,使用它可以轻松的浏览cookie值、过期时间等,有助于快速开发。

使用它时需要在Firebug的网络面板中开启cookie监测。它可同时显示发送和接收的cookies。

FireUnit提供了一个简单的API用来做简单的测试记录及单元测试。关于单元测试,之前写的这篇文章《JavaScript单元测试框架介绍》可以看看。

如果热衷于jQuery Lib,FireQuery这款插件肯定要装下,FireQuery,它可以在任意页面插入jQuery脚本,结合FireBug的命令控制台使用jQuery语法,以方便对jQuery熟悉的开发者调试页面。

在制作网页时,在页面上添加一个新的设计元素(例如一个图片或图标)之前,我们往往希望提前看到元素添加后页面的整体效果。Pixel Perfect就可以帮你实现这个想法,它允许开发者在网页上覆盖你要添加的设计元素。使用它时你可以调整要添加元素的透明度和位置。
我感觉这款插件也可用来做网页中元素的微调,以保证和最初设计蓝图一致,如它的名字,完美到一个像素都不差。

HttpWatch是强大的网页数据分析工具.集成在Internet Explorer工具栏.现在,也可以在firefox下使用了。它包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功能.报告输出。

一款强大的正则表达式测试工具,不仅可以帮助开发人员编写正则,还可以方便地进行存储,以后用到就不用再绞尽脑汁了。

css实现input、checkbox垂直居中

先说input,这里说的input垂直居中,是指input内部文字的居中。

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{
font-size:12px;
height:14px;
padding:5px;
line-height:15px;
}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

至于checkbox 和文字居中,可以用这段代码试试:

/*input vertical middle*/
.input_middle{font-family:tahoma;}
.input_middle label{vertical-align:middle; cursor:pointer}
.input_middle input{vertical-align:middle; margin-right:3px;}
<div class="input_middle">
<input name="test" value="1" type="checkbox">
<label>测试文字x</label>
</div>

扩展阅读:基于vertical-align的表单元素垂直对齐方式研究

标题(h1–h6)最头痛的事:平衡语义和搜索引擎优化

html语义化,是现在谈论得比较多的话题。那何谓html语义化,简单的说吧,就是要有良好的html结构,在剥离css后,依然能读懂一个页面的结构,能分清哪些是标题,哪些是内容。切忌不要用css让一个标签去表现另一个标签。

而在语义化的过程中,重点和难点在于h(x)标签,h(x)的语义是标题,一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

Web内容可访问性指南(WCAG)里提到了这方面的内容:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

对于h1标签,一般一个网页只有一个,而h2–h6,一个网页可以有多个。就像一篇文章,只有一个标题,但可以有很多子标题或副标题。

而h1的使用,对于很多人很困惑。一个页面只能出现1次h1, 那对于网站来说,h1是用于网站名称呢还是文章标题?

正确的做法是:对于首页,h1用于网站名称,对于其他页面,h1用于相应的栏目标题或文章标题。而在非首页,网站名称推荐用<div>,<strong>,<h2>等标签。

具体做法,可以参考wordpress3.0 + 版本,在wordpress3.0以前的版本,h1在整个网站中都是用于网站名称,而在wordpress3.0以后的版本,已经修复了这个问题。

关于(hx)标题标签的使用建议:

  • 对于任何可能或“感觉”像是标题的内容,使用hx标签。
  • 一个页面只用一个h1标签,并把它做为文档、文章、页面的主题,而不是用于网站名称或logo。
  • 如果页面的某个模块属于标题,那可根据页面结构使用h2–h6标签,但不要“跳级”。例:尽量不要h1之后就直接用h3,而跳过h2标签。

例子:一个典型的3栏结构的页面,W3C建议的结构(本例来源:http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

扩展阅读(E文哦):

手把手教你优化wordpress,提高博客排名

这里主要是针对wordpress的seo站内优化设置。参考了很多搜索引擎优化的文章,感觉这篇文章写得很全面。

目录:

  1. 基础技术优化:简单、高效
    1. 永久链接
    2. 优化标题
    3. 优化描述
    4. 优化More标记
    5. 优化图片
  2. 主题优化
    1. 页面导航
    2. 标题级别
    3. 整理你的代码
    4. 一切只为速度
    5. 反思侧边栏
  3. 进阶优化及: 重复内容
    1. 不收录,仅爬行存档页面
    2. 禁用不必要的存档页面
    3. 关于Wordpress的翻页
    4. 禁止爬行不必要的链接
  4. 调整结构获取更好的排名
    1. 用页面替代文章
    2. 旧瓶装新酒: 让已经获得好排名的文章排名更好
    3. 链接到相关文章
  5. 深度优化: 让这些读者订阅你的文章
  6. 评论优化: 让读者尽情参与
    1. 怎样让读者发表评论
    2. 让读者产生共鸣
    3. 保持交流互动
  7. 优化以外的事情
    1. 紧随评论者
    2. 使用Twitter
    3. 寻找相关博客并和他们建立联系
  8. 结论

原文链接:http://seosem.ws/seo/wordpress-seo-the-definitive-guide/

    2个自动生成进度条(loading)图片的网站

    免费在线生成网站进度条,提供了目前流行的loading 图片和样式,并且能够配置颜色和大小,还能在线预览。设置好后可以直接下载到本地。相当不错,省下很多做进度条的功夫。使用也很简单明了,一看就会。

    1、http://ajaxload.info/#preview

    2、http://preloaders.net/

    JavaScript单元测试框架介绍

    • FireUnit

    介绍:这个是John Resig另起炉灶做的,在他的博客John Resig – FireUnit: JavaScript Unit Testing Extension,发布了他与Jan Odvarko合作开发的基于Firebug的扩展FireUnit。
    简单说来,FireUnit给Firebug增加了一个标签面板,并提供了一些简单的JavaScript API来记录和查看测试。参考:http://shawphy.com/2008/12/fireunit.html
    评价:FireUnit在易用性上表现非常出众,非常适合基于Firebug做调试环境的前端工程师。

    • QUnit

    介绍:QUnit 是一款强大而且容易使用的JavaScript 测试框架,它被用于jQuery 与其插件的测试,同时它也同样可以测试普通的JavaScript 代码。参考:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

    评价:QUnit是一款易用的,基于jQuery的测试框架,如果项目中用到jquery,推荐用QUnit做单元测试。

    • jsUnit

    介绍:系统化的解决方案,基于XNuit规范,如果你会使用jUnit、NUnit等框架,对这个应该会很容易上手,且包括服务器端(Java的)。参考:http://www.jsunit.net/

    评价:非常全面,专业,适合大型企业级开发。

    • Test.Simple & Test.More

    介绍:这个是jQuery之父John Resig在他的著作《Pro Javascript》中推荐的测试框架

    参考:http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/Test/Simple.html
    评价:非常容易上手,非常简洁,适合中小型项目快速引入单元测试。

    总结:推荐使用Qunit和FireUnit。

    2010年《时代》杂志评出的最好的50个网站

    《时代》每年都会评选当年度的最佳的50网站,前两天也评选出了本年度的最佳的50个网站。

    这次评选出的最佳网站分为十个大类,分别为:分10大类别,分别为音乐视频、体育、家庭亲子、新闻资讯、金融、购物旅行、健康健身、社会化媒体、游戏和教育。简要添加了各个网站的介绍。

    音乐视频(Music & Video)

    • Vimeo:视频分享网站,很喜欢其网站风格。
    • Movieclips:根据分类和关键词,最快找到你中意的影片片段,还可以很方便地自己编辑片段进行MashUP。
    • Grooveshark:Grooveshark是一个在线音乐分享社区,基于 DRM(数字版权管理,Digital Rights Management)免费的 Mp3的 p2p 分享网络。你可以创建或者导入自己的音乐列表,分享自己的音乐列表,加入组群,分享音乐并且得到一定的回报。详细介绍
    • MOG:在线音乐订阅服务,具有在线预览功能,价格相比于Spotify,订阅价格也更便宜。
    • Labuat:基于FLASH的用户交互式音乐视频网站。

    体育(Sports)

    家庭亲子(Family & Kids)

    • Design Mom:妈妈设计师,没太理解这个网站做啥的。
    • Serious Eats:各种的美味食谱,视频和博客内容。
    • Babble:涵盖从确认怀孕到宝宝进入青春期之前的各种育儿技巧。
    • Etsy:一个工艺品电子商务网站。
    • Sesame Street:是美国一套著名的幼儿教育电视节目,内容结合了教育和娱乐。

    新闻资讯(News & Info)

    • Guardian:《卫报》
    • The Onion:一个擅长对时事进行讽刺嘲讽的媒体。
    • The Daily Beast:—
    • National Geographic:《国家地理》
    • WikiLeaks:WikiLeaks是一个小型的在线信息文件资源,它的信息是全世界的政府组织都要保密的信息。这个网站允许人们匿名邮递文件

    金融(Financial & Productivity)

    • Mint:在线理财服务网站,可以管理银行卡和信用卡等。
    • Wikinvest:一个热门股投资wiki站点,Wikinvest网站用户会替股票图表附上批注,说明股价的高低点,简介上市公司的经营概况,并发表买进或是出脱的建议。
    • StockMapper:使用其可以让你对数据一目了然,它不仅提供所有股票的数据图表,并且还根据它们的相对市场表现,使用所谓的热图效果给它们标记不同的颜色。
    • Springpad:一个收集和管理任务、网络记事和事件的在线记事簿。
    • Wakerupper:用户安排好自己的行程后,WakerUpper会在指定的时间打电话进行提醒。

    购物旅行(Shopping & Travel)

    • Groupon:目前火爆的团购网站的鼻祖站
    • Gilt Groupe:美国奢侈品购物网站。
    • Rent the Runway:是一个能够相当方便地出租高级服饰的网站。
    • Stay:—
    • SeatGuru:一个在线选择飞机座位的服务。

    健康健身(Health & Fitness)

    • Keas:一个关注用户健康数据,并且提供个性化健康建议的网站。
    • Mayo Clinic:梅约临床和医疗中心的专家们分享健康经验的网站。
    • Walk Jog Run:通过一个iPhone应用监控跑步情况。
    • Exercise TV:一个关于健身锻炼的视频网站。
    • Fit by Fun:通过简单的健美操游戏达到健身的效果。

    社会化媒体(Social Media)

    • Gowalla:基于地理位置的服务,同类服务有Foursquare等。更多LBS服务
    • Foodspotting:基于地理位置的服务,主要以餐厅点评为主
    • LinkedIn:一个社会化网络社区,更多的是为商业用户拓展和管理人脉的用途
    • StockTwits:基于twitter的金融产品,自动跟踪每支股票的动态
    • Tumblr:介于博客微博之间的一款产品,说实话新浪微薄何其很像。

    游戏(Games)

    • Kongregate:收集各类在线游戏的站点。
    • Cactus Squid:Arcade风格的游戏。
    • Pogo:各类经典小游戏收集站。
    • Newgrounds:允许用户自己上传游戏的站点。
    • Games.com:各类休闲小游戏。

    教育(Education)

    • Livemocha:提供了30种不同语言的的指导训练和练习的在线网络社区。
    • Chegg:专业的二手教科书出租网站,租赁时间长达一学期。
    • MIT OpenCourseWare:麻省理工大学开放式课程。
    • Read Print:一个收录在线免费图书的网站。
    • TEDTED(指technology, entertainment, design在英语中的缩写,即技术、娱乐、设计)是美国的一家私有非营利机构,该机构以它组织的TED大会著称。TED网站主要展示TED大会的各类演讲内容。

    相关阅读推荐:

    原文链接:50 Best Websites 2010

    加快您的网站的最佳实践(Best Practices for Speeding Up Your Web Site)

    Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
    Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
    其中内容部分一共十条建议:
    一、内容部分
    1.尽量减少HTTP请求
    2. 减少DNS查找
    3. 避免跳转
    4. 缓存Ajxa
    5. 推迟加载
    6. 提前加载
    7. 减少DOM元素数量
    8. 用域名划分页面内容
    9. 使frame数量最少
    10. 避免404错误

    详细内容可下载附件的pdf文件中文版。也可看原文。

    原文:http://developer.yahoo.com/performance/rules.html

    中文文档下载:performance-rules-web-site.pdf

    其他相关文章:

    http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/

    Jquery实现广告弹窗(背投),绕过所有浏览器拦截

    PopUpAdClass = { };
    PopUpAdClass = new function() {
     // Private fields
     var that = this;
     var windowHandles = {};
     var isChrome = /chrome/.test(navigator.userAgent.toLowerCase());
    
     // Public Members
     this.focus = function(windowHandle) {
     if (!windowHandle) {
     throw new Exception("Window handle can not be null.");
     }
    
     if (isChrome) {
     windowHandle.blur();
     setTimeout(windowHandle.focus, 0);;
     }
     else {
     windowHandle.focus();
     }
     }
    
     this.windowExists = function(windowTarget) {
     return windowTarget &amp;&amp; windowHandles[windowTarget] &amp;&amp; !windowHandles[windowTarget].closed;
     }
    
     this.open = function(url, windowTarget, windowProperties) {
     // See if we have a window handle and if it's closed or not.
     if (that.windowExists(windowTarget)) {
    
     // We still have our window object so let's check if the URLs is the same as the one we're trying to load.
     var currentLocation = windowHandles[windowTarget].location;
    
     if (
     (
     /^http(?:s?):/.test(url) &amp;&amp; currentLocation.href !== url
     )
     ||
     (
     // This check is required because the URL might be the same, but absolute,
     // e.g. /Default.aspx ... instead of http://localhost/Default.aspx ...
     !/^http(?:s?):/.test(url) &amp;&amp;
     (currentLocation.pathname + currentLocation.search + currentLocation.hash) !== url
     )
     ) {
     // Not the same URL, so load the new one.
     windowHandles[windowTarget].location = url;
     }
    
     // Give focus to the window. This works in IE 6/7/8, FireFox, Safari but not Chrome.
     // Well in Chrome it works the first time, but subsequent focus attempts fail,. I believe this is a security feature in Chrome to avoid annoying popups.
     that.focus(windowHandles[windowTarget]);
     }
     else {
     // Need to do this so that tabbed browsers (pretty much all browsers except IE6) actually open a new window
     // as opposed to a tab. By specifying at least one window property, we're guaranteed to have a new window created instead
     // of a tab.
     //windowProperties = windowProperties || 'menubar=yes,location=yes,width=700, height=400, scrollbars=yes, resizable= yes';
     windowProperties = windowProperties || 'menubar=yes,location=yes,width=' + (screen.availWidth - 15) + ', height=' + (screen.availHeight - 140) + ', scrollbars=yes, resizable= yes';
     windowTarget = windowTarget || "_blank";
    
     // Create a new window.
     var windowHandle = windowProperties ? window.open(url, windowTarget, windowProperties) : window.open(url, windowTarget);
    
     if (null === windowHandle || !windowHandle) {
     alert("You have a popup blocker enabled. Please allow popups for " + location.protocol + "//" + location.host);
     }
     else {
     if ("_blank" !== windowTarget) {
     // Store the window handle for reuse if a handle was specified.
     windowHandles[windowTarget] = windowHandle;
     windowHandles[windowTarget].focus();
     }
     }
     }
     }
    }
    
    调用
    $(document).click(function(){
    		PopUpAdClass.open("http://www.ghugo.com/popup.html",'_blank');
    //这个是背投功能,popup 弹出来来或马上失去焦点,最大限度的兼顾用户体验。
    		PopUpAdClass.focus(window);
    //popup一次就好啦,整天弹会让人反感滴。
    		$(document).unbind("click");
    	})
    

    扩展阅读:
    http://stackoverflow.com/questions/2758608/window-focus-not-working-in-google-chrome
    http://www.planabc.net/2008/03/05/ad_back_pop/
    http://www.cnblogs.com/birdshome/archive/2007/12/22/window-open.html