Akawa

ETY001的博客

发表于 更新于

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

如何才能做得更好呢？

第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三，必须学会运用各种工具进行辅助开发。
第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。

可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。

目前市面上关于Web前端开发的书主要都是针对单一技术的，《编写高质量代码》与这些书有着本质的区别。它主要想实现两个目标：第一，为不太有经验的 Web前端开发工程师建立大局观，让他们真正了解和理解这个职业；第二，帮助有一定Web前端开发经验的工程师修炼内功，通过编写高质量的代码来提高前端代码的可维护性。这是很多前端开发工程师感兴趣的内容。

《编写高质量代码》的前两章讨论了网站重构和团队合作，这是很有必要的。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质应该是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。建立了这种大局观后，学习具体技术的思路就更清晰了。

代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。《编写高质量代码》中包含着很多开发的思想和经验，都是在长期的开发实践中积累下来的，不同水平的Web前端工程师都会从中获得启发。

图书封面：

发表于 更新于

今天遇到一个在新浪云平台搭建Wordpress的朋友，他也正好要用我写的Ntalker for Wordpress插件，但是有些问题存在，于是我就开始开始研究看看。经过分析，发现原来是缓存无法写入，导致的部分功能的丢失。这是新浪云平台官网原话：“SAE不允许写本地文件目录。由于SAE是分布式架构，每次的请求可能到达不同的机器，为了提升性能和安全，我们不允许对代码目录进行写操作。数据并不会永久地写到“本地”，而是通过以下两个方法写到临时存储或Storage/MC服务中：TmpFS，用于处理临时文件需求； Wrapper，让你只需要修改文件路径就可以将数据写入到Storage服务或者Memcache服务中。详细的说明请参照相关服务说明。”
下面是这次修改的主要方法的参照源。根据提示我选择了Memcache服务来代替原插件里的那个开源cache类。关于Memcache的使用方法如下：

服务概要

Memcache是SAE为开发者提供的分布式缓存服务，用来以共享的方式缓存用户的小数据。用户需要先在在线管理平台创建Memcache，然后通过标准的memcache*函数读写Memcache。

特别注意：

  1. SAE平台的Memcache技术指标和标准的Memcache相同，不适合存放大文件，特别是大于4M的数据
  2. SAE Memcache不需要用户调用memcache_connect函数，取而代之的，用户在get、set之前需要调用memcache_init函数

应用场景

因为SAE的Web Service是分布式环境，所以当用户需要共享的缓存某些key-value形式的小数据时，就需要用Memcache服务，这样可以快速进行数据响应，而且可以减轻后端存储的压力。

使用指南

例子：

appname: saetest
appversion: 1

开启Memcache

您需要先到SAE在线管理平台开通Memcache服务，在服务管理=>Memcache页面开通Memcache服务后，就可以通过在线管理平台的UI接口，测试Memcache读写情况，以确认开通成功。

关闭Memcache

在您不需要使用缓存服务时，也可以在在线管理平台禁用Memcache服务.禁用后，用户就不可以再使用分布式缓存服务。

特别注意：当禁用后，原有的缓存数据将全部被删除！

使用Memcache

Memcache服务目前提供以下接口：

memcache_init - 初始化MC链接
memcache_get - 获取MC数据
memcache_set - 存入MC数据
除memcache_init外,其他接口和php的memcahe模块保持一致.

需要注意的是, memcache_connect()，Memcache::connect()、memcache_pconnect()、Memcache::pconnect()、memcache_add_server() ，Memcache::addServer()等函数不建议使用。

使用示例：

$mmc=memcache_init();
if($mmc==false)
echo “mc init failed\n”;
else
{
memcache_set($mmc,”key”,”value”);
echo memcache_get($mmc,”key”);
}

发表于 更新于

经过今天下午一下午的研究，暂时解决了1.0版本的一些问题，并且发布了1.1版本，总算是能在明天返校前完成这个事情了～

