Web前端

WebGL技术调研

webgl-html5

What is WebGL?
WebGL实际上是一个在浏览器中创建2/3D动画的库,使用了H5 <canvas>标签实现。既然实现了3D动画,也就是说它最根本的动作是操作DOM,也支持能操作DOM的编程语言,比如Javascript,PHP和Java等,并且如果是在Mac平台,内嵌Webkit的应用也支持Object-C。

Why not canvas?
<canvas>已经实现了基本的动画,也非常丰富,但是唯一的缺点是:不支持3D。如果需要3D还是需要WebGL。

Prospect of WebGL?

  • API基于熟知的3D动画标准
  • 跨平台跨浏览器
  • 和HTML紧密融合,包括页面布局,交互使用了HTML标准事件Hanlder
  • 浏览器环境3D动画硬件加速渲染
  • 不需编译,不需链接
  • 众多主流浏览器Google (Chrome), Opera (Opera), Mozilla (Firefox), and Apple (Safari) 是Khronos(WebGL官方组织)的财团

phonegap获取本地内网IP地址(IPV4)

做程序就是这样,永远不太知道在行走的过程之中会遇到什么问题,所以,在这两天的开发过程中需要通过phonegap获取到手机内网的IPV4地址,当然第一次想到的是使用phonegap插件,百度上找资料一无所获,只好Google了,国外讨论这个问题的帖子也很少,但是无意之中发现了一篇博客,但需要翻墙,很不错,链接地址 : http://simonmacdonald.blogspot.in/2012/08/so-you-wanna-write-phonegap-200-android.html

不过我在这里将该网址里面的代码复制了下来仅供参考

