• 给设计师和开发者提供的 50 个web开发免费在线工具
    时间:2011-12-31   作者:smashinghub.com   出处:oschina.net

    设计和维护一个网站并不是一件很容易的事情,他需要花费很多的时间,这就是设计师和开发人员为什么经常去搜寻各种工具来帮助他们提高工作效率。其中网络上有很多相关工具,但是并不是所有的工具都是那么好用。所以今天我们总结了一个工具列表,这将会为设计师和开发工程师非常有用。如果您还有更好的工具,请提出建议,我们也将此呈现给广大设计师们。

    Logotype Maker


    Logotype Maker

    Logotype Maker 是一个简单而且免费的 Logo 制作工具,可以通过简单的几步来创建一个 logo


    BgPatterns


    BgPatterns

    该工具让你轻松设计各种背景图效果


    FreshGenerator


    FreshGenerator

    用来创建在多数 Web 2.0 网站中使用的图形元素


    Bannersketch


    Bannersketch

    这是一个用来创建广告元素的网站,无需设计知识,可创建 banner 图、headers、footers、名片等。


    Businesscardland


    Businesscardland

    如果网站的名称所示,这是一个用来创建可打印的名片的网站,可输出PDF文档并打印成名片。


    Golden Ratio


    Golden Ratio

    一个计算器,用于计算宽度匹配的列


    SpiderScribe


    SpiderScribe

    这个工具太专业了,用来组织你的思维,类似思维导图工具,而且还可以跟别人分享。


    Manifested


    Manifested

    该工具可以让你将现有网站转成支持离线的 HTML5 网站,可缓存的包括图片、样式和脚本文件。


    repl.it


    repl-it

    这是一个在线社区,用于编程语言知识交流,提供一个终端模拟器和代码编辑器,超过15中语言的解释引擎,完全基于 JavaScript 编写,可在桌面和手机以及平板上使用。


    Subtle Patterns


    Subtle Patterns

    在这里你可以找到一个伟大的收集93个高品质的设计模式,您可以自由使用。


    Timeslot


    Timeslot

    这是一个让你轻松制定每天计划的工具


    LayerStyles


    LayerStyles

    LayerStyles 是一个很棒的图形编辑器,运行在浏览器之上。可为你制作的效果生成 CSS 代码


    The Web Font Combinator


    The Web Font Combinator

    这个工具的目的是让您预览Web字体的组合。许多印刷字体的例子集合,可为读者结合起来,以查看如何标题和正文字体一起来看一下。

    Grid Calculator And Generator

    Grid Calculator And Generator

    这是一个非常方便的网格计算器。所有你所要做的的是输入您希望您的页面列和排水沟宽度大致范围,然后计算器会显示你所设置的范围内的所有可能的组合的宽度。为您提供了一个非常好的结果的可视化表示。点击它会允许预览,你会得到一个如何可用于网格更好的介绍。选择您的网格配置后,下载在您的项目中使用一个CSS文件的配置是可能的。


    CSS3 Shapes


    CSS3 Shapes

    CSS3 Shapes 是一个很酷的 CSS3 代码片段源网站,你可以找到很多CSS3的代码


    FontFont Subsetter


    FontFont Subsetter

    该工具可让你通过简单的 3 步来完成 Web 字体的优化和定制,也可以用来减小 Web 字体文件的大小。


    WhatFont Tool


    WhatFont Tool

    这个工具用来提供字体相关信息,当你把鼠标移到文字上方后会显示这些信息。支持 Typekit and Google Font API.


    Cssizer


    Cssizer

    这是一个方便的工具,允许编辑一个HTML页面。然后你可以使用你的网址,与他人分享您的设计。


    Clickable Mockups


    Clickable Mockups

    这个工具使用一种改良的方式来传达您的设计。它将您的网站,移动和软件实体模型转换成可点击的原型。然后你可以从你的客户,朋友和同事的批注和反馈。你不再需要以电子邮件,PDF文件,希望获得通过的消息的线程反馈。


    CSS Pivot


    CSS Pivot

    你可以在这个网站上增加 CSS 样式,并通过一个短网址来分享你的设计


    Prefixr


    Prefixr

    Prefixr update CSS3 properties al by itself with all the necessary browser prefixes.


    CoderDeck


    CoderDeck

    这个工具可以用来创建交互式的在线编码展示


    Patternizer


    Patternizer

    As the name suggests, this one is an extremely handy stripe pattern generator.


    alphaPun.ch


    alphaPun-ch

    此工具将决定你的PNG或GIF照片的不透明部分。然后,它会穿透alpha通道(即透明位),所以你会对它背后的东西点击的能力。


    Swiffy


    Swiffy

    该工具可将 Flash 的 SWF 文件转成 HTML5


    Spur


    Spur

    This one is a very handy critique for web designs. Simply paste a URL (or upload a photo) and and you would be able to utilize 7 amazing tools to help you determine what is working and what is not.


    Screenfly


    Screenfly

    该工具帮你模拟各种不同尺寸屏幕访问你的网站的效果。


    Launch It Now


    Launch It Now

    快速创建产品展示页的工具


    Minify and GZip Compress JavaScript & CSS tool


    Minify and GZip Compress JavaScript & CSS tool

    用于最小化并压缩 css 和 js 文件的工具,只需简单点击。


    DropMySite


    DropMySite

    网站自动备份工具,你拥有2G的空间。

    站长工具


    Smartling


    Smartling


    轻松实现网站多语言支持


    SnatchCode


    SnatchCode

    很棒的网站备份解决方案


    Duda Mobile


    Duda Mobile

    可轻松创建和网站同步的手机版本


    Toolspot


    Toolspot

    Toolspot 包含很多站长经常需要用到的工具,例如域名查询、IP查询、whois 等等


    W3Clove


    W3Clove

    在线网页的校验工具

    表格、图表以及流程图


    Cacoo


    Cacoo

    在线的图形绘制工具,可创建各种图形,包括网站地图、线框图、UML 和网络图


    LucidChart


    LucidChart

    流程图绘制工具,可免费拥有5兆的存储空间


    Bubbl


    Bubbl

    在线创建 vivid 思维图,可与好友分享


    Grapher


    Grapher

    图表工具


    Hohli Charts


    Hohli Charts

    动态图表工具

    开发者工具栏


    About.com Find By Error Message


    About-com Find By Error Message

    About.com 上提供的服务,让你查询电脑上一些常见的错误


    ErrorHelp


    ErrorHelp

    错误查询库


    ErrMsg


    ErrMsg

    ErrMsg 是一个桌面工具,用来查询错误码对应的意思。


    ErrorKey


    ErrorKey

    This one is an awesome website that boasts a huge collection of error codes. It has a simple user interface, so searching for error codes is not at all tough. Common error search tags/keywords have also been listed on the main page, so you can find most common error messages and categories there.


    Error Goblin


    Error Goblin

    This one is similar to Error Key but it also boasts Mac OS errors. Both Windows and Mac error code searches are possible. It also has an iPhone app. Quite good!


    Page Speed Online


    Page Speed Online

    This tool analyzes the content of a web page, then offers suggestions to make that page faster. It can prove to be really useful as reducing page load times can reduce bounce rates and make your website desirable for visitors.


    Pingdom Tools Full page Test


    Pingdom Tools Full page Test

    网页速度跟踪工具,类似 firebug


    BrowserMob’s Free Instant Test


    BrowserMob’s Free Instant Test

    网站性能诊断工具


    GTmetrix


    GTmetrix

    网站性能测试工具


    Slowcop


    Slowcop

    Slowcop 可以让你检查为什么网页很慢,慢在哪里,类似 firebug 工具。

    译自: smashinghub

    网友留言/评论

    我要留言/评论

    相关文章

    2012年开发者该做的11件事:2011年即将结束,2012正在靠近。你是否在专业领域给自己设定2012的目标?不管你的答案如何,我相信下面列出的11条建议里面总有一两条适合你 :)
    【iShout】Metro UI 的简洁是另一种复杂:Metro UI 推出来的时候,对比其他系统的图标海洋,确实让人眼前一亮,活动格窗取代图标,内容取代形式,微软的宣言是让智能手机用户有更高的效率得处理事务,而不是专注于智能手机本身。但果真如此吗?在我看来,Metro UI 设计得的最初目的是简洁,最后产生的结果却不一定是简洁。
    网络开发新项目阶段总结:摘取人人网上某位高人的针对新项目做的总结,全文如下:
    在windows查看端口占用情况方法介绍:通常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,这时大家可能会到网站找个软件什么的,或则使用防火墙来查看使用的端口;其实没有这个必要,在windows中有个dos命令可以查看当前端口使用情况,下面就介绍一种非常简单的方法,希望对大家有用 。
    短网址算法PHP实例详细介绍:自从twitter推出短网址(shorturl),继之国内各大微博跟风,google公开goo.gl使用API,短网址之风愈演愈烈.不得不说这是一个新兴又一大热门web2.0服务.现整理一下,包括完整短网址网站,短网址算法原理,算法举例,以及优劣比较,同时还介绍几个phper个人实现的.
    MyEclipse快捷键使用详细介绍:Eclipse是一款非常受欢迎的java开发工具,使国内的用户越来越多,熟悉快捷键将会使你的编程工作得心应手,请看下面的分类详细介绍。
    免费的Android UI库及组件推荐:短短数年时间Android平台就已经形成了一个庞大而活跃的开发者社区。许多社区开发的项目业已进入成熟阶段,甚至可以用于商业的软件生产中,且不用担心质量问题。
    网站运营数据分析的指标和算法介绍:网站运营过程中针对网站的数据分析,已经成了每个网站策划和网站运营人员,每天的必备功课,通过这些数据指标可以帮助我们准确的抓住用户动向和网站的实际状况。其实根据网站类型的不同则分析所采用指标项也各有不同,可以有许多不同的指标来衡量。但是如何衡量网站运营的数据指标,哪些是网站运营的关键指标,是每个新人感到困惑。其实通常来说网站分析指标有内容指标和商业指标,内容指标指的是衡量访问者的活动的指标,商业指标是指衡量访问者活动转化为商业利润的指标。为了获得这些数据,我们可以使用51啦,GOOGLE分析工具来得到部分信息,但是为了更加精准的获得某些网站运营时的关键数据,则在网站策划和网站规划阶段时,需要充分将这部分内容考虑进去,对网站做些指标参数的设定,这样就可以降低网站的重复开发工作。
    20条编程经验:作者乔纳森·丹尼可(Jonathan Danylko)是一位自由职业的web架构师和程序员,编程经验已超过20年,涉足领域有电子商务、生物技术、房地产、医疗、保险和公用事业。正如乔纳森在文中所言,本文适合刚毕业的大学生和刚入门的程序员。如果你已是高级开发人员,或许你能在本文中看到自己的身影。
    Lazy Load, 延迟加载图片的 jQuery 插件:本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.