今天这篇文章我们就来专门聊聊第三种方式，也就是SAP移动应用的解决方案之一: 使用Cordova将前端应用打包成一个和移动平台相关的混合移动应用。...为了区分，有时候我们将用Cordova加上Web应用生成的移动应用称为混合应用(Hybrid App)。 Cordova的神奇之处在哪里？...Cordova是一个开源的移动开发框架，允许开发人员用标准的Web技术，即HTML5,CSS3和JavaScript完成跨平台的移动应用开发。...所谓跨平台，即类似Java的“一次编译，到处执行”，我们只需要专注于前端应用的开发，完毕之后，根据实际需要，再使用Cordova提供的build工具，将开发好的前端应用打包成能够安装到移动平台上去的混合应用...现在我们来看看将一个Fiori应用用Cordova打包成混合应用的具体步骤。这个混合应用最后运行在我的三星手机上的界面如下图所示： ?
Jerry之前的一篇文章 SAP Fiori应用的三种部署方式 曾经提到SAP Fiori应用的三种部署方式： On Premise环境下以ABAP BSP应用作为Fiori应用部署和运行的载体 部署并运行在...On Cloud环境下，比如SAP云平台 用Cordova打包成平台原生应用安装在移动设备上 今天这篇文章我们就来专门聊聊第三种方式，也就是SAP移动应用的解决方案之一: 使用Cordova将前端应用打包成一个和移动平台相关的混合移动应用...为了区分，有时候我们将用Cordova加上Web应用生成的移动应用称为混合应用(Hybrid App)。 Cordova的神奇之处在哪里？...https://cordova.apache.org/docs/en/latest/ [1240] Cordova是一个开源的移动开发框架，允许开发人员用标准的Web技术，即HTML5,CSS3和JavaScript...所谓跨平台，即类似Java的“一次编译，到处执行”，我们只需要专注于前端应用的开发，完毕之后，根据实际需要，再使用Cordova提供的build工具，将开发好的前端应用打包成能够安装到移动平台上去的混合应用
2015-09-22 01:43:08 写这篇文章主要是来向大家介绍一下HTML5当中download属性的用法和之前下载的区别。需要的朋友可以看一下。...在以往传统的html下载文件样式是这样的 下载 而在HTML 5浏览器中，可以支持download属性了，如下： 下载 download属性的好处在于，在用户下载文件的时候，显示在用户浏览器 中的“另存”为的文件显示框中...，显示的是这个downloader属性中显示的 东西了，比较友好 HTML5里，download属性为下载的文件取一个合适的名字，而不是使用原生的服务器文件名。...这个属性在存在文件交互的地方非常有用，在服务器端的文件名需要是及其独特的（上例中的文件名就很独特不是吗？），但是一堆乱码对用户来说没有任何作用，download属性定义文件名对用户更有意义。
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据...2.专为移动平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘： 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本框 带有@和....的键盘 url 网页的URL 带有.com和.的键盘 Search 用于搜索引擎，比如在站点顶部显示的搜索框 标准键盘 range 特定值范围内的数值选择器，典型的显示方式是滑动条 滑动条或转盘 只需要简单的声明...设计师要知道，HTML5提供的交互方式是非常丰富的，至于用不用得上，那是你自己的事儿喽！...设计师要知道，用户想要什么，HTML5能提供给用户什么。 5.CSS3 视觉设计师的辅助利器 CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。
而今天的重点则是通过 Hightopo 的 HT for Web 产品来制作多种样式的 ToolTip。...ht.Data 是 HT 最基础的数据类型，用户可将业务信息存储在 Data 对象属性上，目前提供了 Node、Edge、Column等子类应用于不同视图组件中，本文中会用 data 来统称。...node，并调用它的 setToolTip() 方法设置它的 ToolTip 要显示的内容。...使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具有易上手、高性能、易扩展、组件丰富、跨平台等特点...总结 ToolTip 的使用大多数情况下是显示一张图片的名称，或是一个 logo 的作用。
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让...Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。...《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/...提到Canvas和SVG的融合，我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例，整个手机电池的静态部分我们通过加载一个简单的SVG素材实现，而充电动态变化的部分，我们采用一个渐进色的...(percent > 1){ percent = 0; } node.a('percent', percent); }, 16); SVG绘制到Canvas还有一种特殊的应用场景
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让...Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。...《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/...提到Canvas和SVG的融合，我们将采用HT for Web的矢量功能展示一个手机电池充电进度的实例，整个手机电池的静态部分我们通过加载一个简单的SVG素材实现，而充电动态变化的部分，我们采用一个渐进色的... + 0.02; if(percent > 1){ percent = 0; } node.a('percent', percent); }, 16); SVG绘制到Canvas还有一种特殊的应用场景
Alex Kessinger是Yahoo的一名前端工程师，本文是他对HTML5应用现状与前景的思考。...如果不能离线保存源文件和数据，我们就无法实现离线的HTML5应用。...W3C Web应用工作组：HTML5应用的下一步 W3CWebApps标准已经做了大量工作，包括API及HTML5 Web程序细则。...未来几年，支持HTML5的移动浏览器将如雨后春笋，将你的应用 向HTML5迁移是很明智的，因为HTML5将很好地运行在这些设备上。...HTML5应用商店 Eric Meyer讲到了HTML5应用程序问题，他将HTML5应用成为Web Stack Apps，HTML5要获得更多关注，可以建立HTML5应用商店。
Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑的因素，上段提到的一堆新兴的HTML5界MV*框架，相信更少有人敢说熟练精通，你可能在某个项目中用了好几个月甚至一两年，...性能问题倒不用担心，毕竟这方面任务大部分情况都是交由框架实现者去考虑，但不需要用户深入了解框架的实现细节，并不意味着用户可以完全不关系基本架构脉络，框架应用者还是有必要了解模型-视图-事件之间的引用关联关系...这个案例只是为了测试方便因此将dataModel对象作为全局变量，所以引发了一些列内存泄露的资源不足问题，一般项目应用中不用的组件不需要考虑这么复杂，例如还需要断开dataModel引用这些步骤，常规应用场景中例如一个对话框打开后...，一般数据模型和视图组件都在这个对话框范围内相互引用，只要确保不出现上文提到的有全局引用能影响这个对话框内的某个对象，那么你在使用完该对话框后不需要做任何处理，那一堆的对象哪怕他们之间引用再复杂甚至互相应用
上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型...Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、...属性除了AffectsRenderer和AffectsMeasure还有多少要考虑的因素，上段提到的一堆新兴的HTML5界MV*框架，相信更少有人敢说熟练精通，你可能在某个项目中用了好几个月甚至一两年，...这个案例只是为了测试方便因此将dataModel对象作为全局变量，所以引发了一些列内存泄露的资源不足问题，一般项目应用中不用的组件不需要考虑这么复杂，例如还需要断开dataModel引用这些步骤，常规应用场景中例如一个对话框打开后...，一般数据模型和视图组件都在这个对话框范围内相互引用，只要确保不出现上文提到的有全局引用能影响这个对话框内的某个对象，那么你在使用完该对话框后不需要做任何处理，那一堆的对象哪怕他们之间引用再复杂甚至互相应用
流行前VML和SVG算是真正纯种Web方案也是有不少应用，近些年随着HTML5的流行，加上移动终端对HTML5支持的普及，越来越多新项目开始采用真正纯HTML5的方案，更具体的说大数据量应用性能高于SVG...》的文章，根据自己的具体项目情况选择合适你的本地存储方案，其实Web本地存储方案已经出现了众多领域的千奇百怪应用黑魔法，有人应用LocalStorage存储Web Font，游戏领域利用Web客户端存储游戏资源等等...对于部分HTML5的应用页面，用户需要嵌入Native App的WebView和Native应用界面做集成，以前这种方案特别是在Android端总会让我发毛，老的Android的WebView组件集成的奇烂的...HTML5应用的渗透力在去年基于HTML5的神经猫游戏，在微信中的病毒式快速传播已被业界真正认识到其力量，如今微信已经成为游戏、广告等各行各业应用的重要入口，同样基于HT for Web的Web SCADA...工控移动应用也可在微信中传播使用，以下附上几张基于HT for Web客户项目的应用抓图，是的基于HTML5，监控可以如此简单，真正做到在你掌控之内： http://www.hightopo.com/demo
AppCan是HTMl5移动开发应用平台，支持跨平台，可以简单、快速、高效开发移动应用。 倡导Hybrid App开发。 为HTML5开发提供底层Native交互能力。...本地打包 支持将web应用直接打成APK（android）安装包。 真机同步 将应用生成“AppCan调试中心”模式的安装包，使用手机安装，确保手机和pc在同一个网络内。...手机上安装成功后，打开app，输入pc的IP，登录成功后，可以看到应用的List，打开调试的应用，可以pc上IDE的控制台上看到请求。...打开手机上的“AppCan调试中心” APP，输入pc的ip地址，登录，即可看到应用的List。...手机上打开应用后，pc上IDE控制台看到调试信息 插件API AppCan提供了丰富的底层插件，包括网络通讯，界面布局，功能扩展，第三方SDK等能力。
，在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案，也有着不少应用。...近些年随着 HTML5 的流行，加上移动终端以及浏览器对 HTML5 支持的普及，越来越多新项目开始采用纯 HTML5 的方案，更具体的应该说是大数据量应用性能高于 SVG 的 Canvas 方案，已经逐渐成为当今...矢量图标的强大 这个例子我依旧是用 HT for Web 进行开发的，其中重复的部分我都封装为一个“图标”，这边说的“图标”指的就是矢量图标。...矢量在 HT for Web 中是矢量图形的简称，常见的 png 和 jpg 这类的栅格位图， 通过存储每个像素的颜色信息来描述图形，这种方式的图片在拉伸放大或缩小时会出现图形模糊，线条变粗出现锯齿等问题...添加动画 动画的部分 HT 有三种动画的方式，针对的点不同，这里我用到的是 schedule 主要用于在指定的时间间隔进行函数回调处理。
，在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也是有不少应用，近些年随着 HTML5 的流行，加上移动终端以及浏览器对 HTML5 支持的普及，越来越多新项目开始采用真正纯 HTML5...的方案，更具体的应该说是大数据量应用性能高于 SVG 的 Canvas 方案，已经逐渐成为当今 Web SCADA 前端技术的首选标配方案。...这个例子我依旧是用 HT for Web 进行开发的，其中重复的部分我都封装为一个“图标”了，这边说的“图标”指的就是矢量图标。...矢量在 HT for Web 中是矢量图形的简称，常见的 png 和 jpg 这类的栅格位图， 通过存储每个像素的颜色信息来描述图形，这种方式的图片在拉伸放大或缩小时会出现图形模糊，线条变粗出现锯齿等问题...动画的部分 HT 有三种动画的方式，针对的点不同，这里我用到的是 schedule 主要用于在指定的时间间隔进行函数回调处理。
CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。 关于解释，文档中是这么说的，当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。...即使媒体查询返回假， 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。...有去测试的同学会发现，div 的背景色并没有想代码中设置的那样，在不同的 devicePixelRatio 属性值下，展现出不同的颜色，这是为什么呢？...的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。
B再给A回消息的原理同上三步骤 其中原始HTTP协议和H5新增Websocket协议不同的地方在于： “服务器发送消息给B”这里。...HTTP协议中，服务器是基于“请求 到 响应”的一个模型的 。也就是说，服务器无法主动发送消息给客户端，他必须接收一个请求才能响应。...在H5新增的Websocket协议中，实现服务器和客户端全双工的通信方式，两台机器之间只要握手成功（建立连接）后，就可以互相主动给对方发送消息。 就像我们现实中两个人聊天一样了。谁有话谁开口。...“聊天室”具体实现步骤： 初步应用代码见上篇《 HTML5 - 开发一个自己的websocket服务器》，主要记录了websocket怎么启动一个本地服务并应用的。...在之前代码的基础上，新增聊天室该有的广播内容、以及新增消息的append功能。
HTML5支持离线功能，当网络不可用时，网页还能够正常访问，部分功能还将继续使用。实现离线应用，最重要的是缓存资源，因此，离线应用核心需要定义一份描述文件，指定需要缓存的具体资源。...创建离线应用的三个步骤如下： 1. 创建描述文件 描述文件是一个以.manifest或.appcache为后缀的文本文件，其列出了所有需要缓存的内容。...指定后备资源 # 在线状态使用page.html，离线状态使用page_offline.html FALLBACK: page.html page_offline.html # NETWORK指定不缓存的资源...# * 的含义为：除了上面列出的资源，其他资源都需要从Web服务器下载 NETWORK: * 2....配置Web服务器 Web服务器必须以正确的MIME类型提供描述文件，即，response的content-type属性值必须是text/cache-manifest。
如果要开发企业内部应用，则要缴纳更高的费用购买企业账户才可以。 ...对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。...4、查看主屏上新增加的APP图标 ? 大家可以看到我们的主屏幕上已经多了一个”APP”，如果细心优化，用户完全无法区分这是一个原生应用还是HTML5应用，极大提升了用户体验。 ...接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果： ?...缓存的用法也有两篇很好的文档： 1、HTML5离线缓存 2、在客户端存储数据 最后上一段操作视频，看一下最终效果，优酷链接：http://v.youku.com
实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事...WebSocket 构建一个实时的 Web 应用，最后我们介绍了当前的主流浏览器对 HTML5 的支持情况和 WebSocket 的局限性。...不过，我们应该看到，尽管 HTML5 WebSocket 目前还有一些局限性，但是已经是大势所趋，微软也明确表达了未来对 HTML5 的支持，而且这些支持我们可以在 Windows 8 和 IE10 里看到...，我们也在各种移动设备，平板电脑上看到了 HTML5 和 WebSocket 的身影。...WebSocket 将会成为未来开发实时 Web 应用的生力军应该是毫无悬念的了，作为 Web 开发人员，关注 HTML5，关注 WebSocket 也应该提上日程了，否则我们在新一轮的软件革新的浪潮中只能做壁上观了
文章不是简单的的Ctrl C与V，而是一个字一个标点符号慢慢写出来的。我认为这才是是对读者的负责，本教程由技术爱好者成笑笑(博客：http://www.chengxiaoxiao.com/)写作完成。...介绍 我们把数据存储在浏览器，一直使用的Cookie，但其实Cookie是有很多数量和大小的限制的。现在我们不用考虑这些了，我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。...背景 虽然Web存储已经有了自己的规范（(http://dev.w3.org/html5/webstorage/) ），并且也在独立于Html5进行开发。...但Web存储通常是集中在HTML5技术之下的。 不像cookie一样，数据存储在Web Storage意味着客户端不在请求服务器了。...首先，它不会离开浏览器，其次，也允许存储更多更大的数据。W3C推荐限制在5MB之内，但是如果用户需要更多的存储，是可以在浏览器中进行设置的。当前一般浏览器会允2MB的容量。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
