20个工具使你的Web开发变的更简单

制定一全面的美观网站,可以说是一项艰巨的任务,即使是经验丰富的WEB前端技术开发工程师也是如此。

例如,我们在web前端开发中不可避免的工作有:

网页字体的选择,网站配色,各种Form的设计,用于”编辑,调试和监测的CSS ,
HTML和JavaScript”的工具,DIV+CSS网页布局的设计,不同浏览器中兼容性的调试,负荷测试等等。

还有您必须确定目前的趋势和标准,并确定如何将其纳入您的设计中。
幸运的是,有许多免费的Web开发工具来辅助我们开发出更符合趋势和标准的网页。

我今天就向大家推介20个帮助我们进行WEB开发的工具。

“20 Tools to Make the Life of a Web Developer Easier”

Typetester

Typetester是一个在线生成文本排版样式。如何比较不同的字体和字体属性将出现在一组给定的文本中的不同视觉效果。我们把调整好文本排版样式,生成可用的CSS样式代码。
其主要作用是使web前端设计师生活更轻松,使他们能够快速,方便地在同一页面上比较不同的字体视觉,太方便了。

pForm

创建一个PHP的Form 只需几秒钟内。只需3步,第一步:选择颜色,第二步:设计您的Form ,第三步:下载HTML 。这是一个自由和易于使用的工具。
如果您觉的免费版的功能不能满足您,那就付费吧!

ColourLoversColourLovers 中文版

创造性的启发性的颜色爱好者网站。您可以根据你搜索的网站进行调色。你可以使用的网站上现有的项目或创建新的调色板并与同行交流和评价。伟大的灵感或批判的设计理念。

Firebug

Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。Firebug从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。这可能是一个使用最广泛Web开发工具。

HTML Entity Character Lookup

在您的网页上如何显示特殊的符号,并且是HTML Entity 形式的,我们只需搜索就能找到相匹配的的HTML实体。例如,
在字母“ C ”将匹配 © 和¢实体,正如你所看到的一样。

960 Grid System

The 960 Grid System is 960网格系统是为了简化Web开发工作流程,之所以叫960,就是说模板的宽度是960像素。而之所以用960像素来做为标 准,是因为960像素宽具有高度的灵活性,它可以按2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320和480来进行划分。请看实例
Watch an in depth screencast on this framework.

Em Calculator

Em Calculator is 一个用JavaScript编写的字高(EM)和像素(PX)换算的小工具,它可以让您输入一个像素大小并显示相应的字高大小。这个工具非常易于使用和便捷的快速参考。

Browser Shots

浏览器快照,您可以查看您网站中的约100名不同的浏览器的4种不同的平台上的支持情况,以确定最终的跨浏览器的支持情况。鉴于今天有许多不同类型的操作系统的存在,重要的是要确保您的网站能被更多最好的的平台所支持成为可能。

Icon Finder

Icon Finder图标搜索为您提供高质量的图标,为Web设计者和开发者在短的时间内提供一个合适的Icon,是一种简单而有效的方式。您只需键入一个关键字到搜索框中,就能找到您所需要的美丽图标,您可以自由使用。

WhatTheFont

想知道你最喜欢的字体应该什么的样的吗,只要上载带有字的图片,此工具将尽最大努力实现与之匹敌的字型。

MeasureIt

MeasureIt – 网页元素尺寸随意量,伟大的Firefox的插件,可以让您抽出一把尺子在任何内容网页上,获得像素的宽度和高度。

ColorZilla

利用ColorZilla您可以从浏览器中的任一点读取色彩值,快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。

Pingdom

Pingdom tools,是一项免费的线上服务,可让让测试你的网站加载速度,你只需要输入你的网址,就可以轻松得到一份有关你的网站加载的详细资料,包括图片, CSS, Javascripts, flash和RSS等。

Test Everything

Test Everything是一个功能超级强大的在线站长工具箱,将100多种(准确的说是128种)在线检验服务整合到了一起。
测试项目非常全面,包括 CSS / HTML 验证,SEO 工具,社会化服务,Web 代理等等,似乎除了网页开发者的性别,都包含在内了。网页设计和开发者们可以去看看,视觉效果不错。

CSS Sprite Generator

CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数. 多个图片将以一定间距合并为一个大图片文件. 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置。

这一技术可有效提升网站性能, 尤其是网页上有众多小图片时, 如许多菜单栏图标. Yahoo! 首页是使用此技术的一个实例。

Web Developer Toolbar

一个非常有用的Firefox插件提供了很多工具,网页开发人员使用的日常。大快速验证XHTML或检查HTTP头信息。
想了解更多请看
Web Developer Toolbar 10個鮮為人知的功能

Domainr

如果你认为Del.icio.us这种域名很有美感,而且你正在域名上寻找创意,那好,Domainr绝对适合你。

这个网站会把我们的输入变成非.com非.net非.org的域名,或者把其中的一部分变成目录名称,这些后缀一般都是不常见的国别TLD,总之目的就是把地址变的非常极客。

Font Burner

字体燃烧器是一个免费的在线工具,让您可以搜索超过1000字体我们所拥有。一旦你找到了你喜欢的字体,该工具会为您提供了一小段代码,让您使用的字体在您的网站上,免费的。 字体然后将每部电脑上显示,无论如果用户已经安装的字体或没有。

Smush.It

Smush.It 这是一个在线批量压缩图片工具,支持批量压缩图片,在无损图片质量的前提下达到图片大小的最优化压缩。用户可以从本地上传图片,也可以输入图片所在的URL地址进行压缩,压缩完毕之后下载zip格式压缩包,解压后便可以使用图片了。

Load Impact

Load Impact 是一个免费的工具,测试您的网站在不同负荷水平,然后将结果生成不难理解的图表。只需要输入网址进行测试,其便可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片,javascript, CSS等代码载入。可以在右侧列表选择不同文件来同时对比最多三个对象的加载数据,并生成图表显示,方便网站设计者来分析。

The End!

希望你发现一些更有用的清单。这绝不是一份详尽的清单,但只是一份工具清单。但我希望它能帮助你减轻繁重的web前端技术开发。

站点统计