debug–在线代码调试工具

发表于 作者

工具地址:http://debug.cnodejs.net
这个工具主要是为群里面同学们的提问发代码用的，webapp开发可以方便js调试。
主要功能点：

  • 分享代码，仅支持html,javascript,css；
  • 代码高亮
  • 生成可运行的html文件
  • 支持手机访问运行页面，生成二维码文件地址；
  • 支持手机访问的console信息打印在pc的控制台,需要添加一段js，并且调用wa.log()

项目地址：https://github.com/xiaoqiang/debug

web app/mobile web开发入门

发表于 作者

欢迎加入webapp前端开发QQ群：115187143

基础知识篇—–摘自：webkit webApp 开发技术要点总结

1. viewport：
也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个：

width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height -            //  viewport 的高度 （范围从223 到10,000）
initial-scale -     //  初始的缩放比例 （范围从>0 到10）
minimum-scale -     //  允许用户缩放到的最小比例
maximum-scale -     //  允许用户缩放到的最大比例
user-scalable -     //  用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />  // 离线应用的另一个技巧
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  // 隐藏状态栏
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式
<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码
<meta name="Author" contect="Mr.He"/ >

在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。(请参考：指尖的下JS 系列文章)
更多内容 →

QRcode二维码在线识别解码chrome插件

发表于 作者

二维码 （2-dimensional bar code） 是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理： 二维条码/二维码能够在横向和纵向两个方位同时表达信息，因此能在很小的面积内表达大量的信息。

例如本站的logo就是一个二维码见顶部http://www.xiaoqiang.org

IE下图片数量较少可以在地址栏输入以下js代码：

javascript: (function(Q, R, D, e, c, o, d, E, P, I, C) {
    if (Q.getElementById(c)) return;
    C = Q[R + 'NS'] &amp;&amp; Q.documentElement.namespaceURI;
    C = C ? Q[R + 'NS'](C, 'script') : Q[R]('script');
    C[D]('id', c);
    C[D]('src', P + d + I);
    C[D](c, o); (Q[e]('head')[0] || Q[e]('body')[0]).appendChild(C);
    C = new % 20Image;
    C[D]('src', P + E);
})(document, 'createElement', 'setAttribute', 'getElementsByTagName', 'QRdecode', '4', 'decode.js', 'fav.ico', 'http://204.12.225.114/', '#startOpened');

或者右击 二维码解码 添加到收藏夹，需要解码的页面直接点一下这个链接就行了。

但是这种方式在图片太多的页面会出问题，建议将需要解码的图片在新窗口/新选项卡打开，然后点击解码。

推荐安装chrome解码插件，在线安装

使用方法很简单，使用chrome浏览器再二维码图片上右击，选择“二维码解码”选项就可以看到解码后的信息了。

有任何问题都可以留言反馈给我，我会尽快改进的^_^
更多内容 →

webapp水平垂直滚动demo

发表于 作者

先放个访问地址（请使用android/水果系列移动设备访问）：http://xiaoqiang.org/demo/webapp

用爪机可以直接扫这个二维码webapp
demo介绍：

  • 横向滚动，置顶固定菜单；
  • 纵向滚动，支持滚动条；
  • 横屏竖屏宽度自适应；
  • 载入自动隐藏地址栏；
  • 锁定viewport；
  • 滚动条在用户触屏的时候才显示，非触屏状态隐藏；
  • 锁定滚动方向，横向的时候不能竖向；（感谢qbaty协助优化体验）。

测试机器：

  • android2.3（本人自测）；
  • itouch4（本人自测）；
  • ipad（dustin测试）；
  • 帮忙测试的哥们可以在我的博客留言反馈结果

暂时发现的问题

  • ipad/itouch有渲染问题，第一次拖动有闪屏现象

其他基于webkit的浏览器也能看到大概的效果

更多内容 →

css2.1权重（specificity）IE6/7下一些错误规则

发表于 作者

关于CSS specificity
CSS 的specificity （权重），它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表：

Selectors
选择符		 Syntax Samples
语法		 ensample
示例		 Specificity
特性
通配选择符(Universal Selector) * *{ width:560px;} 0,0,0,0
类型选择符(Type Selectors) E1 td { font-size:12px;} 0,0,0,1
伪元素选择符(pseudo-element Selectors) :first-line :first-line{ font-size:12px;} 0,0,0,1
伪类选择符(Pseudo-classes Selectors) :link :link { font-size:12px;} 0,0,1,0
属性选择符(Attribute Selectors) [attr] [title] {color:blue;} 0,0,1,0
ID选择符(ID Selectors) #ID #test{ font-size:12px;} 0,1,0,0
类选择符(Class Selectors) E1.className .test{color:blue;} 0,0,1,0
子对象选择符(Child Selectors) E1 > E2 body > p {color:blue;} E1+E2
相邻选择符(Adjacent Sibling Selectors) E1 + E2 div + p {color:blue;} E1+E2
选择符分组(Grouping) E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3
包含选择符(Descendant Selectors) E1 E2 table td {color:blue;} E1+E2

更多内容 →