当下移动互联网的发展势头迅猛,各式各样的App也在横空出世,最近百度的推出的轻应用,也是当下的一大亮点,其实,说白了就是Web App的一个升级,也有人认为Web App也是一个发展的趋势,但是,对于Native App来说,最为原生的App,也是不能放弃的,现在,就将Web App与Native App的知识点整合到一块,大家就可以明确的看出这两者的相似和区别了,到底哪个是适合我们开发和关注的,你,准备好了吗?

头条推荐

Native App Web App Hybrid App应用设计入门

随着智能手机、平板电脑的快速普及,越来越多的企业意识到建立自己的APP应用和移动网站,也有越来越多设计师开始转战移动平台。本篇主要介绍移动平台的一些入门知识和各平台的设计要求。……>>详细

移动端WebApp开发必备知识

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案。

一、基本概念

(1) CSS pixels与device pixels

CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容。

阅读全文

手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?

其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。

  1. <meta name="viewport" content="width=device-width, initial-scale=1" />  

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。

下面三篇文章是对viewport属性详细的解释: Viewport(视区概念)——pc端的理解 Viewport(视区概念)——移动端的应用 viewport ——视区概念(转) 对于老式IE6,7,8浏览器需要js处理,由于主要平台是ios和安卓,所有可以暂时不考虑

阅读全文

WebApp与Native App及WebApp的布局方式和技术

开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。

Web App与Native App有何区别呢?

Native App:

1、开发成本非常大。

阅读全文

webkit webApp 开发技术要点总结

如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :

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

实际上我们可以操作的属性有4 个:

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

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

阅读全文

移动应用界面设计模式 - 搜索、排序、筛选

决定放假期间先不上iOS Wow体验了;手头这篇译文不做完的话我心不甘。去年年底,我们曾经学习过一篇"具有引导性的移动应用界面设计模式",其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章——搜索、排序和筛选。貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起。接下来果断精分,进入原文作者人格。

很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用Craigslist应用呢。

在使用Craigslist的过程中,我就琢磨着,作为普通用户,我们确实可以很明显的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起了解一下,有哪些设计模式可以帮助我们按照用户所期望的方式将数据信息更加有效的组织和呈现出来。

搜索

阅读全文

移动Web前端开发

前言

这篇文章就当进入移动web开发的宣誓稿吧,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这潭水愈发的深了!不多言,进入主题。

我将从下面几个方面探讨移动web前端开发:分辨率、屏幕、手机浏览器、设计理念、响应式web开发。

分辨率

阅读全文

Android开发项目经验

1.是不是应该把数据刷新操作放在onResume()中?

  1. @Override 
  2.   public void onResume() { 
  3.       super.onResume(); 
  4.       refresh(); 
  5.   } 
  6.  
  7.  
  8.         public  void refresh(){ 
  9.       initData(); 
  10.   } 

 

 

 

阅读全文

Android高效加载大图、多图解决方案,有效避免程序OOM

比如说系统图片库里展示的图片大都是用手机摄像头拍出来的,这些图片的分辨率会比我们手机屏幕的分辨率高得多。大家应该知道,我们编写的应用程序都是有一定内存限制的,程序占用了过高的内存就容易出现OOM(OutOfMemory)异常。

我们可以通过下面的代码看出每个应用程序最高可用内存是多少。

  1. int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);   
  2. Log.d("TAG""Max memory is " + maxMemory + "KB"); 
  3.   

因此在展示高分辨率图片的时候,最好先将图片进行压缩。压缩后的图片大小应该和用来展示它的控件大小相近,在一个很小的ImageView上显示一张超大的图片不会带来任何视觉上的好处,但却会占用我们相当多宝贵的内存,而且在性能上还可能会带来负面影响。下面我们就来看一看,如何对一张大图片进行适当的压缩,让它能够以最佳大小显示的同时,还能防止OOM的出现。

BitmapFactory这个类提供了多个解析方法(decodeByteArray, decodeFile, decodeResource等)用于创建Bitmap对象,我们应该根据图片的来源选择合适的方法。比如SD卡中的图片可以使用decodeFile方法,网络上的图片可以使用decodeStream方法,资源文件中的图片可以使用decodeResource方法。这些方法会尝试为已经构建的bitmap分配内存,这时就会很容易导致OOM出现。为此每一种解析方法都提供了一个可选的BitmapFactory.Options参数,将这个参数的inJustDecodeBounds属性设置为true就可以让解析方法禁止为bitmap分配内存,返回值也不再是一个Bitmap对象,而是null。虽然Bitmap是null了,但是BitmapFactory.Options的outWidth、outHeight和outMimeType属性都会被赋值。这个技巧让我们可以在加载图片之前就获取到图片的长宽值和MIME类型,从而根据情况对图片进行压缩。如下代码所示:

阅读全文

Web App与Native App相关

Native App VS Web App--花
移动互联网的发展正如火如荼,app浪潮方兴未艾,潮人们都变成了拇指控,天…
到底什么情况该选择开发移动
移动Web平台具有以下一些优点:容易学习,开发成本低、标准化、使用方便、…
通过Web App和Native App之
在当前状况下,针对不同的公司规模,面向不同的应用领域,该如何做技术选型…
“多快好省”的移动Web App
 在出租车上忽然想要预订餐厅,却苦于手机上没有相关应用;去机场的路上想…
App开发再现生机下的荒芜
前不久的百度世界大会上,李彦宏抛出了引发广泛讨论的“轻应用”概念,这一…
移动 App 交互设计为何缺乏
经过 5 年多的发展,以触控为基本交互形式的移动 App 进入了一个平稳期,Go…
移动 Web 应用性能的 5 个秘
最近我们听到一些关于移动HTML性能的一些秘籍,实际上它们并不是很准确。和…
企业移动App如何做到精准定
本月我们借着8月份介绍的几个企业 App 简单谈下企业 App 最重要的事情是什…

投    票

您认为Web App和Native App哪个前景更广阔?
Web App,浏览更方便
Native App 原生态的
两者应该携手共进
没什么概念

专题推荐

...级,也有人认为Web App也是一个发展的趋势,但是,对于Native App来说,最为原生的App,也是不能放弃的
Web App与Native App知识点
...级,也有人认为Web App也是一个发展的趋势,但是,对于Native App来说,最为...
Web App开发中会面临越来越“重”的问题,如果在开始阶段没有规划好,后续在添加功能时就会变得极其麻烦,
Web App开发最佳实践:模块
Web App开发中会面临越来越“重”的问题,如果在开始阶段没有规划好,后续在添...
CDC2013开设六大主题论坛,HTML5、iOS、Android、Unity、Cocos2d-x、Flash,全面覆盖IT行业从业者,立足于
CDC2013中国开发者大会广州
CDC2013开设六大主题论坛,HTML5、iOS、Android、Unity、Cocos2d-x、Flash,全...
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid App正在过渡,Web App的时代还
Web App开发初探
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid Ap...

一周排行

留言评论