TOMMYHU

APP开发模式通常分为Web APP与Native APP原生模式两种，这两种模式均各自有自己的优势，到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点，但是随着HTML5的发展及云服务普及，采用HTML5进行Web App开发正在成为一种趋势，用户可以根据应用特点和需求进行选择，亦可选择两者混合模式：

Native App开发

Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

Web App开发

Web App开发即是一种框架型APP开发模式（HTML5  APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。



原生APP开发及Web APP开发模式的区别

Web APP需开发“html5云网站”和“APP客户端”，昆明天度网络公司总结这类型APP应用呈现以下特点：

（1）每次打开APP，都要通过APP框架向云网站取UI及数据；

（2）手机用户无法上网则无法访问APP应用中的数据。

（3）框架型的APP无法调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）

（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；

（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；

（6）APP用户每次都可以访问到实时的最新的云端数据；

（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互；

适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

Native App（原生型APP）需要开发“云服务器数据中心”和“APP客户端”，昆明天度网络公司总结这类型的APP应用呈现以下特点：

（1）每次获取最新的APP功能，需要升级APP应用；

（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；

（3）手机用户无法上网也可访问APP应用中以前下载的数据。

（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）

（5）APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。

到底该如何选择Web App和Native App开发模式

移动Web无所不在，移动Web是目前唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；而开发Native App可以充分利用设备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，Native App是最佳的选择。下面几节将讨论一下Native App的一些主要功能。

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。
var obj = document.getElementByIdx_x('id'); obj.addEventListener('touchmove', function(event) {      // 如果这个元素的位置内只有一个手指的话     if (event.targetTouches.length == 1) { 　　　　 event.preventDefault();// 阻止浏览器默认事件，重要         var touch = event.targetTouches[0];         // 把元素放在手指所在的位置         obj.style.left = touch.pageX-50 + 'px';         obj.style.top = touch.pageY-50 + 'px';         } }, false);

Django makes it easier to build better Web apps more quickly and with less code.
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

Ridiculously fast.
Django was designed to help developers take applications from concept to completion as quickly as possible.

Reassuringly secure.
Django takes security seriously and helps developers avoid many common security mistakes.

Exceedingly scalable.
Some of the busiest sites on the Web leverage Django’s ability to quickly and flexibly scale.

introduce：https://www.djangoproject.com/
courses：http://mooc.guokr.com/search/?wd=django

<select id="ddl_test">       <option>语文</option>       <option>数学</option>       <option>英语</option>   </select>   <script type="text/javascript">      /////////////手动触发selectd的change事件////////////////       $("#ddl_test").change(function () {           var aaa = $("#ddl_test  option:selected").text();           alert(aaa);       });       $("#ddl_test").trigger("change");      /////////////手动触发selectd的change事件////////////////   </script>

我现在使用的浏览器是Chrome版本 32.0.1664.3 m Aura，发现该版本的Chrome每次打开页面滚动页面对于position:fixed的元素会抖动，然而在重新应用position:fixed，抖动就不存在了，或者F5刷新页面后也不会抖动。

目前可能可以解决的方法目前可以解决的方法我也尝试了一些，只剩下几个。

第一种，给fixed的元素添加css的样式，我试过，这个可以解决此闪动的问题。
-webkit-transform: translateZ(0);

第二种，设置css。我是在不复杂的页面做的测试。
html, body {height:100%;overflow:auto;margin: 0;}
注意，引入这个CSS可能会导致原来的页面布局出现问题，慎重。我的同事也说，这个是为了解决IE6系列的fixed抖动问题。

第三种，引入jquery1.7.2的类库。
引入jQuery的方法不知道为什么可以，但是引入了1.11.0的版本就无法解决这个问题。很奇怪。

问题一，分辨率Resolution适配：
不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。

问题二，单位英寸像素数PPI适配：
使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。

问题三，设备像素比例DPR适配：
1物理像素在

显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考：
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html
https://github.com/amfe/lib.flexible

demo如下：
<!doctype html> <html> <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />     <title>移动h5自适应布局</title>     <style>         /*320px布局*/         html{font-size: 100px;}         body{font-size: 0.14rem;/*实际相当于14px*/}         body{             padding:0;             margin:0;         }         .div2{             font-size:0.14rem;         }         .div3{             width:3rem;             height:3rem;                          border:1px solid #000;             box-sizing:border-box;         }         .div4{             margin-top:0.1rem;             width:2rem;             height:2rem;                          border:1px solid #000;             box-sizing:border-box;         }         .img1{             width:3.2rem;         }     </style> </head> <body>     <div class="div2">动态更改html元素大小</div>     <div class="div3"></div>     <div class="div4"></div>     <img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" /> <script type='text/javascript'> //<![CDATA[ if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 134 ms, 10 Queries.</span>"; //]]> </script></body> <script> // 该代码来自<a href="http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/" target="_blank">http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/</a> (function (doc, win) {     // 分辨率Resolution适配     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',         recalc = function () {             var clientWidth = docEl.clientWidth;             if (!clientWidth) return;             docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';         };     // Abort if browser does not support addEventListener     if (!doc.addEventListener) return;     win.addEventListener(resizeEvt, recalc, false);     doc.addEventListener('DOMContentLoaded', recalc, false);          // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签     (function(){         return;         var dpr = scale =1;          var isIPhone = win.navigator.appVersion.match(/iphone/gi);         var devicePixelRatio = win.devicePixelRatio;         if (isIPhone) {             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                                 dpr = 3;             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){                 dpr = 2;             } else {                 dpr = 1;             }         } else {             // 其他设备下，仍旧使用1倍的方案             dpr = 1;         }            scale = 1 / dpr;                       //            var metaEl = "";            metaEl = doc.createElement('meta');         metaEl.setAttribute('name', 'viewport');         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');         if (docEl.firstElementChild) {             docEl.firstElementChild.appendChild(metaEl);         } else {             var wrap = doc.createElement('div');             wrap.appendChild(metaEl);             doc.write(wrap.innerHTML);         }     })();          })(document, window);     </script> </html>

ClickOnce 是一种部署技术，使用该技术可创建自行更新的基于 Windows 的应用程序，这些应用程序可以通过最低程度的用户交互来安装和运行

ClickOnce 部署克服的主要问题

ClickOnce 部署克服了部署中所固有的三个主要问题：
更新应用程序的困难

使用 Microsoft Windows Installer 部署，每次应用程序更新，用户都必须重新安装整个应用程序；使用 ClickOnce 部署，则可以自动提供更新。只有更改过的应用程序部分才会被下载，然后从新的并行文件夹重新安装完整的、更新后的应用程序。
对用户的计算机的影响

使用 Windows Installer 部署时，应用程序通常依赖于共享组件，这便有可能发生版本冲突；而使用 ClickOnce 部署时，每个应用程序都是独立的，不会干扰其他应用程序。
安全权限

Windows Installer 部署要求管理员权限并且只允许受限制的用户安装；而 ClickOnce 部署允许非管理用户安装应用程序并仅授予应用程序所需要的那些代码访问安全权限。
过去，这些问题有时会使开发人员决定创建 Web 应用程序而不是基于 Windows 的应用程序，为便于安装而牺牲了 Windows窗体丰富的用户界面和响应性。对于使用 ClickOnce 部署的应用程序，您可以集这两种技术的优势于一身。

ClickOnce安全的工作方式

核心 ClickOnce 安全基于证书、代码访问安全性策略和 ClickOnce 信任提示。
证书

Authenticode 证书用于验证应用程序发布者的真实性。
通过将 Authenticode 用于应用程序部署，ClickOnce 可帮助防止有害程序将自己伪装成来自已确定的可信任源的合法程序。 （可选）证书也可以用于为应用程序和部署清单签名，以证明文件未被篡改。 有关更多信息，请参见ClickOnce 和 Authenticode。 证书还可以用于为客户端计算机配置一个受信任的发布者的列表。 如果某个应用程序来自受信任的发布者，则可以在无需任何用户交互的情况下安装该应用程序。 有关更多信息，请参见受信任的应用程序部署概述。
代码访问安全性

代码访问安全性可帮助限制代码对受保护资源的访问。
大多数情况下，您可以选择 Internet 区域和本地 Intranet 区域来限制权限。 使用“项目设计器”中的“安全性”页可以请求适合于应用程序的区域。 您也可以使用受限权限调试应用程序来模拟最终用户的体验。 有关更多信息，请参见ClickOnce 应用程序的代码访问安全性。
ClickOnce 信任提示

如果应用程序请求的权限超出区域的允许范围，则会提示最终用户做出信任决定。
最终用户可以决定是否信任 ClickOnce 应用程序（如 Windows Forms 应用程序、Windows Presentation Foundation 应用程序、控制台应用程序、XAML 浏览器应用程序和 Office 解决方案）以允许其运行。 有关更多信息，请参见如何：配置 ClickOnce 信任提示行为。

Nginx搭建反向代理服务器过程详解
原文地址：http://www.open-open.com/lib/view/open1417488526633.html