SKY外语计算机学习

标题: 移动应用开发入门-HTML5 [打印本页]
作者: sky7987    时间: 2013-10-18 20:45
标题: 移动应用开发入门-HTML5
作者：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个小时，做出来的一个旋转的太极，还有背景音乐。这个页面仅支持谷歌浏览器
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meat charset="utf-8" />
  5.                 <style>
  6.                         #yuan{
  7.                                 width:296px;
  8.                                 margin:0px auto;
  9.                                 height:148px;
  10.                                 border-top:2px solid black;
  11.                                 border-right:2px solid black;
  12.                                 border-bottom:150px solid black;
  13.                                 border-left:2px solid black;
  14.                                 border-radius:300px;
  15.                                 position:relative;/*设置为对象的参照物*/
  16.                                 /*旋转*/
  17.                                 -webkit-animation-name: spinnerRotate;
  18.                                  -webkit-animation-duration: 2s;
  19.                                  -webkit-animation-iteration-count: infinite;
  20.                                  -webkit-animation-timing-function: linear;

  22.                         }
  23.                         @-webkit-keyframes spinnerRotate {//设置动画效果的关键帧
  24.                          from {
  25.                                   -webkit-transform:rotate(0deg);
  26.                          }
  27.                          to {
  28.                                   -webkit-transform:rotate(360deg);
  29.                                  }
  30.                         }
  31.                         #yuan::after{
  32.                                 content:'';
  33.                                 width:40px;
  34.                                 height:40px;
  35.                                 border:54px solid black;
  36.                                 position:absolute;
  37.                                 left:0px;
  38.                                 top:75px;
  39.                                 border-radius:148px;
  40.                                 background:#fff;  
  41.                         }
  42.                         #yuan::before{
  43.                                 content:'';
  44.                                 width:40px;
  45.                                 height:40px;
  46.                                 border:54px solid #fff;
  47.                                 position:absolute;
  48.                                 right:0px;
  49.                                 top:75px;
  50.                                 border-radius:148px;
  51.                                 background:black;  
  52.                         }
  53.                 </style>
  54.         </head>
  55.         <body style"width:100%; height:100%">
  56.                 <div id="yuan">
  57.                 </div>
  58.                 <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" >
  59.                         你的浏览器不支持audio标签！
  60.                 </audio>
  61.         </body>
  62. </html>
复制代码
运行效果





作者: ＳＫＹ吖頭    时间: 2013-10-19 10:44
昨天看到一个太极图是 小十万发的，难道你就是
作者: 许半仙    时间: 2013-10-19 21:39
哈哈，不错，虽然我基础不够看不懂。。。
作者: SKY流氓兔    时间: 2013-10-20 00:50
冒泡。。。。
作者: SKY流氓兔    时间: 2013-10-20 00:50
貌似这个就是昨天的太极诶。。。
作者: sky7987    时间: 2013-10-20 00:51
SKY流氓兔 发表于 2013-10-20 00:50
冒泡。。。。

........
作者: SKY流氓兔    时间: 2013-10-20 00:52
sky7987 发表于 2013-10-20 00:51
........

作者: sky7987    时间: 2013-10-20 01:00
SKY流氓兔 发表于 2013-10-20 00:52

所噶
作者: sky7987    时间: 2013-10-20 01:04
许半仙 发表于 2013-10-19 21:39
哈哈，不错，虽然我基础不够看不懂。。。

。。。。。你做c++的 。。
作者: SKY流氓兔    时间: 2013-10-20 01:20
sky7987 发表于 2013-10-20 01:00
所噶

0.0  你这样也可以？？？？？
作者: sky7987    时间: 2013-10-22 23:31
许半仙 发表于 2013-10-19 21:39
哈哈，不错，虽然我基础不够看不懂。。。

大仙  不需要基础的。。。



欢迎光临 SKY外语计算机学习 (http://skywj.com/) Powered by Discuz! X2.5