前端入门（1）

Ruby on Rails 初体验 - 王胜

使用命令行快速创建应用的步骤

创建应用程序
```
$rails new hello -d mysql
```
备注这里演示使用mysql作为数据持久层
浏览hello world界面
```
$cd hello
$rake db:create RAILS_ENV='development' // 创建开发数据库
$bin/rails server
```
备注由于这里的rails版本是4.2.1，与msqyl2的最高版本有不兼容行，所以需要手动将Gemfile中mysql2降级。降级之后执行bundle install。
```
gem 'mysql2' -> gem 'mysql2', '~> 0.3.18'
```
使用脚手架，创建模型、数据迁移脚本以及控制器和试图
```
$bin/rails generate scaffold Person name:string age:integer
```

执行数据迁移

$bin/rake db:migrate RAILS_ENV=development

启动应用
```
$bin/rails server
```
浏览效果
```
http://localhost:3000/people
```

备注

此演示项目，ruby、gems和Rails的版本信息如下:

ruby: 2.0.0p481
rubygems: 2.4.5
rails: 4.2.1

参考：

rubyonrails.org

矢量图在Android 上应用 - 王进

VectorDrawable

示例：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        <!--  intrinsic  size  of  the  drawable  -->
        android:height="300dp"
        android:width="300dp"
        <!-- size of the virtual canvas -->
        android:viewportHeight="40"
        android:viewportWidth="40"
        >
        <path android:fillColor="#ff00ff"
                android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z"
                />
</vector>

SVG→Vector

Android并不原生支持读取常见的向量文件格式，如ＳＶＧ
（主要是缺少ｃｓｓ支持），但是支持相同路径数据语法，
所以ＳＶＧ资源需要经过一定的转换；

使用SVG Path Data

M： move to 移动绘制点
L：line to 直线
Z：close 闭合
C：cubic bezier 三次贝塞尔曲线
Q：quatratic bezier 二次贝塞尔曲线
A：ellipse 圆弧

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开

命令详解：

M (x y) 移动到x,y
L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
Z，没有参数，连接起点和终点
C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
Q(x1 y1 x y)，控制点x1,y1，终点x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度，1时取大弧度
sweep-flag 0取逆时针方向，1取顺时针方向

详细参考：http://www.w3.org/TR/SVG11/paths.html#PathData

Icon Font

解决矢量图低版本不兼容问题

详细参考：
1,http://blog.csdn.net/a345017062/article/details/46455745
2,http://blog.csdn.net/goodlixueyong/article/details/41448483

WordPress快速建站 –杨俊构

准备工具

服务器php套件（ Nginx+PHP7.0）： UPUPW绿色服务器
WordPress代码包：wordpress-4.3.1-zh_CN

操作步骤

配置服务器和数据库

解压UPUPW_NP7.0-1511.7z 到本地目录
打开解压包后的upupw.exe配置平台。
输入“S1”开启全部服务
打开地址 http://127.0.0.1/ 会看到UPUPWPHP探针页面
打开地址 http://127.0.0.1/pmd/ 配置mysql数据库（默认用户名密码都是root）
新建数据库，用户名，密码
打开地址 http://127.0.0.1/ 使用数据库连接测试连接数据库是否正常

安装配置wordpress

解压wordpress-4.3.1-zh_CN.zip压缩包
将wordpress文件夹拷贝到UPUPW发布根目录/htdocs文件夹下
打来地址http://127.0.0.1/wordpress，根据开始安装
输入刚才配置的数据库名，用户名，密码，点击提交进行
设置站点标题，后台登陆用户名，后台密码，邮件地址完成安装
再次打开地址http://127.0.0.1/wordpress测试安装完成

WordPress相关资源

推荐主题：威言威语 prower
推荐插件：多说（评论快速提交，文章聚合发布）七牛镜像存储wordpress 插件 youpzt-optimizer（网站优化工具）
NextApp —— 开源的WordPress手机博客 App 自动生成系统

51offer Android重构之Architecture - xpleemoon

历史

我们的app经历了一次重构，在重构过程中将IDE切换到Android Studio，并且编译脚本从Ant切换到了Gradle。
不介绍IDE和Gradle的优势，主要介绍重构后app的Architecture相关部分。

从0到1是一个开始，再从1到N又是另一个开始。

Architecture

当前我们的结构主要为4层：
1. app
2. core
3. lib
4. model

project结构

