HTML 5 Notifications api 桌面提醒接口

google chrome 浏览器支持html5 Notifications api ,用这个api 可以创建原生的提示信息,类似像OS X的Growl提示。

需要注意的是,您需要检查用户是否已提供您的站点许可来使用这个 API。如果没有,您必须请求许可,即是:需要用户手动按“允许”按钮。

完整实例:

<!DOCTYPE HTML>
<!-- http://dhtmlexamples.com/2011/01/28/creating-os-notifications-in-html5/ -->
<html>
<head>
    <title>Creating OS notifications in HTML5</title>
</head>
<body>

    <form>
        <input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />
        <input type="button" value="Send OS notification" onclick="notify();" />
    </form>

    <script type="text/javascript">
        const AUTO_CLOSE_DELAY_SECONDS = 5;

        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }

        function notify() {
            var icon = "accept.png";
            var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";
            var body =  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";

            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
                    popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, AUTO_CLOSE_DELAY_SECONDS * 1000);;
                    }
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>

扩展参考:
http://slides.html5rocks.com/#notifications-api
http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification
http://www.html5rocks.com/en/tutorials/notifications/quick/

Html5经典案例:《我学到的关于浏览器和 Web 的20样东西》

前言:

文章转自:http://www.chromi.org/archives/8522

认真观摩了下,整个网站所使用的技术和效果,都是学习Html5 和css3的好例子。当然,里面的内容也是很值得一读的。可惜的是,网站已经被墙了,如果要看的话,请自行翻墙查看吧。

如果你不懂E文,可以查看翻译:http://article.yeeyan.org/view/75834/153243

========================================

Google Chrome 团队今天发布了一个新网站——我学到的关于浏览器和 Web 的20样东西(20 Things I Learned about Browsers and the Web),从网站的名字上就可以了解到这个网站的用途了。Google 在 Chrome 官方博客中说这个网站是继两年前推出“Chrome 漫画书”和上线“何谓浏览器”网站后的又一服务于技术菜鸟的网站。网站内容以图书的方式呈现。

值得一提的是,该网站完全基于 HTML5 和 CSS3 编写,采用了大量的 HTML 5技术,实现了诸如翻页、离线阅读、自动书签等等酷炫的功能,具体采用的技术和实现的功能如下:

使用 Application Cache API 实现了离线阅读功能,只要你在浏览器中访问过一次该网站并阅读了内容,那么今后即使你不能上网也可以阅读。

使用 Local Storage API 实现了“重开后继续阅读”的功能,比如你读到了一半,突然有事关闭了浏览器,那么下次打开该网站时会自动提示你是否从之前关闭的页面开始阅读。

使用 History API 优化 URL 结构使内容和页面能够被搜索引擎索引。

使用 HTML5 canvas element 增强了书的封面和内页之间的切换体验,同时翻页效果以及翻页时产生的阴影和高光等都是通过 JavaScript 和浏览器绘图技术生成的。

CSS3 也功不可没,比如 Web 字体、动画、渐变以及阴影都由它实现,大幅度提升了视觉吸引力。

由于这个网站采用的是标准的 HTML5 与 CSS3 技术,所以在支持 HTML5 技术的最新浏览器上都可以完美呈现,你可以通过 www.20thingsilearned.com 或者 goo.gl/20things 来访问该网站。

【译】用html5和css3 开发博客实例(2)

接上一篇《用html5和css3 开发博客实例(1)》,这部分内容,主要是以CSS为主,做一个博客界面。

6、用 CSS3添加样式

CSS3建立在早期版本的CSS基础上。并增加了许多新功能,包括新的选择器、伪类和属性。用这些新 功能,使其更易于进行布局。让我们继续深入。

基本设置

首先,定义一些有关网 页排版和背景颜色等方面的基本样式。同CSS2.1代码差不多

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

