和字网首页(Home) | 论坛首页(Forum)
Welcome Guest! To enable all features please 登录 or 注册.

Notification

Icon
Error

Guilin Ouyang
#1 发表时间 : 2016年9月20日 10:02:22(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年09月16日

9月15日中秋节后,完成了对和码在线练习软件(HeChinese/HeTraining.htm)的几个辅助功能,如选择练习起点,记录输入速度,保存最好记录,单字编码查询与图片显示等。

我开始想着把《和码中文教程》第一册也做成网络版。

理由有:

一、《和码中文教程》第一册,内容共25课:每课10至12个单字,15个左右词组,这是个很有特点的教程:

单字选取的要求:
1、最常用的口语单字,尽量最早学习到;
2、没有重复的单字;
3、每课的单字都能组成易读,又有一定正面意思的句子。

每课词组选择要求:
1、词组中的字都是已学过的单字,或本课中学习的单字;
2、每个词组最好至少含一个本课学习的单字;
3、词组要有易读,又有一定的正面意思。

第1课:一二三四五,我你他她们
词组:你我,我们,你们,他们,她们,你我他,她我你,一二三四五,五四三二一,一二三,三二一
第2课:上中下前后,早午晚今明
词组:上午,中午,下午,今晚,明晚,今明,今后,前后,早晚,晚上,上下,上中下,早午晚,上上下下,一前一后,上前
第3课:请问谁来帮,谢您有爱心
词组:谢谢,请问,有心,爱问,爱心,我心中,我爱你,爱上你,谁帮我,我来帮你,你有爱心,谢谢您,我有,请你,上来,下来

第4课:时间几分钟,地点在哪里
第5课:人生那些事,怎么这样子
第6课:六七八九十零,还没去为的什
第7课:学汉语文字,练听说读写
第8课:看了就记得,会用能不忘
第9课:东西南北家国,左思右想象回
第10课:春夏秋冬花鸟,也是喜欢再见
第11课:男女姓名叫,日月星晨期
.....
第16课:吃喝茶面饭,味香酸辣甜
第22课:量大小多少,算个件斤元
......

二、网络版,更容易为教师,为汉字学习者接受。

在教室里(网络教室里),学生共同打开一个网页可以,但不能共同打开手机上的一个程序(App),网络版软件,更易于教学使用,让老师采用。

三、和码字形技术,和码字形教学方法,的推广目标是,世界范围内的汉字字形学习与使用方法,应该有更多的免费的,应该有更方便让人获取的有用的学习资料。和码在线练习软件是为这个目标服务的一个很好的软件,《和码中文教程》第一册,应该是第二个。

四、《和码中文教程》第一、二册软件,在iOS, Android上都有很好的软件,内容,图片,页面设计都有了,现在是把这些内容搬到网上来。

Guilin Ouyang
#2 发表时间 : 2016年9月20日 10:45:32(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年09月18日

和码在线练习与输入软件,是用HTML, Javascript, CSS做的,没有用到Javascript的Library(如:JQuery)或Framework, 对键盘事件的获取,与处理,是用最直接的方式。这对页面不多,不复杂的Web软件是可以的。

《和码中文教程》第一册,共有25课,每课有约8个页面,都是统一的格式,如果只用简单的HTML, Javascript来作,就需要做25*8=200个网页,这显然是不合适的。怎样如iOS, Android软件那样通过程序动态更新页面内容,这是用简单的Javascript不易做到,需要学习新的技术。

在网上搜索比较发现AngularJS能很好地满足这个程序的需要,Component是网页的一部份,可以通过程序动态更新,Component又是通过更新Template来更新页面的相关部份,这正是《和码中文教程》需要的技术。正好Angular2于9月14日发布,太及时了。

AngularJS是Google的技术:https://angularjs.org/

Javascript程序我很熟悉了,除了和码练习与输入软件,我还在以前的公司里用了一年多时间。Javascript有个问题,就是在写Code时,辅助编程环境IDE,不能自动检查,变量名以及数据类型的正误,就是这个问题,就常常浪费很多的时间。

Micorsoft公司的TypeScript,能克服Javascript的诸多不足,且Angular2采用TypeScript,因此需要学习Typescript: https://www.typescriptlang.org/

