Tagged

工具

A collection of 12 posts

LESS

LESS/Sass/CoffeeScript编译工具推荐 - Koala

越来越多的同学开始使用less/sass等预处理器的方式来编写CSS与JavaScript,很大程度上提高了工作效果,但编译文件是个繁琐的事情,使用命令行的方式操作起来很累,目前也已经有一些图形工具,比如mac下的codekit, windows下有winLess、simpless等。Codekit是一个很棒的工具,它是一个商业的软件且只有Mac版本。而windows下现有的工具都比较简陋,无法满足我们日常开发需求。 今天向大家推荐一个新工具Koala,功能齐全,跨平台运行,同时还是一个开源软件。 Koala是什么? koala是一个前端预处理器语言图形编译工具,目前已支持Less、Sass、Compass、CoffeeScript。 下载地址:http://koala-app.com/index-zh.html 功能特性: 多语言支持:支持less、sass、coffeescript、compass framework; 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作; 编译选项:支持自定义设置各个语言的编译选项; Import文件监听:关联import文件,如import文件改变,源文件将自动进行编译。 代码压缩:less &

书签

20款超棒的响应式设计测试书签应用

2013年注定了响应式设计流行,它是网站设计的新的方向,从去年开始越来越多的网站开始使用响应式的设计理念,它能够帮助你开发一套界面并且能运行在所有不同分辨率的设备上,包括,PC,平板,或者移动手机。今天我们继续推荐给大家5款书签类型的测试工具,你可以方便的添加到你的书签中,并且在测试响应式网站的时候方便的使用。 Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 (portrait | landscape) 支持Media query 自适应Meta的viewport设置 手动重新加载页面 移除页面工具栏 Viewport相关信息显示 (尺寸,分辨率,横纵屏,user agent) 支持触摸设备 支持vector Resizer 这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展! Bricss 另外一个方便的测试响应式的书签,你可以自己指定自己的几套显示窗口的尺寸。 Responsinator 这个工具提供了仿真的web界面来测试你的响应式设计,不过呢,只是界面外面套了一个设备的壳子图片,如果你想查看实际的设备展示情况,还是应该使用真实的设备。同时,提供了一个书签,你可以方便的添加到浏览器中。 ish

css3

iAnimator-CSS3动画制作工具

基于CSS3的动画越来越火爆,各大网站都开始尝试使用CSS3来达到更炫的用户体验,Google的logo也一次次吸引着大家的眼球,但光鲜的CSS3动画后面,可能是前端攻城师不断修改查看修改查看反复的一个过程,对时间、位置的精确把控,意味着巨大的工作量,于是,iAnimator来了! 简介 动画制作软件一般为本地客户端软件,如Sencha Animator 、EDGE等,功能非常强大,但是生成的代码过于庞大臃肿,并且收费,而iAnimator采用WEB方式来实现可视化的CSS3动画制作,轻巧、快速,可扩展性强 基于iAnimator制作动画,因为可视化,及预置的特效,及众多属性面板,可以大大提高动画制作的精确性,减轻前端开发人员工作量 体验 http://ianimator.kundy.net/ 主界面 特色 1. 批量上传图片素材 2. 丰富的属性面板 3. 图层、帧的灵活控制 4. 可视化图层编辑 5. 丰富的特效库 6. 快速预览 7. 快速集成

工具

滚动视差网站工具与教程

滚动视差绝对是今年最炫的设计风格,也是最近的设计趋势,之前我们分享了《60多个超炫的视差滚动效果网站设计欣赏》相信让很多人都耳目一新,现在整理几个比较不错的开源滚动视差项目,它们大都托管在github上,大家可以用在自己的项目中,当然,从中获取灵感自己开发会更好~~ Scrollorama curtain.js jQuery-Parallax stellar.js jparallax Skrollr Parallax.js A Simple Parallax Scrolling Technique via Nettuts+ 恩,先就这些,如果你有发现其它关于滚动视差的开源项目或实现教程,欢迎与我们分享。 整理自:http://webdesignledger.com/tools/parallax-tools-and-techniques 中文原文:滚动视差网站工具与教程 请尊重版权,转载请注明来源,多谢~~