cordova.define(“cordova/plugin/ipaddress”,
function(require, exports, module) {
var exec = require(“cordova/exec”);
var IPAddress = function () {};

var IPAddressError = function(code, message) {
this.code = code || null;
this.message = message || ”;
};

IPAddressError.NO_IP_ADDRESS = 0;

IPAddress.prototype.get

phonegap安卓环境下使用BarcodeScanner插件扫描二维码教程(包含PG3.X版本)

本篇文章是从本人的CSDN搬迁过来的,可以去那里看格式更好的版本phonegap安卓环境下使用BarcodeScanner插件扫描二维码教程(包含PG3.X版本)

后记:有网上的朋友说PG到了3.X之后文件夹的规划有了变化,需要配置的地方也发生了变化,因为之前也为PG3.5版本装过一次BarcodeScanner插件,所以现将这些补充到最后面,希望能够帮到大家。

由于一直在使用phoneGap来开发安卓应用,而对于原生Java小白的我最近这几天一直陷入了如何使用phonegap的BarcodeScanner插件这件事情上,可以说查遍了百度和Google,虽然只是一个小小的二维码的功能,但是这里面还是让我学到了许多开发安卓应用的内容,一起共勉吧。

Web Sql Database 初探

由于项目需求,需要做一款基于PhoneGap和HTML5配合的手机客户端,也考虑到了许多问题,其中一个主要的问题是希望能够在客户端能够加入数据缓存,查了一下随着HTML5的逐步完善,现在有四种方式来存储数据, localStorage,SessionLocalstorage,IndexDB 和 WebSql database ,之前经常使用的是localStorage,但是觉得这种存储方式跟关系型数据库的操作方便性上面差远了,所以来研究了一下Web Sql Database(一下简称WSDB)。

基本了解一下WSDB

WSDB API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API。

兼容性

浏览器:最新版本的 Chrome,Safari 和 Opera 浏览器都支持 Web SQL Database。

手机平台: 仅有Android IOS BB 支持。

具体使用方法

①:创建操作数据库的对象

var db = null;

try {

PhoneGap+JQM

一、phoneGap返回上一页的问题

使用phonegap内置的 navigator.app.backHistory(); 即可。

二、JQM页面通过data-ajax=’true’的情况下进行页面切换时,总是出现两次白色闪屏的问题

这一点主要由JQM通过Ajax换场引起,可以通过下面的方法来解决掉这种闪屏的情况。

①在CSS代码中加上
[cc lang=”css” theme=”vibrant” width=”100%” height=”700″ lines=”40″ noborder=”true”]
.ui-page{
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
-moz-backface-visibility : hidden;
}
[/cc]

虽然大多数移动设备都是通过WebKit渲染页面,但是加上后两行有备无患。
[cc lang=”css” theme=”vibrant” width=”100%” height=”700″ lines=”40″ noborder=”true”]
.ui-mobile-rendering * { 

静态HTML与服务器跨域交互初探

由于在帮助实践与创新中心的伙伴们完成他们的创新实验项目,所以我加入到了考勤开发的项目中,因为要有一个Android的客户端为成果,但是自己又不会用原生的Java来开发,所以决定用之前学过的PhoneGap+HTML5来完成这项工作。
昨晚完成了整个APP的界面设计,所以就开始完成业务逻辑方面的代码工作,因为之前做过一个类似用PhoneGap的客户端,是通过jQuery+Ajax来和自己的电脑来进行交互所以没有遇到什么交互不了的问题,但是这次是通过Ajax来和远程服务器进行交互,结果Ajax一直显示连接错误。

[cc lang=”javascript” theme=”twitlight” width=”100%” height=”700″ lines=”40″ noborder=”true”]
$.ajax({
type:’post’,
url:’http://202……….’……..
success:function(data){},
error(x, s){
alert(‘与服务器连接不上’);
}
});
[/cc]
所以就觉得难以理解了,于是只能百度或者Google了,经过一系列的查询,发现其实这样的问题并不难解决,其实只需要它 JSONP,其实之前在学习jQuery中的Ajax的时候就已经接触过它,只不过那个时候没有在意它这么强大的功能。

JSONP为什么可以实现跨域操作呢?
JSONP方式的交互方式和Script方式是一样的。本身XMLHttpRequest本身不能跨域操作,但是script标签的src是可以跨域访问,使用jQuery的JSONP就可以实现跨域操作。

JSONP的使用格式?
function(json对象);(function是客户端定义的函数的名字)
url?callback =function (客户端需要按照此形式来定义格式)

不过通过JSONP从跨域服务器中返回的数据是不是一定是JSON数据,敝人还没有验证,不过为什么不使用JSON格式呢,可想而知与服务器交互应该控制流量的大小才是,因为JSON格式的轻量化,选择JSON格式似乎好处多多,如果想更深入的了解JSONP可以参考最下方的第一个参考网址。

下面看一个具体的例子来看如何使用JSONP?
无论是原生的JS,还是一些封装好的JS框架都对JSONP有了一个很好的支持,所以在这里我是通过jQuery来实现这种跨域操作。

1、首先我的界面是这个样子的,前端代码使用了jQuery Mobile框架
[cc lang=”html” theme=”twitlight” width=”100%” height=”700″ lines=”40″ noborder=”true”]

HTML5离线应用构建

这是一段简单的MANIFEST文件代码,除了第一行,剩下的部分是需要离线的文件(html/css/js及图片)

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

下面是一段比较复杂的manifest文件

CACHE MANIFEST
# 指定一个版本号
# version 1
# 该类别指定要缓存的资源文件
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# 指定不进行缓存的资源文件
NETWORK:
login.php
http://foocoder.com

# 每行指定两个文件,第一个为在线时使用的资源,第二个是离线时使用的资源
FALLBACK:
/main.py /static.html        #/main.py  为在线时使用的资源   static.html为离线时使用的资源
images/large/ images/offline.jpg       
*.html /offline.html

浅列Webapp相较于Native的优势与劣势

劣势
1、如果没有JavaScript,HTML5什么都不是,这句话有正确的地方。

2、如果没有JavaScript的库,如jQuery,就不会写JavaScript的脚本,这也有对的地方。
3、现在并没有针对HTML5开发移动Web App的集成开发工具。

4、安全问题:web app的安全问题完全可以说是一场噩梦,如果有恶意的黑客,想要了解你网站的代码或者用户的私密信息,通过浏览器的内置工具就可以来了解到想要了解的数据。

5、本地存储的功能是有限的,首先权限就是一个问题,需要介入的中间层面太多,比如说360等一些手机安全工具。这一点肯定比不上目前的native app能够更方便的操控本地数据。

6、数据同步问题:需要注意的问题是,在没有网络接入的时候并不能够登录web app,但HTML5可以解决这个问题,但最大的问题是:如果用户在浏览不同的浏览器时,会保存数据到当前的浏览器中,开发者是无法强迫用户去用上次登录的浏览器的。

7、HTML5开发的Web App有一点的确可以解决掉下载以及定期更新的弊病,节省了培养用户的成本,也减少了用户的流失,但最大的问题来了,用户如果对产品1.0的界面和操作非常钟爱,但是开发者却又将此App升级到了2.0,而用户并不喜欢2.0的界面也并不一喜欢它的操作,这时候更会遇到用户流失的危险。

8、浏览器的不兼容性还是会存在,尽管现在各大公司Microsoft和Google正在积极的迎合着HTML5的到来,但是历史留下的弊病还是会持续至少十年,可能会更多,如果实在喜欢HTML5来开发Web App,程序员们就要解决掉兼容性问题,浏览器厂商也要更加的给力才行。

优势
1、跨平台是最大的优势,只要用户的移动设备带有浏览器即可,不用苦苦学习Java来开发Android,也不用苦苦学习object-c来开发IOS,一次开发多地使用。
2、用户无需安装就可以使用而且是最新版,这一点在一定程度上节省了用户的流失。不用像现在这样天天提醒用户更新更新更新,很烦人。