先从Angular2 的例子程序开始学:

1、QuickStart
2、Tour of Heroes
Guilin Ouyang
#3 发表时间 : 2016年10月2日 13:58:02(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月02日

因有别的事耽误了一个星期,今天回到这个项目上。

上次把Tour of Heroes的例子,看了,做了不下5遍,开始依照这个例子做HeBook1。

想用上Material2 的 SideNav,但这些内容都是新的,还没有容易跟着学的例子。

现在要学的是把Angular 2 与Material 2结合到一起。
Angular 2 Material 2 Components

Edited by user 2016年10月2日 14:34:50(UTC)  | Reason: Not specified

Guilin Ouyang
#4 发表时间 : 2016年10月3日 9:03:15(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月03日

搭建Angular CLI环境:

1、安装Node.js

https://nodejs.org/en/

2、更新npm:

Windows: npm install npm -g

Mac: sudo npm install npm -g

3、安装Angular CLI:

https://cli.angular.io/

1)npm install -g angular-cli
2) ng new hebook1
3) cd hebook1
4) ng serve
5)在浏览器上,打开:http://localhost:4200/

如页面显示:"app works!",就算建成了。

相关链接:
1、Angular CLI: https://github.com/angular/angular-cli
2、Angular Material: https://github.com/angular/material2
3、Angular Material2 samples: https://github.com/angular/material2/blob/master/GETTING_STARTED.md
4、Angular2-Material components: https://www.npmjs.com/~angular2-material

学习Leash-in例子:

下载Sample Source: leashed-in: https://github.com/kara/leashed-in
观看Vidwo: https://www.youtube.com/watch?v=0q9FOeEELPY

用Windows command line: cd to leashed-in source folder.

注意在package.json中要有:

"@angular/material": "^2.0.0-alpha.9-3",

在angular-cli.json中要有:

"scripts": [
"../node_modules/hammerjs/hammer.min.js"
],

在styles.css中要有:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';


运行:
1)npm install
2)npm install --save @angular2-material/core

运行后,添加目录:
\node_modules\@angular\material
\node_modules\hammerjs

3)ng serve
4) 在浏览器上,打开:http://localhost:4200/,就可以看到很多图片,与功能。



Edited by user 2016年10月20日 8:53:03(UTC)  | Reason: Not specified

Guilin Ouyang
#5 发表时间 : 2016年10月4日 18:32:23(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月04日

这两天项目开展顺利,做了以下内容:

1、用Material2 sidenav,做课本目录;
2、显示图片,播放语音;
3、Study页,主要内容有了;
4、学会了Angular2 App发布。

用Angular2 + Material2做的HeBook1,是个独立的Web App,不象HeTraining.htm是多个网页的集合,HeBook1 在服务器上要有个Application Start Point。

发布过程:
1、在电脑上,用Angular2 CLI 运行HeBook1, 要发布了,就在Project Folder下运行:command line: ng build
这就产生了一个dist目录,其中包括了所有的安装文件;

2、在服务器上,建立一个Application Start Point: 'HeChinese/HeBook1/';

3、将dist目录中的内容都Copy到服务器的'HeChinese/HeBook1'(*.map文件可以不用);

4、将index.html(HeBook1.html)中的<base href="/"> 改为:<base href="/HeChinese/hebook1/">

5、打开:http://www.hezi.net/HeChinese/HeBook1/HeBook1.html

Angular2 是个很新的先进的建网站的技术,可能会网站的建设与内容提供方式,都带来很大的影响。

接下来继续做这个项目。


Guilin Ouyang
#6 发表时间 : 2016年10月7日 20:32:15(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月07日

三天时间,又有些进步:

这个项目是用Angular-CLI,以leashed-in为例子开始的,这两天把Angular2 quickstart, Tour of Heroes中介绍的技术,加入到项目中。数据的Service,多个Component的Project结构,Routing.

学习https://angular.io/docs/ts/latest/guide/router.html,对项目做些改进。


Guilin Ouyang
#7 发表时间 : 2016年10月8日 22:42:08(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10日08日

完成了单字查找页,改进了第一页,字词学习页的功能。

