查看: 7373|回复: 10

[其他] 移动应用开发入门-HTML5

2 主题	2 好友	217 积分

中级会员

Rank: 3 Rank: 3

性别: 保密

发消息

电梯直达

楼主

发表于 2013-10-18 20:45:19 |只看该作者 |倒序浏览

作者：sky7987　日期：2013-10-19　原文地址：http://www.skywj.com/thread-9229-1-1.html

　　从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

移动开发难点

　　1、手机操作系统很多： Android ,Windows phone 7, Windows phone 8, iOS,Symbian S60, UIQ, Windows Mobile, Linux, Brew、 Blackberry……，要想克服不同手机平台的差异，实现应用的统一覆盖异常困难；
　　2、手机开发很难：开发人员稀缺，成本太高，进度太慢，无线网络太复杂，门槛障碍太多……；
　　3、软件或互联网公司如果为了实现移动应用，而把精力投入到并非自己所长的领域，无疑将会得不偿失。
　　4、行业需要专业的角色，来解决开发应用过程中的各种难题，将复杂难题封装简单，把各种异构封装透明，降低大家进入这个市场的门槛。

解决之道

　　目前，随着移动应用市场的不断扩大，移动开发[1]的市场得到长足的发展。无线中间件（也称“移动中间件”）的出现，无疑提供了一个完美的解决方案：

　　1. 跨平台：中间件系统都号称跨平台，一次开发，可以适用于不同的平台。
　　2. 门槛高：用WEB开发技术（HTML+JS+CSS) 开发移动应用，极大地降低了门槛，提高了效率。
　　3. 公司转型：软件和互联网公司利用中间件系统开发移动应用，完全是在发挥原有的长处，而无需投入任何资源学习新知识。
　　4. 专业的人做专业的事：无线中间件（移动中间件）的原理就是把原生的功能封装打包成简单的API，开发人员只需要了解调用这些API的方法，即可完成移动开发。
　　无线中间件（移动中间件）的产品：国外--PhoneGap,
　　国内 - Rexsee EMS、MKey、xMobi
　　其中Rexsee应该是目前唯一支持HTML5[3]的开源的、免费的移动中间件；Mkey的特点是跨平台

　　HTML5能开发跨平台的应用，运行至需要一个支持HTML5的浏览器，学习HTML5就是你走向移动端开发的第一步。

　　以下是我花了1个小时，做出来的一个旋转的太极，还有背景音乐。这个页面仅支持谷歌浏览器

<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8" />
<style>
#yuan{
width:296px;
margin:0px auto;
height:148px;
border-top:2px solid black;
border-right:2px solid black;
border-bottom:150px solid black;
border-left:2px solid black;
border-radius:300px;
position:relative;/*设置为对象的参照物*/
/*旋转*/
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinnerRotate {//设置动画效果的关键帧
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
#yuan::after{
content:'';
width:40px;
height:40px;
border:54px solid black;
position:absolute;
left:0px;
top:75px;
border-radius:148px;
background:#fff;
}
#yuan::before{
content:'';
width:40px;
height:40px;
border:54px solid #fff;
position:absolute;
right:0px;
top:75px;
border-radius:148px;
background:black;
}
</style>
</head>
<body style"width:100%; height:100%">
<div id="yuan">
</div>
<audio src="http://small.cdn.baidupcs.com/file/b4f5a44680a4c28334087a50fb50ec82?xcode=5f77327792b66738111749197b5265df18c9831af7f00b77&fid=1110638175-250528-3419422970&time=1382057239&sign=FDTAXER-DCb740ccc5511e5e8fedcff06b081203-z2Kv%2FkhWukFVL4E84%2Fa5ZV8bElU%3D&to=sc&fm=N,B,T,t&expires=8h&rt=sh&r=929862158&logid=2704752184&sh=1&fn=%E9%BB%91%E5%AE%A2%E4%B9%8B%E9%9F%B3.mp3" autoplay="autoplay" loop="loop" >
你的浏览器不支持audio标签！
</audio>
</body>
</html>