2014-12-16

9个GIF动画阐述Web设计的25年历史

html历史

The History Of Web Design Explained In 9 GIFs

2014-11-24

requirejs里面ajax回调不执行等问题

requirejs里面ajax回调不执行
该问题主要是因为使用json文件模拟远程接口，requirejs默认不执行该callback（很奇怪的问题），把接口换成php的即可
```
$.ajax({url:"js/app/data/searchData.php",cache:false,success:function(d){
        smainhtml = m(d);
        main.add(smainhtml);
        }}
);
```

r.js 合并requirejs里面的模块报错

paths: {
    jquery: [ 'lib/jquery-1.7.2.min', 'http://cdn.staticfile.org/jquery/1.7.2/jquery.min']
}

需要改成:

paths: {
    jquery:  'lib/jquery-1.7.2.min'
}

2014-11-12

如何开发一个简单易用的前端代码库

##一些问题

现有框架解决了什么问题，缺点是什么？
样式重设，IE bug处理，缺点是没有进行对象结构扩展，实现最大程度的复用。
我所面临的问题？
不断重复类似功能的代码,并且面向结构，复用度太低,应该在功能上进行完全的分离。
我要实现的目标？
90%以上css代码的重用，面向对象结构，加入细粒度对象和布局对象，加入CSS交互控制模块和css插件模块。
优点?
多浏览器兼容,遵循web标准,代码量少,结构清晰,快速开发,高度复用，维护简便，易于理解使用。
框架带来的问题?
Html页面过多的class元素，因为放弃多级选择器，导致原本不使用class的元素使用class。
如何实现高度复用和简便维护?
加入大量的原子对象，以进行自由的重用。
增加页面常用对象,以便在项目代码中进行重写。
在元素的命名等方面进行约束,避免后期维护困难。

##一个前端库诞生
rain css

rain css代码库

##Rain css代码结构

##css代码库过大如何处理
使用copyCss来进行过滤

##兼容移动端
使用 CSS3 Media Queries来对专门的class进行重写，并新增移动端专用class

##进行hybrid开发的优势
1.无需对单独模块增加专门样式文件
2.html模块中的class可以方便快速的修改而不影响其他功能模块

2014-11-11

模块化

requirejs主数据data-main如何清除缓存

对各个模块的js文件进行缓存清除，需要在main.js里面加入

require.config({
    urlArgs: 'v='+new Date().getTime()
});

var require = {
baseUrl: "",
waitSeconds: 5,
urlArgs : "bust="+new Date().getTime()
};

</script>

<script type=”text/javascript” src=”js/lib/require.js” data-main=”js/main” ></script>

2014-10-30

hybrid►phonegap

phonegap 开发环境搭建及问题处理

windows下phonegap 开发环境搭建

安装java环境，安装nodejs，安装集成了ADT的eclipse eclipse下载地址,下载并解压一个ant工具。
添加下 java JDK ; Ant ;这几个文件的bin文件目录到系统变量，android SDK的sdk目录，platform-tools目录和tools目录到系统变量
工具安装完成后,通过npm安装phonegap,cordova代码:
1
2
npm install -g phonegap
npm install -g cordova

这里有个问题要设置npm代理，而且要设置https的代理，不然在创建phonegap项目的时候会出现无法下载git项目包的问题(感谢俊江同学及时的建议^0^)

1
2
3

$ npm config set proxy http://server:port
$ npm config set https-proxy http://server:port
$ npm config set registry "http://registry.npmjs.org/"

创建项目使用命令:

1
2
3

phonegap create myapp
cd myapp
phonegap run android

在重装phonegap后有一个奇怪的问题，phonegap命令失效，这时候需要使用cordova命令就可以了。。
这里如果出现编译报错,问题一是环境变量没设置好，另外就是sdk\platforms 下的版本不对，需要下载对应版本的android文件包，另外一个问题是高版本的模拟器不能创建avd所以需要略低版本的android文件包(如果使用手机作测试则不需要考虑这个问题)