优化

前端压缩工具Yabo——鸭脖

嗯,介绍一下大猫老湿最近的作品——鸭脖(Yabo)。 鸭脖主要用于自动合并压缩样式文件并自动为外部资源如图片等添加时间戳——时间戳是把双刃剑,设定文件的客户端缓存但不小心也会让客户端页面乱掉~~ 主要功能: 无需单独的合并列表文件,直接读取 CSS 里的 @import 文件合并 合并后自动调用 YUI Compressor 进行压缩,filename.source.css 进去 出来 filename.css || filename.css 进去 出来 filename.min.css 给图片加时间戳, 包含关键词 Yabo_img_timestamp_off 来关闭此功能 给文件结尾加时间戳 安装 下载 Yabo 编辑器里配置外部工具,这里用 Intellij IDEA 举例,当然同样适用于 PHPStorm

优化

网站性能优化工具大全

网站性能优化(WPO)已经成为一个非常重要的话题了,越来越多的互联网公司开始有WPO的职位,而相关技能也是对前端开发工程师的重要技术要求之一。国外大牛Steve Souders在参加WebPerfDays London期间,收集了大量常用的网站性能优化工具,这里和大家分享下。 常用的网站性能优化工具: WebPagetest Cuzillion Chrome Dev Tools Speed Tracer Performance Analyzer (收费) SPOF-O-Matic, 3PO for YSlow Wireshark PageSpeed, YSlow HttpFox dynaTrace Ajax Edition 和 SpeedoftheWeb HTTP Archive 关键路径浏览—— PageSpeed Insights的一部分 PhantomJS 移动设备同步调试:Weinre, jsconsole.com, Opera Dragonfly, Chrome for Android Apache

cssgaga

CssGaga:前端开发和部署利器