由于我已经单独开了一个这个插件的页面用来记录这个插件的事情，所以就不再在这篇日志里多说什么了，请各位幻影移形到这里看看吧～希望能看到您的留言～～ Ntalker for Wordpress

发表于 更新于

从最初建立这个自己的个人博客的时候开始，就一直想着能够有这样一个版块，用来分享我自己做的小东西，或者是用来分享一些我的小想法，于是就有了DM实验室。然后博客建起来快一年了吧，一直都没有一个大众化的实际的小软件来填充。唯一做的一个小众网站程序自习室查询平台，还被学校暂时停用……

直到如今，已经是准大四的人了，才开始能找到一些时间写写自己喜欢的东西（之前的时间都投入到社团了），而Ntalker for Wordpress就是作为我的DM实验室的起航之作了，希望它能够好好的生存下去，希望他能够给大众带来实际的效益，希望我自己能再接再厉做出更好的东西！

发表于 更新于

由于之前一直都是想拿自己的VPS做记事狗QQ机器人的存放空间（这个机器人只能在win下运行），所以，最初安装VPS的操作系统的时候，选择的是win2003。经过这两个多月的使用，我实在是无法忍受win+apache这种不良的组合了，服务器软件总是出错，还是换回linux系统才是王道！

于是乎，今天早上9点，在VPS上的服务器软件又一次当掉的情况下，果断选择重装系统为Cent OS。经过两个半小时的折腾，终于是把一切都搞定了～现在服务器架设的环境是LNMP，终于用上了我一直梦想的ngix啦，哈哈～

下面总结一下：