http://www.hezi.net/HeChinese/hebook1/HeBook1.html
Guilin Ouyang
#8 发表时间 : 2016年10月12日 11:27:57(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月12日

完成了输入练习功能。

Web和码输入练习功能,在和码在线练习软件中有,但把已有的功能移到移人HeBook1却有些问题:

1、Angular 2 TypeScript 项目中使用已有的javascript文件(.js)有些困难;
2、因此对于输入页面,就采用两套方法控制,一是已有的javascript输入程序,一是Angular2 TypeScript程序;
二套速度的信息,通过页面上的HTML Element传递,如:lessonNumber, itemIndex。
3、和码在线输入字词后,应该触发<input [(ngModel)]="typedText" id="heTextArea" value="正在传送码本…" onchange="textChanged()" >,但Input Page在Angular2项目里,外面的javascript怎么都触发不了onchange。这个问题后来是通过以下方式解决的:

heTextArea.heOnChange = (function () { textChanged(); });

4、和码在线输入字词过程,是截下Keydown Event,做输入过程,并且要return false,即告诉系统,不要输入键盘上原有的键符。
但因为keydown event Return false,使得[(ngModel)]="typedText"的双向绑定功能不起作用。需要通过:
document.getElementById("heTextArea").value来读取输入的内容。

5、HeBook1的输入练习,也可以不用和码在线输入,而采用系统安装的和码或其它的输入法,这个过程就是由Angular2+TypeScript控制页面。
用系统输入法,[(ngModel)]="typedText"的双向绑定功能起作用。

6、现在HeBook1的输入练习,可以选择和码在线输入,也可以采用安装了的输入法,两者可任意转换。

这个输入练习功能是两个相互独立的程序(一是在线输入,一是安装了的系统输入法)控制一个页面。


Edited by user 2016年10月12日 12:25:41(UTC)  | Reason: Not specified

Guilin Ouyang
#9 发表时间 : 2016年10月12日 23:58:14(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月12日

测试页基本完成。

在线输入时,光标位置相距太大。

http://www.hezi.net/HeChinese/HeBook1
Guilin Ouyang
#10 发表时间 : 2016年10月17日 9:35:41(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月16日

软件又有些进展,学习:component communication

这个Web App router一般如:‘/lesson/1/study’,

可以StudyComponent:
Quote:

ngOnInit() {
this.sub = this.router.routerState.parent(this.route)
.params.subscribe(params => {
this.lessonIndexFromParentRoute = +params["id"] - 1;

this.ciZuCellArray = document.getElementsByClassName("ciZuTile2");
this.lessonChanged();

});
}

也可如LessonComponent中:
Quote:

var pathArray = (this.router.routerState.snapshot.url).split("/");

Quote:

let link = ['/lesson', this.lessonIdx + 1, this.lessonTaskList[this.lessonTaskIdx].english];
this.router.navigate(link);

更新后的软件:http://www.hezi.net/HeChinese/HeBook1

Edited by user 2016年10月17日 9:39:17(UTC)  | Reason: Not specified

Guilin Ouyang
#11 发表时间 : 2016年10月17日 18:26:30(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月17日

为学习页面与测试页面,添加快捷键功能:

参考:

angular 2 keyboard events

https://plnkr.co/edit/Aubybjbkp7p8FPxqM0zx?p=preview

Guilin Ouyang
#12 发表时间 : 2016年10月19日 8:46:26(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月18日

《和码中文》第一册网络版软件,第一版基本完成了。

从09月16日开始,中间有10来天耽搁,从Angular2基本概念开始,约3个星期完成。
http://www.hezi.net/HeChinese/HeBook1/HeBook1.html

Guilin Ouyang
#13 发表时间 : 2016年10月21日 22:46:58(UTC)
Guilin Ouyang

等级: Administration

组: Administrators
注册时间: 2012/2/4(UTC)
帖子数量: 233

2016年10月21日

今天又完成了一个Angular2+Material2软件,只用了三天的时间:

http://www.hezi.net/HeChinese/PinYin/PinYin.html
论坛跳转  
不可以 发表新话题.
不可以 回复话题.
不可以 删除自己的发言.
不可以 编辑自己的发言.
可以 发表投票.
不可以 投票.