7款超強大的線上UI 設計工具

資料出處:SR網頁設計工作室 http://yesdesigning.com/thread-117-1-1.html

（1）JETSTRAP (網頁製作)
官網:https://jetstrap.com/  (DEMO影片)

 Jetstrap是一款線上網站編輯製作工具，它提供了線上設計面板、工具箱（內建非常多不同用途模組），使用方法很簡單，不需要撰寫艱深的html與css語法也可以輕易完成一個美觀簡約的網站版型。

（2）UI Parade (素材製作)
官網:http://livetools.uiparade.com/index.html
 UI Parade工具是一組免費的在線設計的應用程序，讓您輕鬆地創建自己的UI元素，並且生成CSS 或html,非常小的編碼知識。以及能夠創建自定義的元素，你也可以下載你的作品在您的網站和網絡應用的使用。

（3）Moqups (框線圖製作)
官網:https://moqups.com/ (建議使用GOOGLE瀏覽器,第一次使用請先點擊左上角 install )
 Moqups 是一款以HTML5撰寫用來設計WEB框架、模型框線或是UI概念的線上服務，它內建了超過60套手繪的SVG模板及特性 ! Moqups的所有物件皆已模組化，使用者只需要自由拉動拖曳組合排列，即可完成一款精緻的線框UI設計圖。


（4）FLUID UI (應用程式模型製作)
官網:https://www.fluidui.com/editor/live/
 Fluid UI 是一款可以跨平台、跨設備開發應用程序設計模型的網頁應用程序。用戶可以在運行HTML5的瀏覽器上使用（當前僅支持Chrome和Safari），可以在Windows、Mac、Linux系統上僅向操作，對平台沒有限制，幾分鐘就可以輕輕鬆鬆進行應用程序原型設計。

（5）Draw IO (圖表製作)
官網:https://www.draw.io/
 Draw IO是一款在線圖表編輯工具，可以直接連結Google Drive，線上畫好的圖表可直接存在Google Drive上非常實用！
 而圖檔匯出格式支援 PNG、GIF、JPG、PDF、SVG、XML等格式類型，同時內建相當豐富的圖像元件，足夠應付一般辦公需求的圖表製作，最重要的一點就是完整支援中文輸入。

（6）COLOR.HAILPIXEL (顏色調配)
官網:http://color.hailpixel.com/
 COLOR.HAILPIXEL是一款非常有趣HTML5製作的線上配色工具，可以幫助我們進行顏色搭配試驗，一目瞭然地做各種顏色搭配與預覽。可透過在線調節工具自由調整明亮度、飽和度、色調等等，並且提供顏色代碼方便使用者做紀錄與利用。

（7）Mobile Patterns (手機介面資料庫)
官網:http://www.mobile-patterns.com/
 Mobile Patterns它是一款分享各種手機介面設計的影像資料庫，網站中根據各種手機頁面類型進行分類，提供設計師在設計手機界面時一個非常好的思維參考，給予設計師一個思考與創造的泉源。

電子書規範

草稿

電子書 Publisher 採用HTML5開發，使用者只要在 Webkit 引擎的瀏覽器〈如Chrome、Safari〉上即可操作 電子書Publisher 所有功能，同時也具備跨系統平台特性。

FreeMarker在eclipse中的入門例子

原文出處: FreeMarker在eclipse中的入门例子  -hailang的空间

在我刚接触FreeMarker时，只是简单的了解FreeMarker的一些概念及工作原理，至于如何使用FreeMarker还不是非常清楚。随着学习的深入，才渐渐对FreeMarker有了更深入的理解。本文将从基础应用着手，以eclipse开发环境为主，分享一个FreeMarker用例的开发经验。

一、在eclipse中创建FreeMarker模板
在FreeMarker中模板的概念就是：包含一些由${…}包围的特殊代码的文件。这些特殊代码是FreeMaker指令。
FreeMarker 模板以ftl后缀命名 如本文所示的：
user.ftl
${user.userName}
${user.userPassword}

二、在eclipse中创建FreeMarker数据模型
FreeMarker数据模型：存在于计算机内存中的一种结构，由开发人员创建，向模板提供信息。
注意：FreeMarker数据模型不是文本文件。FreeMarker的数据模型是树状结构的。
如本文所示的：
User.java
  public class User{
 private userName;
 private userPassword;

    …（省略getter setter方法）
}
User对象的树状模型如：
（root）
  |+-user
    |+-userName=“张三”
　　　　|+-userPassword=“123”　　　
 要访问user对象的userName属性,可以通过点操作符号如：user.userName

三、在eclipse中填充FreeMarker数据模型
FreeMarker的根对象使用Map建立的。将创建好的User对象已键-值对得形式封装到Map中如：
 Map<?,?> root=new HashMap<?,?>();
 root.put(“user”,user);

  至此,我们在eclipse中已经完成了大部分的前期准备工作。
FreeMarker工作原理中讲到： 数据+模型=输出，那么我们该如何获得想要的结果呢。
也许你已经想到了，创建FreeMarker的模板引擎，解析模板。步骤如下：
1.创建和配置Configuration对象，Configuration对象实例负责管理FreeMarker模板的路径加载及模板的创建和缓存。通常应用程序的生命周期中只会创建一个Configuration实例。
Configuration config=new Configuration();
config.setDirectoryForTemplateLoading(new File(“templates”));
config.setObjectWrapper(new DefaultObjectWraaper());

