全新理念的Web前端开发方式——AlloyDesigner
来源:互联网 发布:淘宝网页打不开 编辑:程序博客网 时间:2024/05/19 20:37
AlloyDesigner介绍
AlloyDesigner 的创意来自于“临摹”的灵感,使用AlloyDesigner后,你可以把设计稿拖进你的Web页面铺在页面的最底层,然后就可以对着设计稿来构建DOM元素和CSS样式啦,这样子是不是直观了很多?通过AlloyDesigner直观地调整页面,迅速达到与视觉稿一致的目的。
AlloyDesigner的官网:http://alloyteam.github.io/AlloyDesigner/
这样开发出来的页面,妈妈再也不用担心我的页面被设计师走查了^_^,开发效率也大大提高,不再需要边量尺寸,边写页面啦,真正实现所见即所得。同时,AlloyDesigner还提供测距、取色、放缩、CSS助手等最实用的页面构建工具!
AlloyDesigner 重新定义了Web页面构建的模式,页面构建过程中,AlloyDesigner直接嵌入你的Web页面中运行,帮助你精准、高效的构建Web页面的UI!AlloyDesigner 是用 HTML5 开发的、直接嵌入在Web页面中运行的可视化Web构建工具,它可以作为浏览器的插件或与浏览器自带的F12开发工具进行整合,支持Chrome,IE7+等主流浏览器。
AlloyDesigner预计节省您40%的UI开发时间,每天多40%的时间一起喝杯咖啡如何?
如何使用?
AlloyDesigner安装使用方法有3种:
- 安装位Chrome的插件;
- 将AlloyDesigner添加到收藏栏;
- 在html代码中引入AlloyDesigner的js文件:<script src=’alloydesigner.js’ type=’text/javascript’></script>
AlloyDesigner使用指引:启动AlloyDesigner后,首先,将视觉稿图片加入页面,然后用AlloyDesigner将其在页面中拖拽定位,接着用AlloyDesigner提供的测距功能量出每个DOM元素的宽高、margin、padding等,如果需要提取颜色,可以用AlloyDesigner提供的颜色拾取功能进行拾取。
这种开发方法的便利在于,开发者的所有开发结果和修改都是实时的显示在浏览器中的,并且,可以完全摒弃PS类的切片工具,让开发者的环境只在代码编辑器和浏览器之间切换。
AlloyDesigner已经广泛的应用入公司的诸多Web项目的开发,大大提高了开发效率和开发质量。
未来展望
AlloyDesigner同时也方便产品经理、设计师、测试同学进行产品的UI走查,甚至未来可以根据你开发的页面和交互稿的差异程度打一个分数。
未来AlloyDesigner将会加入更多可视化的UI构建工具,比如通过拖拽直接修改DOM尺寸、边距、样式,提高开发效率,做成一个全面的可视化Web开发设计工具,有什么建议和想法就提给我们吧^_Q!
- 全新理念的Web前端开发方式——AlloyDesigner
- AlloyDesigner----来直星星的web前端开发方式
- web 前端MVC理念的核心思想
- 另一种Web前段开发理念—Ext Js
- 权重云,全新的理念架构,一个直接了当快速获取权重的强大云生态——流量兄弟
- 全新web开发框架
- 卓越背后的秘密——全新的工作方式
- TypeScript——Web前端开发的救赎
- TypeScript——Web前端开发的救赎
- web前端开发——AJAX入门
- web前端工程师—开发工具
- Web前端—前端高效开发之“一键切图”教程
- 智能硬件全新开发方式
- 开发的团队理念
- 眼花缭乱的Web前端开发
- web开发的前端框架
- Flash Remoting——全新的网络应用开发模式
- 全新的信息化理念(勤哲Excel服务器)
- eclipse快捷大全
- 日语副词
- ubuntu12.04 mysql安装与配置
- TV陆地与HeightField的转换探讨
- 深入了解android平台的jni(二)
- 全新理念的Web前端开发方式——AlloyDesigner
- Base64编码解码程序(C语言版)
- servlet过滤器使用
- 深入了解android平台的jni(一)
- C# Datatable排序
- 设计模式学习之——六大设计原则之三:依赖倒置原则
- android 关于intent bundle传递 arraylist值 报错java.lang.RuntimeException: Parcel: unable to marshal value
- 第三周作业-循环与判断语句(网络131黄宇倩)
- Android 中数据库查询方法query()中的selectionArgs参数解析