涛哥@ytzong 开发的cssgaga用了好久,确实是个好工具,早想把它推荐给大家用了。今天就做个简介,涛哥网站有详细的介绍,这里不多说。 CssGaga有多好? 直接引用涛哥的话吧: (工作量)一般都能减少20%以上吧,没怎么统计。一个极端的例子:某人使用了CssGaga后从原来早9点到晚11点下班,午休都在做到现在晚5点半下班,中午还能看一部完整电影 (via twitter) CssGaga到底是什么 CssGaGa是一个前端开发和部署的工具,它可以简化我们的开发流程,将主要精力放在页面的实现中,而不用花太多的时间在处理图片、压缩文件、转换DataURL等耗时的琐事上,更不用浪费时间在文件部署上,用CssGaGa可以完全自动化的将文件部署到测试服务器上。 CssGaga包含很多功能,99css.com有各个功能的详细介绍,我这里不多介绍,详情请移步CssGaga – 帮助索引: PPT及功能演示视频 运行环境/下载/配置 css压缩 css合并 css优化 生成DataURI 抽取图片 下载远程css文件 图片压缩 自动同步文件 哀悼日网站一键变灰 皮肤1toN AutoSprite(

优化

12个对网页设计师非常有用的图片优化工具

原文:12个对网页设计师非常有用的图片优化工具 译自:12 Really Useful Image Optimization Tools For Web Designers 请尊重文章的版权,转载请注明出处,多谢! 图片非常重要,它们可以让你的页面更好看,更引人注目。但是,高质量和漂亮的图片常常会很大,它们会让页面加载变慢并消耗更多带宽。所以我们,这些设计师应该优化图片以使其体积更小但质量更高! 事实上有很多有用的图片优化工具,它们可以帮助我们优化并减小图片的文件尺寸。这些有用的应用包括web应用和桌面应用。 基于web的图片优化工具 1. Smush.it Smush.it是一个很流行的图片优化工具,它可以既减小图形文件的大小又能保持其质量,也就是我们称之为“无损(lossless)”图片压缩!你可以通过网站来运行Smush.it (一次最多5张图片)或者通过Firefox的YSlow扩展。 2. Dynamic Drive在线图片优化器 该在线图片优化器允许你优化不同的文件格式,比如GIF、JPG和PNG。你既可以从本机上传图片,也可以像Smush.it那样粘贴图片的URL。

css 框架

132 个 Web 设计工具(上)

这是 Mashable 搜集的 130 个 Web 设计工具,涵盖了从初学者到高级 Web 设计人员需要的各种工具和资源。这是第一部分。同时请参阅 Web 开发工具箱:120个 Web 开发工具的第一,第二部分。 本文在翻译原文的基础上,又添加了两个工具。初学者资源 YAML Builder 简单易用的 YAML (Yet Another Multicolumn Layout – 做栏布局)XHTML/CSS 站点布局。(事实上,YAML是一个非常著名的CSS框架) YUI Builder – Made by Yahoo,是YUI框架的一部分,类似于YAML,可以在线生成网页的CSS结构框架。 Sky CSS Tool – JavaScript CSS 工具 The

工具

Web 开发工具箱:120个 Web 开发工具(下)

这是 Mashable 搜集的最新 Web 开发工具箱,包括拖放式 Web 程序创建工具,代码库,项目管理,测试程序,以及支持各种编程语言的框架,从 Ajax 到 Ruby 到 Python。这是第二部分。 参考与资料 COfundOS – 一个讨论开源软件,寻找投资的平台。 Mac Yenta – 独立 Mac 开发者的社会化网络平台 CorkDump – 一个关于常用资源(代码片段,CSS,Flash 等)讨论板。 All Developers Network – 开发者社会化网络 CodePlex – 来自微软的开源项目托管站点 UnmatchList – 开发设计者的资源库 developerAnalytics – 社会媒体评价与报告,帮助你发现有潜力的社会媒体应用。 CollabFinder – 一个供开发设计者协同工作的地方。 测试,监控,

工具

Web 开发工具箱:120个 Web 开发工具(上)

这是 Mashable 搜集的最新 Web 开发工具箱,包括拖放式 Web 程序创建工具,代码库,项目管理,测试程序,以及支持各种编程语言的框架,从 Ajax 到 Ruby 到 Python。这是第一部分。 Web 程序创建类 DreamFace – 一个用来创建个性化 Web 程序的框架。 Organic Incentive – 以拖放式界面创建 Web 饰件 dbFLEX – 商务程序开发平台。 app2you – 在线创建与定制 Web 程序。 Qrimp – 一个便宜的数据库平台,基于你周围的数据(如 Excel)创建应用程序。 Lightspoke – 拖放式程序创建工具,动态过滤,排序,真正的关系数据库后台。 Tersus – 可视化程序创建工具,无需编写代码。

免费

11款完全免费的Web设计工具

今天,我将列举11款完全免费并且很有用的基于Web的设计工具,其中的多数可能不是很有名,但是肯定会让你眼睛一亮! 下面就来看看他们吧,如果您了解多正在使用更多更好的Web设计工具,欢迎分享。 1. splashup splashup 是一款功能强大的图片编辑和管理软件,它基本上具有了所有菜鸟级和专业级设计者所需要的功能,它的界面非常的人性化,并且提供对多图像编辑的支持,虽然功能不如Photoshop(十大Photoshop教程网站)(25张顶级的Photoshop图片)(22张梦幻派photoshop教程级图片)强大,但也提供了对图层,滤镜,选取的支持.如果您要使用splashuo,需要拥有他的账户。 2. ResizR ResizR 是一款漂亮,免费并且很有用的小助手,它允许你自由的缩放本地硬盘或Web上的图片,不过目前只支持JPG格式的图片,由于ResizR 每隔 60 分钟会清除之前操作过的图片, 所以不用担心版权问题! 此外ResizR 的网站上还提供了用于Firefox的扩展(13个网页设计必备的Firefox扩展). 3. Adhesiontext Adhesiontext, 一款动态的文本工具, 它能够提供不同语言字符集中同一字符串的不同样式, 对于处于开发早期的字体设计和开发者来说尤其有用. 目前支持的语种有: 英语,法语,德语,西班牙语,