HTML5桌面通知Notification



HTML5桌面通知Notification。桌面通知,我们经常看到的比如QQ在右下角的消息提醒。在网页中我们也可以用Javascript模拟实现这一功能,只是这个消息框是浏览器中进行控制的。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒通过桌面向用户发出浏览器的通知。现在Html5中可以实现这一功能。在手机端,也就Blackberry browser实现了(完全实现),实现这一功能的浏览器均以webkit为内核。应用的范围还很有限,在HTML5如火如荼的今天,我们依然可以做个很好的展望。

API介绍
  桌面提醒[......]

Read more

WebApp的meta标签



apple-mobile-web-app-capable

设置Web应用是否以全屏模式运行。

语法:
<meta name=”apple-mobile-web-app-capable” content=”yes”>
说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性:
iOS 2.1 +

apple-mobile-web-app-status-bar-style

设置Web App的状态栏(屏幕顶[......]

Read more

HTML5 语音输入x-webkit-speech

HTML5 语音输入x-webkit-speech。最近发现了一个HTML5大功能,可直接给输入框增加语音输入的功能 。它的实现方法是如此的简单,只需要在input标签中加入x-webkit-speech即可。

model:

<body>
<input type=”text” x-webkit-speech>
</body>

效果:

HTML5 语音输入x-webkit-speech - 云谦小记 - 云谦小记
大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了:
当然还有一些其他的参数,比如设置语音限制语言种类:<input type=”text” x-webkit[......]

Read more

如何在手机上调试webapp方法&&viewport的作用

如何在手机上调试webapp方法&&viewport的作用?首先连接局域网,在需要调试的webapp所在的电脑上启动服务器(wamp处于在线状态),获取到相应电脑的ip地址,在手机端输入相应ip地址,即可进行访问。

使用viewport:
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点……
vi[......]

Read more

配置Xcode的方法步骤

配置Xcode的方法步骤。打开Xcode,点击Create Cordan-based Application

输入工程名,不勾选Use Automatic
选择Devices, Supported的运行环境 iPad或iPhone
单击RUN,运行一次
在运行结束后右键单击相应的文件夹,选择show in Finder
将WWW文件夹放置在“蓝色的”文件夹上面
再次单击RUN,运行一次,即可成功
在AppDelegate.m文件中能够修改打开的默认页面(默认为index.html)
在MainViewController.m中添加:
theWebView.scrollVi[......]

Read more

viewport——WEB前端开发 HTML5开发 移动端知识实例源码介绍

viewport——WEB前端开发 HTML5开发 移动端知识实例源码介绍,viewport的作用是什么?

<meta name=”viewport” content=”width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;”/>

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过[......]

Read more

web前端开发规则注意事项要点总结

web前端开发规则注意事项要点总结。

降低网络成本

1.最大限度减少HTTP请求数。
2.控制网站流量,合并样式图片。
3.图片优化压缩处理,无损地减少图片体体积。
4.减少CSS文件的体积,合并css样式文件。
5.提高客户端渲染速度,尽量不使用占用过多CUP,占用过多内存的代码 如: text-indnt:-9999px 、IE滤镜等
6.减少HTML的嵌套,减少无语义代码。 如: <div class=”clear”></div>消除浮动等

Web内容可访问性 / 兼容性

1.电脑浏览器兼容性。
2.电脑分辨率兼容性。
3.其[......]

Read more

html5开发windows8应用 windows8介绍

html5开发windows8应用 windows8介绍。html5作为windows8平台的native开发语言之一,让html5的发展到达了一个新的高度,以前做过html5 for ios或for android的童鞋就应该知道,用html5做一款ios或者android的应用是有多幸苦,实现简单的图片下载功能都需要用原生语言写一个插件。而现在,我们终于从一个外来者的变成了一个有名分的人。可以调用本地api,实现很多非常强大的功能。

我们既然要在这个平台上开发应用,那么肯定需要对这个平台有一些了解:

一、触屏操作系统

Windows8的最大改变是它的操作逻辑的改变,这也是[......]

Read more

HTML5有哪些优势

HTML5有哪些优势?

首先,从未来发展来说,2012年Adobe主动放弃移动端Flash技术支持,转向HTML5,国内百度、腾讯等蜂拥与W3C组织合作,宣布参与HTML5标准定制,来自各方面的力量(包括浏览器、开发者、用户等)共同推动HTML5向前发展。据Gartner 公司分析,HTML 5 技术的广泛应用可能还需要 5 到 10 年的时间。对于一门技术来说,可以说,还有一个很大的提升与发展空间。

对于用户来说,提高了用户体验,加强了视觉感受。HTML5技术在移动端,能够让应用程序回归到网页,并对网页的功能进行扩展,用户不需要下载客户端或插件就能够观看视频、玩游戏,操作更加简单[......]

Read more

HTML5发展历史

HTML5发展历史介绍。

2008年,HTML5发布首个版本
2010年 1 月,YOUTUBE 推出 HTML5 播放器
2010年 4 月,乔布期发表公开信“炮轰”FLASH
2010年 5 月,Scribd 文档转化成 HTML5
2010年 8 月,Arcade Fire 拍摄了 HTML5 技术的交互式电影
2010年 12 月,Chrome Web Store 上线
2011年 3 月,迪士尼收购 HTML5 游戏引擎开发商
2011年 7 月,潘多拉电台开始转向 HTML5
2011年 8 月,亚马逊推出 KINDLE 云阅读器
2011年 8 月,Twitt[......]

Read more