app依赖core，而core依赖lib和model。随着以后的业务发展、产品迭代或者有更好的结构划分，会再做调整。

module依赖

app——展现层（presention）

用于页面展现，主要包含MVP模式中的VP。我们对V采用接口的方式去定义，然后让Activity或者Fragment去实现V接口，这样我们就达到接口编程的目的，P只需要关注V接口即可。以注册中的地区列表页面为例

/**
 * 地区view，MVP－V
 */
public interface IRegionView {
    /**
     * 搜索更新
     */
    void search2Update();
}

/**
 * 国家地区，MVP－P
 */
public class RegionPresenter {
    private List<Region> mRegions = OFRRegionHelper.getRegions();

    /**
     * 获取地区列表
     *
     * @return
     */
    public List<Region> getRegions() {
        return mRegions;
    }

    /**
     * 搜索
     *
     * @param regionView
     * @param searchRegion
     */
    public void search(@NonNull IRegionView regionView, String searchRegion) {
        mRegions.clear();
        if (TextUtils.isEmpty(searchRegion)) {
            mRegions.addAll(OFRRegionHelper.getRegions());
        } else {
            mRegions.addAll(OFRRegionHelper.searchRegions(searchRegion));
        }
        regionView.search2Update();
    }
}

另外，我们的app有太多的业务逻辑，所以我们也使用了比较多的策略模式，方便以后的扩展和维护。比如不同的国家，它在意向单展现时就有不同的表现：
- 可以同时选择的最多意向单数量
- 每个学校可以同时选择的最多专业数量
- 意向单名字
于是，我们就对此采用了策略模式

国家意向单策略图

国家意向单策略接口

/**
 * 国家策略
 * <ul>
 * <li>不同国家可选的意向单数量不同，具体见{@link #maxCount2Select()}</li>
 * <li>不同国家的学校专业可选数量不同，具体见{@link #maxCountOfPerSchool2Select()}</li>
 * </ul>
 */
public interface ICountryPurpose {
    /**
     * 国家可以同时选择的最多意向单数量
     *
     * @return
     */
    int maxCount2Select();

    /**
     * 每个学校可以同时选择的最多专业数量
     *
     * @return
     */
    int maxCountOfPerSchool2Select();

    /**
     * 意向单名字，目前可用名字为：
     * <ol>
     * <li>专业</li>
     * <li>入学时间，当前只限日本</>
     * </ol>
     *
     * @param ctx
     * @return
     */
    String getName(@NonNull Context ctx);
}

core

核心层，主要用于应用相关的URL拼接、图片加载、网络请求、json解析、第三方平台、配置和工具。

lib

通用库层，不依赖于应用的任何业务，方便快速的移植到其它项目.

model

数据层，作为MVP的M，用于应用的数据模型.

简单HTML5 吴明

烟火效果
404动画
爱心树
开发ide storm
目录结构
- dist:第三库存放地方，以下为存放指定文件类型目录
  - css
  - js
  - doc
  - img
- ```
src:项目指定文件类型目录
```
  - css
  - js
  - doc
  - img
简单代码

<!--html5网页声明-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>mobile</title>
    <meta charset="UTF-8">
    <!-- 此处还可以插入其他meta,样式单等信息-->
    <script type="text/javascript"></script>

</head>

<body>
<!--页面部分-->
<p>现实是残酷的,别做梦,从hello word开始吧!</p>
<canvas id="canvas">不支持html5</canvas>


<script type="text/javascript">
    <!-- 获取内容中id为canvas的元素-->
    var canvas = document.getElementById('canvas');
//    获取canvas的环境,
    var ctx = canvas.getContext('2d');
//      填充的样式为红色
    ctx.fillStyle = '#ff0000';
    ctx.st//    画一个矩形,位置x,y,w,h
    ctx.fillRect(0, 0, 600, 100);
</script>
</body>
</html>

参考链接
- 链接一
- 链接二

Wilson

自强不息厚德载物

前端入门（1）

Ruby on Rails 初体验 - 王胜

使用命令行快速创建应用的步骤

矢量图在Android 上应用 - 王进

VectorDrawable

SVG→Vector

使用SVG Path Data

Icon Font

WordPress快速建站 –杨俊构

准备工具

操作步骤

WordPress相关资源

51offer Android重构之Architecture - xpleemoon

历史

Architecture

app——展现层（presention）

core

lib

model

简单HTML5 吴明

Comments