WEB前端开发

收集的一些轻量级非常实用的前端开发小工具：
CSS3相关

1. CSS3样式生成器：http://www.css88.com/tool/css3Preview/
2. CSS3渐变样式生成器，类似Photoshop中的渐变界面：http://www.colorzilla.com/gradient-editor/
3. CSS3动画制作工具Sencha Animator：http://www.sencha.com/products/animator/
4. 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新

Data URI

1. Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/

转码工具

1. unicode转换工具：http://www.css88.com/archives/2093
2. encode转换工具：http://labs.pufen.net/views/convert_encoding.php | http://www.css88.com/tool/encode/convert_encoding.php（2011-05-24更新）

继续阅读：前端开发小工具集合（2011-05-24更新）»

Aptana Studio 3.0.0 beta发布

下载地址：http://aptana.com/products/studio3/download

注意：Aptana Studio 3.0.0 beta下载默认是MAC os的版本，下载windows版本请点击“Customize Your Download”按钮，再选择操作系统，^~^!

前几天一个项目中的页面在Chrome和safari下撑开，Firefox，ie，opera正常，静态页面是OK的，只能找Chrome和safari下的调试工具，safari只有在MAC下有调试工具，而Chrome正式版（目前最新3.0.195.38）只有javascript控制台，css和html虽然也能调试，但是非常的不灵活，

。 继续阅读：【前端开发工具】google Chrome开发人员工具（Chrome Web Developer Tools）»

地址：http://box.linxz.cn
CodeBox主要开发者：Joshua

大家一定还记得小志当年的乱写盒子吧，而现在的代码盒子将是比乱写盒子更优化的存在。目前alpha版本已经发布。完全免费的应用，当您遇到烦恼的浏览器兼容问题的时候，把代码贴上来，仔细描述一下问题，然后复制一下URL发给达人们，很轻松的就将有问题的代码呈现出来。

随后，我们会继续开发，并努力实现以下功能：
a.意见建议提交
b.增加复制链接按钮
c.用户可针对代码进行留言评论（解答），并由作者选出最佳解决方案。
d.增加典型Code列表
e.代码高亮
f.更好的用户体验
意见建议请发送至weilaixu{at}gmail.com or lei17{at}ued.me

JavaScript 压缩工具

这程序是由Mike Hall写的，JavaScript的压缩不是为了保护代码而压缩，而是压缩后的js代码文件可以小一倍甚至多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果非常明显．

使用方法：使用下面的表单,你可以浓缩JavaScript代码.只用将任何脚本代码粘贴到输入的文本框,压下 ‘压缩’ 按钮,那浓缩的版本就出现在 ‘输出’ 里. 然后你可以使用 ‘全选’ 按钮,快速选中’输出’里的代码,剪切粘贴到一个新的源码文件.

使用该工具：http://www.css88.com/tool/ysjs/

JavaScript 格式化工具

1.该工具主要用于将去掉空格的代码或者压缩成一行的格式化，方便阅读，不能将加密过的js还原破解；
2.粘贴你代码到文本区域并点击格式化按钮就可以将代码格式化；支持jQuery，YUI等框架
 
使用该工具：http://www.css88.com/tool/js_beautify/

前不久小志推荐给我一款笔记软件-EverNote，EverNote最大的优点就是免费，小巧，界面干净美观，尤其是数据管理非常方便。

1. 支持的格式：
同一般笔记软件一样，EverNote支持超文本和多种格式文件的记录。可直接将网页，图片，网页，电子邮件，Excel表格，手写笔记等文档复制过来。其特色是还支持了样式模板的记录，像银行账户，购物清单，源代码，To-Do List，联系人和短信等基本样式。而且它还能对电脑中任何文件和目录做出链接记录，这样方便我们规划自己的硬盘文档，同时利用其分类和查找功能来管理文档。比如创建一个电影或者软件的档案库，

继续阅读：前端开发知识库工具之Evernote»