1、我使用的是“LNMP一键安装包”，详细的安装教程，**请看这里：[http://lnmp.org/install.html](http://lnmp.org/install.html)**，我就不再多做阐述。
2、需要自己手动在nginx.conf中添加wordpress的rewrite规则。添加方法在这里：[http://bbs.vpser.net/viewthread.php?tid=2730&highlight=wordpress](http://bbs.vpser.net/viewthread.php?tid=2730&highlight=wordpress)。
3、我选择的VPS服务商提供给我的VPS的硬盘空间不是一个整块硬盘，意思就是说我的硬盘空间是20G，而实际是由两块10G的硬盘拼起来的，而VPS用户面板的重装系统按钮只能在一块上安装，这就导致我的另一块10G空间没有用了。我联系客服后，客服给出了教程，教程地址如下：[http://forum.xensystem.com/thread-50-1-1.html](http://forum.xensystem.com/thread-50-1-1.html)。这个教程可以帮你把另外的空间扩充到现在的空间上。这个教程很简单，不要看着那么多的命令就发怵，其实一步一步来做就可以了，只不过一些具体的硬盘空间数据不同罢了（也可能有些硬盘的标示不同，这个我觉得应该不是问题），这里我就提醒一句话，注意命令的大小写（有一个命令的参数是大写的L，还有linux是大小写敏感的，所以硬盘标示之类的大小写也要注意下～）。

最后，我再做个我的VPS的广告，我现在用的VPS是52元一个月的，就我现在使用的这三个月来看足够我个人使用了～如果你对于我的这款VPS感兴趣，可以来这里看看：http://www.domyself.me/archives/1427.html。

发表于 更新于

这个页面是专门用来记录我开发的Ntalker for Wordpress插件的相关信息的。

Ntalker可以用来实现，使所有访问当前页面的用户进行及时聊天和互动。当前是1.1版本，只是实现了最基本的聊天功能，添加好友，列出好友列表等功能将会在稍候的版本中推出。

由于已经在Wordpress官网上上传了该插件，地址：http://wordpress.org/extend/plugins/ntalker-for-wordpress/，所以该页面以后主要用作插件信息反馈。欢迎各位使用过插件的亲们留下宝贵的意见。

============= Ntalker for Wordpress 1.1 新浪云平台特别版 =============

该版本针对新浪云平台研发，具体使用方法同普通版本一样，请参见：Ntalker for Wordpress。
感谢您对于本插件的关注，如果您有好的建议或者想法，希望您能来 Ntalker for Wordpress 页面留言。如果您觉得这个插件很好用的话，恳请您能通过您的博客帮助推广，再次感谢！

++++++++++++++++++++++++++++++++++++++++++++++++++++

============= Ntalker for Wordpress 展望 =============

  • 1、预计在1.2版本中去掉该文件，实现在wp后台进行相关数据的配置。
  • 2、1.x系列版本将主要实现Ntalker的基础聊天功能，其余功能如加好友，改在线等状态这类附加功能，初步计划在2.x版本中加入，届时可以通过Ntalker for Wordpress插件把你的wp打造成一个小型的社区。2.x版本将会在wp数据库新建一个表来实现记录好友关系，我已经开始着手思考这个表的构造了，如果您有好的想法，还请您能在这里留言，我将会为此感激不尽！

++++++++++++++++++++++++++++++++++++++++++++++++++++

～～～～～～～～～～～～～～～ 感谢区 ～～～～～～～～～～～～～～～

感谢“鲁大Ubuntu群”里帮助我测试的同志们，感谢笨兔兔和寒山烟雨的一直充当首测！

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

如果各位有什么问题可以在这个页面留言。

===================下载区===================

Ntalker for Wordpress 1.1 新浪云平台特别版

发表于 更新于

今天终于是有时间可以给大家写一写我前段时间，更换域名商时出现的一些问题了。不过，现在已经木有火气了，更遗憾的是，和前域名商的QQ客服交流的记录基本上没有了，可惜了，不过网站的在线问答还是有的，现在我整理一下给大家看看，希望大家看后能有所收获。

我的前域名服务商是卓汇互联（www.joz.cn），该网站办的第一件令人发指的事情就是，居然修改我的域名注册时的邮箱地址为他们的邮箱地址，这意味着，转移域名时的信件都将经过他们的邮箱，这也是为什么我在没有成功转移前，不敢写这篇文章的原因。并且，域名转出邮件（含有转移密码的那封）发送的失败率也太高了吧，我使用的是QQ邮箱，刚开始能接收到一封确认转移的邮件，之后含有转移密码的邮件就是收不到，经过多次和客服交涉，最后是客服把该邮件转发过来的。我很怀疑这是由于他们公司私自改动我的注册邮箱导致的。

第二件事情就是，当我收到域名转移信后，卓汇就停掉了我的域名解析。这是我非常想不明白的事情，我交了一年的费用，到期日是今年的9月24日，而我5月份开始办理转移手续，在我转移没有成功前，卓汇应该是应当承担我的域名解析的。下面是在线问答上的对话：

ETY001：我还有一个问题就是我在你们公司交了一年的费用,我现在转出域名了,但是离9月份到期时间还有3个多月,而你们已经把我的域名解析给删掉了,是不是应该给我退这将近4个月的款额?要不就继续解析我的域名。
JOZ客服：**尊敬的用户:**
** 您好,很高兴为您服务!**
** 在此告知您,您的域名转转出我司,域名到期时间不会减少。这个域名到期时间是 2011年9月24日,如果您在新服务商那边转入续费,到期时间是接2011年9月24日延长一年。**
** 域名注册费是ME注册局的域名登记费用,域名解析功能是我司提供,是免费的,凡是注册我司的域名,都免费提供解析功能,**
** 非常感谢您对我们的长久支持!**

对于该回答，我很是不解，就此事我咨询了我现在的域名商，我现在的域名商也是不解，并且对于他们的这个解释感到可笑。其实，正是因为我在转移域名前，搜集资料的时候，看到过说转移过程不影响域名解析，所以我才选择进行转移操作的。然后事实挺打击人的，这个事情导致了我的博客半个月无法访问。

第三件事情就是他们的服务态度，表面上看一般，实际很差。之所以这么说是因为他们的回复只是客套话而已，语气则并不像那些客套话那样好听，尤其他们的QQ客服给人的感觉是没有耐心。并且，在经过我1个多星期的“纠缠”后，他们的QQ客服貌似是把我拖黑了，对于此事我表示很无语……

总之，这次的转移之旅，其实始因就是因为在卓汇第二年续费需要230，而我的新域名商只需要150，为了省银子才不得不采取转移，没想到有了这么一大串的事情。大家就当作看个热闹，长个见识吧～

发表于 更新于

今天上午终于把持续了将近2个月的比赛作品弄完了（这也意味着我的解禁，后文解释），其实也不能算是弄完，因为提交的作品连个半成品都算不上。虽然心里很不甘，但是水平有限，时间不足，只能是尽自己的最大的努力去完成能完成的部分了。

不过话说回来，通过参加这次腾讯的这个Html5应用设计比赛，我还是学到了不少的关于Html5的知识。

首先就是来说一下一个很方便的开发库（也可以称其为工具），那就是jQuery Mobile（http://jquerymobile.com/）。这是一个非常好用的东西，只需要简单的几句代码就可以轻松的把view（MVC中的 V）做出来，并且jQuery Mobile库实现的界面是仿苹果app的，看上去及其的舒服。这样对于一个开发者来说，如果写Html5应用程序的话，剩下的主要任务就是写代码，来实现剩下的M和C了（这其中主要是来写JS代码）。

其次，就是发现了Html5的确正在流行，因为国外的进度明显的走在了内地之前的。我是4月底知道有这个比赛的，然后就开始在搜集相关的Html5的示例资料等等。我发现，国内很少有原创的资料，这就更不用说入门级的中文教程了，想了解更多的html5知识，只能是去国外的网站搜集资料。我用了几乎5月份一个月的时间去搞明白什么是html5，腾讯举办这次比赛的目的是什么。虽然用的时间很长，感觉有点浪费，但是最终还是有所收获的。作为正在兴起的一门技术，html5无疑是具有极强的吸引力的，这主要表现在html5应用的强大性上。就现在我对于html5应用的理解来说，html5代码实现了html5应用的view框架，而js等代码实现的则是M（Model）和C（Controller）。正因为html5应用几乎只需要使用html5代码和js即可实现很强大的功能，所以浏览器厂商尤其是手机浏览器，现在都想在这个领域投入力量，先占有市场，而我分析占有市场的方式就是能拥有相当数量的优质html5应用，然后形成一个App store（应用商店），最后通过这个进行盈利。另外期间还发现了很多优秀的应用，举个例子：http://taskbox.cn/

不过，这些东西终究离我还很遥远，当下里最重要的就是这次比赛暴露出来的问题，很多基础性的技术还没有掌握，比如说JS（这也包括jQuery），再比如说PHP框架。总之，在接下来的一年里，除了考研复习外，必须要自学一些必要的东西，并且能真正写出点什么有价值的程序（其实我一直对于我之前写的那个自习室查询平台因为学校的缘故，不能正常投入使用而耿耿于怀）。所以说接下来的半年依旧是艰巨的！

比赛的事情基本上就说这么多了，再就是说一说刚开头为什么说解禁。当我准备要参加这个比赛的时候，我的原计划是，4月下旬和5月的上旬进行资料收集，6月上旬结束前把作品提交，这期间作品交不上就不能写日志。由于比赛的难度远超出我的预料，所以一直拖到现在。其实中间有几次差点忍不住要写的，但是由于我自己平时总好犯制定了计划而不能自始至终的贯彻的毛病，所以这次我告诫自己一定要克制住，所以一直憋着不写，最后有点演化成自己与自己怄气的感觉，不过好歹是这次我实现了克己。

从开始停止写日志到今天恢复写日志，期间发生了太多的事情，有杯具有洗具，反正满茶几的都是东西，思考了很多事情和问题，不过可惜的是现在都已经忘记了到底发生过什么了，毕竟事情已经过去了，冲动也随之过去了。不过虽然现在想不起来，但是这些思考过的东西都已经记录在大脑的某个区域了，我想等我需要的时候，他们一定会再次出现的。

其实这段时间，最值得记录的事情就是我认识了我现在的女友。其实这很感谢这次腾讯的比赛阿，要不是这个比赛，我也不会在半夜里不睡觉而看英文技术文章，这也不会在121部落上结识到她～我也就不多说什么了，各位有空就来我们倆的人人网情侣空间帮忙给树浇浇水，我就已经感激不尽了～

另外，笨兔兔的王兄，我会抽时间写一下针对于wordpress的ntalker的，这个事情我还木有忘记。

今天就写这么多吧，没想到写着写着就跨天了，已经不是10号了……

发表于 更新于

这篇日志算是写给我自己看的吧，毕竟我自己的这个个人博客很长时间没有维护，现在已经算是荒草丛生了。最近一段时间各种事情各种忙碌啊，还认识了一个值得自己去爱的女孩，再加上自己有点时间就想休息了，一偷懒就更木有时间来打点博客了。之前曾经说到的关于我的这个博客域名的转移时出现的问题，我现在还暂时没有时间写，估计会放到暑假里写吧。现在域名已经转移成功了，我一定会好好的构思一下，写一写这次的经历，尤其是要写一写我的前域名服务商——卓汇互联（joz.cn）【终于可以写名字了，之前就怕没有转移完的时候，遭到报复】。
马上就要期末考试了，又要开始各种纠结和复习了。俗话说“一天不学习，赶不上刘少奇”啊……

发表于 更新于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312" />
    title>HTML5 WebDatabase</title>
    <script>
        var db=""
        window.onload=function(){
            if(window.openDatabase){
                //打开数据库，不存在数据库则会自动创建
                db = window.openDatabase("test", "1.0", "HTML5 Database API example", 200000);
                //创建表
                db.transaction(
                    function(tx){
                        tx.executeSql(
                            "create table oo(id REAL UNIQUE, text TEXT)",
                            [],
                            function(tx){alert("创建表成功");},
                            function(tx, error){alert("创建表失败，错误信息:"+error.message );}
                        );
                    }
                );
            }
            else{
                alert("不支持WebDatabase");
            }

        }

        //删除数据库表
        function drop(){
            db.transaction(
                function(tx){
                    tx.executeSql(
                        "drop table oo",
                        [],
                        function(tx){alert('删除数据库表成功');},
                        function(tx,error){alert("删除数据库表失败，错误信息:"+error.message);}
                    );
                }
            );

            //释放资源
            db = null;
        }

        function add(){
            var num = Math.round(Math.random() * 10000); // random data
            var value = document.getElementById("text").value;
            db.transaction(
                function(tx){
                    tx.executeSql(
                        "insert into oo(id,text) values(?,?)",
                        [num,value],
                        function(tx){alert("添加成功");},
                        function(tx, error){alert("添加数据失败，错误信息:"+error.message);}
                    );
                }
            );
        }

        function show(){
            db.transaction(
                function(tx){
                    tx.executeSql(
                        "select * from oo",
                        [],
                        function(tx, result){
                            for(var i = 0; i < result.rows.length; i++){
                                var item = result.rows.item(i);
                                alert(item['id']+":"+item['text']);
                            }
                        },
                        function(tx,error){alert("查询数据失败，错误信息:"+error.message);}
                    );
                }
            );

        }
    </script>
</head>

<body>
    <input  type="text" id="text"/><br/>
    <input type="button" value="增加" onclick="add()"/><br/>
    <input type="button" value="查询" onclick="show()"/><br/>
    <input type="button" value="删除表" onclick="drop()"/><br/>
</body>

</html>
0%