现在我们来写一个简单的代码用以设置 margin 和 padding 的样式。具体操作环境中我会用更完整的CSS重置这段代码,就像Eric Meyer的那样(CSS 2.1)。但仅在本教程所涉及的范围内。
当我们告诉浏览器呈现所有HTML5块元素时,浏览器虽然会加载那些不认可的元素(这就是为什么HTML 5向下兼容的原因),但默认情况下并不知道如何渲染。
请注意我是如何选择字体大小的,用像素而不是用ems或%。这是为了保持该教程的先进性。当主流浏览器完全支持HTML5和CSS3时,我们将获得页面缩放功能,而不仅仅是字体大小。由于浏览器能用任意方式改变网页大小,就消除 了需要相对单位来界定大小的因素。
应用基本样式后看看页面的变化。现在我们可以进入到页面样式设置的其余部分了。对于页头来说无 需额外的样式,因此我们将直接进入导航样式的设置中。

设置导航样式

重点是注意body的宽度被定义为940px,且已经居中。导航栏要与窗口等宽,所以要应用一些其他样式:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

将导航元素设为绝对定位,对齐到窗口左侧,并令其与窗口等宽。将嵌套的列表设为居中以显示布局的边界:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

现在,我们将定义一些其他样式,使导航项的外观看起来漂亮些并基于布局使其对齐到网格。包括一些重点页面的样式和一个自定义样式的订阅链接。

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

设置导言样式

导言标记非常简单:就是带有标题和简介的 一小节文字。但是,我们将使用一些CSS3的新技巧,使其看起来更具吸引力。

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

我们使用了两个新的属性。首先是background-size属性,它允许你缩放背景图像。就我们而言, 将x、y两轴都缩放到100%。如果添加了更多的内容可以让边框伸缩,渐变背景也将同时伸缩。

其次是border-radius属性,适 用于带圆角的元素。我们每个圆角的 半径都设为22px。你也可以给每个圆角指定不同的值或选择仅将某个的角设为圆角。

不幸的是,在主流浏览器中这个性能未得以得到充分发 挥。但是,我们可以通过使 用提供商的特定属性获得一些支持。Safari、Opera及 Konqueror的新版本都支持Background-size。Safari和Firefox的新版本支持Border-radius。

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

既然我们有一个background-color定义,个别浏览器不支持background-size也没有多大 关系,如Firefox。现在我们只需要设置头部和文本的风格即可。

#intro h2, #intro p {
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

图片可以很轻易地被指定为#intr的第二个背景图片,CSS3支持这样。

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

我们赋予这两个背景图片明确的尺寸以确保他们不重叠,请记住设置背景大小的简略标记法。

不幸的是当前没有浏览器能可靠支持,因此我们必须采用古老的做法:通过内嵌图片,用CSS定位。见最后一个例子,看看如何做。

9、内容域和边栏的风格化

内容域和边栏要相互对齐。传统的方式是利用浮动,但在CSS 3中我们将用表格!

“啥?用表格?”你可能会有疑问并感到困惑。你可能学过,在网页布局中使用表格绝对是一大禁忌,现在也依然是。你不应使table元素来布局。但在CSS 3中,我们可以让某些元素行为更像表!首先,我们需要一些div来群组章节部分,用更合理一点的方式。

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

一切仍然符合语义化标准,现在我们要给他样式。我们希望#content div表现出表格的特性,用#mainContent,就使其如表的单元格一般。

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

好了!没有浮动、伪纵列背景图片、清除或设置间距。我们做出的内容就像一个表,这让我们更易于排版。

10、博客帖子的风格

这个博客帖子页眉部分的风格很一般,因此我们将跳到最有趣的部分:多行布局。

多行布局

以前文本的多行布局离不开手动拆分段落。但在CSS3里它就像一块蛋糕,虽然对于当前正使用的浏览器来说,我们 必须增加一个div来解决这种情况。

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

现在我们可以添加两个简单的属性然后收工。

.blogPost div {
	column-count: 2;
	column-gap: 22px;
}