添加插件来调用弹窗
这里的插件添加具体安装命令需要参照phonegap文档。另外需要在手机查看具体效果，在虚拟机上会出现报错(很怪异的状况)。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.addEventListener("backbutton",onBackKeyDown, false);    
}
function onConfirm(i) {
  if(i==1){ navigator.app.exitApp(); }
}
function onBackKeyDown(){
  navigator.notification.confirm(
      '按确定退出!',
      onConfirm,
      '确定退出玩的么吗?',
      ['确定','取消']
  );
}

参考地址：(http://blog.csdn.net/aaawqqq/article/details/19755179)
ps: 电脑全局代理设置可以使用Proxifier

titanium环境搭建的问题

1.nodejs和msysgit(http://git-scm.com)需要事先下载并安装好
2.jdk需要安装32位的，64位jdk会导致titanium studio无法启动

phonegap IOS打包

1.创建项目 cordova create hello com.example.hello HelloWorld
2.cordova build ios 来编译ios项目
3.使用xcode引入项目
4.build setting中的code signing选择项目的provisoning profile
5.编译器选为Generic IOS Device，然后进行archive。
6.若之前有版本上传则需修改版本号

2014-10-28

D2 2014的一点总结

有关Hybrid客户端H5的内容

这次参加D2前端大会，有关客户端H5的内容《航旅无线H5技术体系成长之路》和自己的工作比较相关，会后再看了下ppt，结合苏宁互联手机客户端客户端开发现状，个人作了几点总结:

离线包机制
前端html5 页面和客户端通信
构建与发布流程

离线包机制

弘树在讲hybrid的时候多次且反复提到了前端h5页面和客户端通信的方式，并且在开端部分，讲到了为什么不使用html web app的原因，究其根本就是网速慢
带了的用户访问一个页面等待半天的问题(说到这个个人就想扯个蛋，尼玛在某国都秒下电影了，咱才开始推4g,能再慢点吗-_-)。
在网速特么慢的这种情况下，离线包把前端文件打包到app里面，用户打开app访问的是app里面的html5页面部分数据从服务端拉取，速度能提升不少。不过这个貌似需要和客户端配合一起完成，真正来完成离线包还是需要客户端开发人员来完成。

前端html5 页面和客户端通信

这一部分有很大一个篇幅讲到了，说实话，没搞过客户端开发的前端不一定能理解，毕竟里面大部分设计到客户端开发相关的内容。另外关于互通有个很重要的概念Bridge，全篇只谈到了概念，没有上代码，略难猜测-_-

构建与发布流程

该部分有基础kissy库，加上已经完善的发布流程，这一块我们没有一个统一的前端库，暂时很难做到一致。至于less和sass我觉得主要是看开发自身需要，比如我就没有使用less或sass的习惯。
最后，作者讲到hybrid中的h5类似一辆开的很快的拖拉机上了高速路。我觉得很多时候，具体问题还得看场景，比如一个很慢的2g网络环境，使用h5来拉数据和使用原生app来拉数据，不见得哪个会快到哪里去，但是如果在网络环境良好的情况下，使用h5却可以带来很大的灵活性和可维护性，当然页面功能足够简单的时候，不失为一个很好的移动开发方案。

使用phonegap开发的一点体会

在使用phonegap搭建hybrid应用，可以发现phonegap的整个www目录可以作为hybrid应用的离线包，样式，js文件等都存放在改目录，并且phonegap中一些访问外网，硬件等特性需要在config.xml文件中配置。具体结构如下:
phonegap文件目录
另外最近看到一篇很详尽的介绍phonegap运行机制的文章很不错，PhoneGap版支付宝Android客户端开发小结里面关于phonegap的结构图：
phonegap结构
ps: phonegap在安卓上面的性能还是略慢，会后@Ngot_ftd 讲过另外一个混合的比较彻底的hybrid框架：Titanium。按照Titanium的说法，其本身就是内置于安卓代码库，不同于phonegap对文件请求进行拦截，所以运行效率有个质的提升。当然，航旅是使用内部开发的node工具进行混合app的开发，其具体实现需要客户端开发提供js对象的支持,具体的通信拦截，就需要该对象的方法调用了。

2014-10-22

blog

hexo搭建blog要注意的几点

1.默认使用的googleapi导致加载很慢需要重新修改css，和js的href
2.修改css样式需要在主题下的source 下的 _variables.styl 文件中修改一些样式的变量

阅读原文 Read More

2014-05-13

CSS & HTML►html5

虚拟运营商UED前端小组4月25号分享总结

1.css3卡牌翻转效果
css:
.animate{-webkit-perspective:1000;width:80px;height:100px;position:relative;overflow:hidden;}
.face{ rotateY(0deg); width:80px;height:100px;position:absolute;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: all .25s linear ;-webkit-transform-style: preserve-3d;}
.back{background:green;-webkit-transform: rotateY(-180deg);width:80px;height:100px;}
.front{background:red;width:80px;height:100px;}
.animate:hover .front{-webkit-transform: rotateY(180deg);}
.animate:hover .back{-webkit-transform: rotateY(0deg);}
html:

2. 不声明第三个变量的值交换
算术方法
var a=10,b=12;
a=b-a;
b=b-a;
a=b+a;
位运算
var a=10,b=12;
a=a^b;
b=a^b;
a=a^b;
栈实现
var a=1,b=2;
a=[b,b=a][0];
3.Zen Coding基本使用

E 元素名称(div, p);
E#id 使用id的元素(div#content, p#intro, span#error);
E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N 子代元素(div>p, div#footer>p>span);
E+N 兄弟元素(h1+p, div#header+div#content+div#footer);
EN 元素倍增(ul#nav>li5>a);
E$N 条目编号 (ul#nav>li.item-$5);

2014-05-08

CSS & HTML

3月28日虚拟运营商ued前端小组的分享总结

3月28号分享的小伙伴们: @雷锋很忙灬，@灰客的微博

1. 在一行图文混排的文本里面图片添加 vertical-align: middle; 可以使得文本垂直居中显示
文本的垂直居中

2.ie6下面一些兼容性问题的处理
一：误区：IE6不兼容display:inline-block。实例:IE-ib.html。
看出：ie并非不是不兼容inline-block只是做的不完整，在块状元素中的不兼容。
同样的例子是!important在IE6中也是能够识别的,只是必须放在单独的一个{}块中。
二：display:inline-block的问题和兼容。
[1:]float的双边距的问题。
[2:]display:inline-block在IE 7以及以下的浏览器不识别。兼容css为：{display:inline;zoom:1}或者
div{display:inline-block;….}
div{display:inline;}
[3:]display:inline-block的时候出现4像素的空隙问题。解决方案{
1.在ul的元素上面加上:[font-size: 0;letter-spacing: -4px;word-spacing: -4px;//兼容safari]
2.在li的元素上面加上:[font-size: 16px;letter-spacing: normal;word-spacing: normal;]
}
三：display:inline-block的实例：iblock.html
达到”show.jpg的效果”
[1:]min-height:在IE6下面的解决兼容方法
给块元素设置
zoom: 1; display: inline;
然后min-height就会生效
[2:]IE6下面注释的BUG.(中文注释导致的问题。)最好在/之前加上三个**的形式。

2014-04-28

html5

用HTML5/CSS3给女朋友送个生日蛋糕

现在有了 HTML5，我们在浏览器上制作动画已经不是什么难事了，但是一个好的创意却很难，比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意，它是用 svg 来做的，利用 HTML5 的 api 让制作蛋糕的过程展示出来，这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦！

在线演示
源码下载
原文链接：http://www.html5tricks.com/html5-css3-new-cake.html

宅鱼

部落格