2.获取模板实例，即通过Configuration实例获取Template实例，调用getTemplate()方法。
Template template=config.getTemplate(templateName);

3.合并数据模型和模板
通过调用Template实例的process()方法合并数据模型和模板，方法接受一个数据模型的根和一个writer作为参数，将结果输出到Writer。 为简化起见，本例输出到控制台
Writer out=new OutputStreamWriter(System.out);
template.process(root , out);
out.flush();
out.close();
好了，通过上面的讲解，您已经对FreeMarker的应用有了一定的了解。现在开始我们就来创建属于自己的Freemarker用例吧
本例的开发环境： Eclipse3.2+MyEclipse6.0+JDK5.0+FreeMarker
1)在在eclipse中建立一个web工程：freeMakerTest
2)下载FreeMaker工具包,解压后，在lib目录下拷贝freemark.jar到freeMakerTest工程下的lib目录中。
　下载地址：http://www.freemarker.org/index.html
3)在在eclipse中的src目录下创建如下图所示的目录结构：



templates文件夹存放user.ftl文件。
test/frrmrker/uitl/文件夹下存放Freemarker模板引擎 FreeMarkertUtil.java。
test/client文件夹下存放客户端测试类 ClientTest.java ,User.java
4)在eclipse中编写user.ftl文件，FreeMarkertUtil.java, ClientTest.java ,User.java

源文件的具体内容我已经上传，您可以下载后查看。

希望通过本文，对刚开始或即将开始用eclipse展开FreeMarker旅程的朋友有所帮助。

推荐文章: FreeMarker的优点和缺点 

FreeMarker的優點和缺點

FreeMarker的優點和缺點

原文出處:  FreeMarker的优点和缺点  (  hailang的空间 )

一、 FreeMarker简介
FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。
所谓模板，就是一份已经写好了基本内容，有着固定格式的文档，其中空出或者用占位符标识的内容，由使用者来填充，不同的使用者给出的数据是不同的。在模板中的占位符，在模板运行时，由模板引擎来解析模板，并采用动态数据替换占位符部分的内容。
FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成XML，JSP或Java 文等。

二、 FreeMarker的优点和缺点(一) FreeMarker的优点
1.使用FreeMarker的优点之一，可以彻底的分离表现层和业务逻辑。
使用JSP 开发过程中在页面中大量的存在业务逻辑的代码，使得页面内容凌乱，在后期大量的修改维护过程中就变得非常困难。
FreeMarker根本不支持Java脚本代码。
FreeMarker的原理就是：模板+数据模型=输出 ，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。用户最终看到的输出是模板和数据模型合并后创建的。
     
2.使用FreeMarker的优点之二，可以提高开发效率。
在我们以往的开发中，使用的都是JSP 页面来展示数据的，即所谓的表现层。我们都知道，JSP在第一次执行的时候需要转换成Servlet类，开发阶段进行功能调适时，需要频繁的修改JSP，每次修改都要编译和转换，那么试想一天中我们浪费在程序编译的时间有多少。相对于JSP来说，FreeMarker模板技术不存在编译和转换的问题，所以就不会存在上述问题。而且开发过程中，我们在不必在等待界面设计开发人员完成页面原形后，我们再来开发程序。

3.使用FreeMarker的优点之三，使得开发过程中的人员分工更加明确。
以往用JSP展现数据时，作为程序员的我们，并不熟悉界面设计技术，反之界面开发人员，也并不熟悉程序语言。对两者而言，交替性的工作本身就有难度。有时候稍有不慎，可能会将某个页面元素删除或去掉了某个程序符号，使得页面走样或程序错误，这样就需要双方相互沟通协作，解决出现的问题。有时候因为项目中的时间，任务量等因素的存在，可能这个工作就由一个人来完成，这样就可能加大某一方开发人员的工作量。
使用FreeMarker后，作为界面开发人员，只专心创建HTML文件、图像以及Web页面的其他可视化方面，不用理会数据；而程序开发人员则专注于系统实现，负责为页面准备要显示的数据。

(二)FreeMarker的缺点1.使用FreeMarker的缺点之一，应用FreeMarker模板技术，在修改模板后，可能会看到已经过期的数据。如：生成静态的HTML页面后，如果一旦模板改变，而没有及时更新模板生成的HTML页面的话，用户看到的就是过期的数据。
2.使用FreeMarker的缺点之二，FreeMarker模板技术在应用过程中，FreeMarker中的变量必须要赋值，如果不赋值，那么就会抛出异常。想避免错误就要应用if/elseif/else 指令进行判段，如果对每一个变量都判断的话，那么则反而增加了编程的麻烦。
3.使用FreeMarker的缺点之三，FreeMarker的map限定key必须是string，其他数据类型无法操作
4.使用FreeMarker的缺点之四，FreeMarker不支持集群应用。为了编成的方便性，把序列化的东西都放到了Session中，如Session，request等，在开发的过程中确实方便，但如果将应用放到集群中，就会出现错误。

推荐文章:FreeMarker在eclipse中的入门例子