我们希望第二列有22像素的间距。这需要额外的div,因为目前还没有一个元素支持超过一列的跨度。但在未来你可以指定column-span,那时我们只需这么写:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

当然,仅有Safari和Firefox浏览器支持 column-count和column-gap属性。我们目前必须使用提供商特定的属性。

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

如果你仔细观察博客帖子里的图片,你会发现一个投影。我们可以使用CSS3和box-shadow属性来生成。

阴影

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}

第一个“3px”告诉浏览器阴影的水平位置。第一个“3px”告诉浏览器垂直位置。最后的“7px”确定模糊值的大小。如果设为0就是实色。最后我们定义阴影的基本色调,虽然放在最后说,但并非不重要。颜色的浓淡取决于你设置的模糊值。

这个属性也许并不令人吃惊,因为它还未被所有的浏览器支持。事实上,该属性只能在Safari浏览器中工作,你必须使用提供商特定的属性。

.blogPost img {
	margin: 22px 0;
	-webkit-box-shadow: 3px 3px 7px #777;
}

11、为评论设置斑马纹

所谓的斑马纹即网站中常用的隔行换色,一般的做法是用程序遍历所有奇数元素并以突出的颜色显示。CSS3介绍了伪类“nth-child”,这使隔行换色简单到无以复加的地步,从此不必再用编程做这件事了。我们将用这个属性来为评论设置隔行换色。

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

“2n+1”这个值看起来很古怪,但如果明白其意义就很简单了:

  • 2n表示选择第2n项,其中n为变量,即n=0时不选择,n=1时选择第2项,n=2时选择第4项,n=3时选择第6项等依次类推。如果为3n表示选择第 3n项。为4n时表示选择第4n项。对隔行换色来说,2n表示每隔一行显示一个高亮项,3n表示每隔两行显示一个高亮项,4n表示每隔三行显示一个高亮项等等。
  • +1告诉浏览器从元素1开始。如果你熟悉编程,你就知道所有数组都是从0开始的,在这里也是一样。这意味着元素1实际上是同系列的第二个元素。如 2n+1,当n=0时指的是第一个元素,当n=1时指的是第三个元素,当n=2时指的是第五个元素等等。

此处,也可以简写为:

section#comments article:nth-child(odd) { ... }

这是因为该简写标准包括两个最常用的值,奇和偶。评论部分风格的其他设置,用你的新知识就可以简单理解了。

设置评论表单、页脚和侧边栏的风格

联系前面学到的CSS 3技术重新设置评论表单、页脚和侧边栏的风格。在评论表单和页脚部分我们使用在前面中用过的表格布局技术。侧边栏的border-radius则在四角都添加的圆角。

12、最终设计结果

看一下该应用最终设计的样式

我们设计的这个页面可以在Safari 4和基于WebKit的浏览器中正确呈现,因为它目前唯一支持我们所采用的CSS 3技术的渲染引擎。Firefox 3在给图片应用圆角时有一些问题,并且也不支持设置背景大小,但在布局方面则没什么问题。我们忽略Internet Explorer,因为它需要插件才能应用HTML 5。你也可以定义一些规则以获得各主要浏览器的支持,但这些不在本教程的讨论范围内。

结论

当所有浏览器都支持HTML 5和CSS 3的一天到来时建设一个网站将更容易。我们最终将停用层浮动,我们在编写背景图片或隔行换色的javascript扩展上花费更少的时间。希望我们能利用这些额外的时间来研究网页设计中长期被忽视的领域,前台优化及恰当的通信架构。

原文出处:http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

用html5和css3 开发博客实例(1)

html5 和css3是目前web前端炒得很热的2个概念,做为web前端开发者,虽然在目前的大环境下,还无法在实际项目中全面的去运用。但我们还是有必要去学习和研究。而本教程,我们则用html5和css3去构建一个博客页面,本教程旨在演示当浏览器支持新规则时如何建设网站。本教程一共分为2部分,第一部分主要介绍html5相关方面的内容,第二部分链接为:用html5和css3 开发博客实例(2)