今天看到一个FF图片压缩插件,只要在ff下打开网页，然后点击Smush it，就能对给网页的的图片进行压缩（包括图片和背景），并且输出压缩信息，做重要的是还可以打包下载压缩过的图片，非常实用，强烈推荐！(转载请注明出处：WEB前端开发 http://www.css88.com/)
我的博客图片总体上才压缩了2.47%，但是部分图片被压缩了50%左右，强就一个字！

继续阅读：【FF插件】图片压缩工具Smush it»

Blueprint（官方网站：http://www.blueprintcss.org/） 是一个非常有名的 CSS 框架，它可以让你用很整洁的代码来将页面划分成很复杂的栅格结构（grid）。Blueprint 并没有提供一个可视化的工具来让你生成网格结构的 CSS 代码。

而 Boks 的出现，正好弥补了 Blueprint 没有提供可视化工具的缺憾。

在主界面的格子上拖拽，就可以轻松画出你想要的布局。在下面的面板里，都可以为每一个 DIV 设置 ID，Class 和 HTML 代码等。绘制完成之后，点击 Export 就可以导出为网页文件了。

下面提供一个官方的操作演示视频：

注意，此软件需要下载安装 Adobe Air;

下载Boks：boks-v021；

blueprint–css framework研究 ：http://www.yeeach.com/2007/09/14/blueprint-css-framework/

在这里推荐一些前端开发中可以是你提高开发效率的小工具，既小巧又方便；

一、截图，取色，量尺寸，屏幕录制工具

1.FastStone Capture

主要用途：截图，取色，量尺寸，屏幕录制工具；推荐指数：

FastStone Capture是一款灵活简单的屏幕抓图软件。它可以抓取某个窗口或者对象的图片，也可以全屏或者以矩形模式抓图，甚至可以按照手绘的任意形状抓图。另外它还支持浮动条、热键、调整大小、剪裁、文字注释、打印以及邮件发送等功能。支持包括BMP、JPEG、JPEG 2000、GIF、PNG、PCX、TIFF、WMF、ICO和TGA在内的所有主流图片格式，其独有的光滑和毛刺处理技术让图片更加清晰，提供缩放、旋转、减切、颜色调整功能。只要点点鼠标就能随心抓取屏幕上的任何东西，支持拖放，可以直接从系统、浏览器或其他程序中导入图片，收藏夹功能让你能更好的收集更多精彩图片。(转载请注明出处：WEB前端开发 http://www.css88.com/) 继续阅读：前端开发必备工具之辅助开发工具篇»

不管你做前端开发还是网页重构或者美工，您都要积累知识，总结经验。聪明的您肯定先要一个称心如意的知识库。一个好的知识库能提高你的开发效率，帮你积累知识，总结经验。

CyberArticle 网文快捕是一个保存/管理网页的工具，主要功能有：可以在IE里面保存网页，包括文字，图片，Flash动画等等。也可以保存选中的文字，图片和链接等等；在一个树形孔建里面管理保存下来的网页。可以通过拖放来分类您的网页；在一个可视化的编辑器里面编辑网页；把网页里面的所有元素保存在一个单一文件里面(*.xbook)，保持您的磁盘清洁；可以把保存的网页导出成CHM文件，这样共向您的资料，就会变得非常简单。在这方面，WebCatcher是一个非常实用的电子书制作工具；可以把.xbook文件转换成可执行文件(*.exe)；允许您将所有的网页导出到文件加重。因此您可以复制这些文件到您的PDA上面进行阅读；支持书籍文件的全文检索，您可以快速的找到您的资料；可以很好的保护您的资料。您可以给书籍文件或者节点设置密码。

CyberArticle (网文快捕)使用手册和详细功能(参将官方说明)：http://cn.wizbrother.net/forum-19-1.html

官方完整中文版下载(含帮助和使用教程)：http://wizbrother.net/downloads/ca/5/cyberarticle-5.2-2009-3-19-setup.exe

 购买注册号（官方授权销售）：http://www.css88.com/ca/

从这里购买2用户（电脑）版本的注册号只要25元，适用于5.x/4.x版本，可以永久免费升级。

前端知识库共享QQ群：84793177。