1、Html 5

HTML5 是HTML的下一个主要版本。它引入了一些新元素,将使我们的网页合乎语义化标准。使众多搜索引擎和屏幕阅读器能轻易浏览网页,并改善大家的网络体验。此 外,HTML5还包括用于屏幕绘图的fancy API、离线存储数据、拖放等功能。好了,让我们开始设计博客页面吧!

2、基本结构

开始制作网页前,我们应该规划一个总体结构线框图:

HTML5中有特定的标记表现页眉、导航、侧边栏和页脚。先看代码,随后我再解释:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

看起来和原来的HTML标记差不多,但也有一些事要特别注意:

  • 在HTML5中,只有一个doctype声明。就在代码最顶端有<!doctype html>声明的标记。泳衣告知浏览器,它处理的是HTML文档。
  • 新标签header主要放在介绍性元素两侧,如网页标题或标识。也可以包含内容或搜索表单。每个header标记里通常包括<h1> 到<h6>等标题标记。header标记一般用于引入全页,但此处用它做简介部分。
  • nav 标记用作导航,如网站的主导航或上一页/下一页那种专门导航。
  • section 标记用于定义章节。可以包含各种标记,多个段落可以互相嵌套。
  • aside 用于侧边栏。
  • footer 标记主要包括作者、版权信息、相关链接等内容用于页脚。

这样就避免不论是页面何处都用div控制的问题。而且,这些标记更符合语义化标准。使众多搜索引擎及屏幕阅读器更容易搞清楚某个页面的内容。

3、编写导航

同HTML4或XHTML中所用的导航代码一样,这里也用无序列表。

<nav>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
		<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
	</ul>
</nav>

4、编写导言

用section标记在文章中定义章节。当 前,我们只要一点点内容。

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

给section标签一个id以便样式被修改时能找到它。用header标记包含h2元素。除了描述整个文章,header标记还应当用来描述个别段落。

5、编写主要内容区

我们的主要内容区分为三个部分:博客帖子、评论及评论表单。用HTML5中新结构标记的知识,应该很容易制作。

编写博客文章

介绍过标签后,就可以编写博客文章区域块的代码了。

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh,
sodales ultricies elementum vel, fermentum id tellus. Proin metus odio,
ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

此段代码中,用article标记制作整个博客帖子。article标记在博客网站,讨论网站,百科全书网 站中表示独立条目的,用在这里是个不错的主意。由于我们要查看目前唯一文章的唯一帖子的详细资料,因此在博客的头版用article标记制作整个博客文章。

对博客帖子而言header标记作用于header和元数据。告诉用户帖子作者、谁写的及帖子有多少评论等。注意添加时间戳标记。该标记也是HTML5新加的,用于对特定时间进行标记。日期时间属性应遵照此格式:

  1. year后跟着一个破折号
  2. month后跟着一个破折号
  3. 日期
  4. 字母T指本地时间
  5. 本地时间格式为hh:mm:ss
  6. GMT表示时区。假如我在丹麦,这里比格林尼治时间快1个小时,那就应写成 +01。假如你在科罗拉多州,你会比格林尼治时间慢7个小时,因此要写为-07。

评论代码

评论代码极为简单。没用到新标记或属性。

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
</section>

制作评论表单

在HTML5中增强表单功能。你不用再编必填字段,电子邮件等客户端验证程序。浏览器会替你关注这方面。

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

新增表单有两个新输入类型,emailurl。Email要求用户必须输入合法的E-mail地址,url要求用户必须输入合法网址。如果你设置了required属性,用户就不能提交空字段。“Required”是个布尔属性,HTML5的新属性。

编写侧栏和页脚

编写侧栏和页脚的代码简单极了。无非是在aside- 和 footer- 标记里加几个章节及一些内容。

最后,你可以在这里查看没有添加样式表的源码。现在给它添加样式表。