<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Here comes the Sun &#187; opera</title>
	<atom:link href="http://sunng.info/blog/tag/opera/feed/" rel="self" type="application/rss+xml" />
	<link>http://sunng.info/blog</link>
	<description>47% users on this site use *nix</description>
	<lastBuildDate>Sat, 04 Feb 2012 13:08:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>HTML5 Form in Opera 11</title>
		<link>http://sunng.info/blog/2011/01/html5-form-in-opera-11/</link>
		<comments>http://sunng.info/blog/2011/01/html5-form-in-opera-11/#comments</comments>
		<pubDate>Wed, 12 Jan 2011 15:21:19 +0000</pubDate>
		<dc:creator>sunng</dc:creator>
				<category><![CDATA[装备]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[opera]]></category>

		<guid isPermaLink="false">http://sunng.info/blog/2011/01/html5-form-in-opera-11/</guid>
		<description><![CDATA[严格意义上我现在已经不能算是个web guy了，不过托Web开放的特性，咱也能评论一下。最近做个小的界面，考虑到要面向未来，HTML5又提供了丰富的表单增强。这些特性中，Firefox 3.6基本上还没有支持，Chromium 8.0有少部分支持，而真正支持比较完整的是Opera 11. autofocus 页面载入后自动将焦点转到某个input，就如以前的onload时候xxx.focus() required 指定某个input为必填，提交时会有validation，在Opera11里还会给你这样的警告并且禁止提交： email / url 指定某个input的特殊类型，提交时也会有对应的格式检查： 这样的提示可能满足不了你的替用户着想的产品经理，但是你清楚他帮你省了多少事情。而且，在DiveInfoHtml5里提到，iphone甚至为这个input做了优化，在软件盘上把空格键变得很小（因为输入邮件地址用不着），并且提供了一个@键；这就是工程师的用户体验啊。 placeholder 在input里显示提示文本： 注意到后面的红色星号了吗。这本来是我设计的一个workaround，既然Firefox 3都还不支持required validation，那么我们通过CSS来显示一个必填的提示： input&#91;required=&#34;required&#34;&#93;:after &#123; &#160; &#160; content: '(*)'; &#160; &#160; color: #F00; &#125; 结果这个伪类最后只有在Opera里实现了预期的效果，看在Stackoverflow上的讨论才得知input的:after和:before伪类只有Opera支持。 HTML5 Form这部分是一个真正务实的标准，你可以看到几乎每一个特性都是我们日常每时每刻都需要，几乎每个网站的JS都要实现的功能。标准是沟通上下游（浏览器和应用开发人员）的契约，一个真正反应相互需求的标准才是有实际价值的。]]></description>
			<content:encoded><![CDATA[<p>严格意义上我现在已经不能算是个web guy了，不过托Web开放的特性，咱也能评论一下。最近做个小的界面，考虑到要面向未来，HTML5又提供了丰富的表单增强。这些特性中，Firefox 3.6基本上还没有支持，Chromium 8.0有少部分支持，而真正支持比较完整的是Opera 11.</p>
<p><strong>autofocus</strong><br />
页面载入后自动将焦点转到某个input，就如以前的onload时候xxx.focus()</p>
<p><strong>required</strong><br />
指定某个input为必填，提交时会有validation，在Opera11里还会给你这样的警告并且禁止提交：<br />
<a href="http://www.flickr.com/photos/40741608@N08/5349345730/" title="Screenshot - 01122011 - 10:53:41 PM by 贝小塔, on Flickr"><img src="http://farm6.static.flickr.com/5083/5349345730_f6696fd07e.jpg" width="329" height="144" alt="Screenshot - 01122011 - 10:53:41 PM" /></a></p>
<p><strong>email / url</strong><br />
指定某个input的特殊类型，提交时也会有对应的格式检查：<br />
<a href="http://www.flickr.com/photos/40741608@N08/5348736441/" title="Screenshot - 01122011 - 10:54:41 PM by 贝小塔, on Flickr"><img src="http://farm6.static.flickr.com/5081/5348736441_78accc61ac.jpg" width="344" height="140" alt="Screenshot - 01122011 - 10:54:41 PM" /></a></p>
<p>这样的提示可能满足不了你的替用户着想的产品经理，但是你清楚他帮你省了多少事情。而且，在DiveInfoHtml5里提到，iphone甚至为这个input做了优化，在软件盘上把空格键变得很小（因为输入邮件地址用不着），并且提供了一个@键；这就是工程师的用户体验啊。</p>
<p><strong>placeholder</strong><br />
在input里显示提示文本：<br />
<a href="http://www.flickr.com/photos/40741608@N08/5349345562/" title="Screenshot - 01122011 - 10:52:18 PM by 贝小塔, on Flickr"><img src="http://farm6.static.flickr.com/5209/5349345562_d658665b92.jpg" width="441" height="63" alt="Screenshot - 01122011 - 10:52:18 PM" /></a></p>
<p>注意到后面的红色星号了吗。这本来是我设计的一个workaround，既然Firefox 3都还不支持required validation，那么我们通过CSS来显示一个必填的提示：</p>
<div class="codecolorer-container css twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">input<span style="color: #00AA00;">&#91;</span>required<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;required&quot;</span><span style="color: #00AA00;">&#93;</span><span style="color: #3333ff;">:after </span><span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">'(*)'</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#F00</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span></div></div>
<p>结果这个伪类最后只有在Opera里实现了预期的效果，看<a href="http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field">在Stackoverflow上的讨论</a>才得知input的:after和:before伪类只有Opera支持。</p>
<p>HTML5 Form这部分是一个真正务实的标准，你可以看到几乎每一个特性都是我们日常每时每刻都需要，几乎每个网站的JS都要实现的功能。标准是沟通上下游（浏览器和应用开发人员）的契约，一个真正反应相互需求的标准才是有实际价值的。</p>
]]></content:encoded>
			<wfw:commentRss>http://sunng.info/blog/2011/01/html5-form-in-opera-11/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Opera-mini</title>
		<link>http://sunng.info/blog/2009/07/opera-mini/</link>
		<comments>http://sunng.info/blog/2009/07/opera-mini/#comments</comments>
		<pubDate>Fri, 10 Jul 2009 01:47:42 +0000</pubDate>
		<dc:creator>sunng</dc:creator>
				<category><![CDATA[装备]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[opera]]></category>

		<guid isPermaLink="false">http://www.classicning.com/blog/?p=95</guid>
		<description><![CDATA[偌大的互联网，却找不到一个带提交按钮的文本框。 昨天为了能看一眼facebook上的留言（汗，其实我对翻墙的要求也够低的）可谓无所不用其极。首先是用tor+privoxy，结果tor的速度实在是太慢，除了tor的测试页面其它根本就打不开。然后看到了ssh -D的方法，这个速度也是很慢，但是不小心打开了twitter.com，然后又海枯石烂地登录成功，看到没有新的direct msg，也就算达到目的了。 再后来就看到opera-mini的在线DEMO，一个j2me simulator，借助这个applet可以顺顺利利地打开facebook twiiter之类的网站，但是因为Linux上JRE中文字体的问题，看起来多少还有点吃力。然后我就弱弱地睡下来，片刻之后才反应过来这一切多有意思。看看Opera-mini最大的卖点： http://en.wikipedia.org/wiki/Opera_Mini#Functionality 在Server和终端之间有一个Proxy，这个Proxy整好运行在墙外面，也就不奇怪twitter facebook这样的网站可以轻松地访问了。不仅仅是在线demo，用手机终端也是一样的道理。我之前还一直以为是中移动的疏忽，看来真是错怪他们的工作了，呵呵。 http://en.wikipedia.org/wiki/Opera_Mini#Functionality]]></description>
			<content:encoded><![CDATA[<p>偌大的互联网，却找不到一个带提交按钮的文本框。</p>
<p>昨天为了能看一眼facebook上的留言（汗，其实我对翻墙的要求也够低的）可谓无所不用其极。首先是用tor+privoxy，结果tor的速度实在是太慢，除了tor的测试页面其它根本就打不开。然后看到了ssh -D的方法，这个速度也是很慢，但是不小心打开了twitter.com，然后又海枯石烂地登录成功，看到没有新的direct msg，也就算达到目的了。</p>
<p>再后来就看到opera-mini的在线<a title="Opera Mini Demo" href="http://demo.opera-mini.net/demo.html" target="_blank">DEMO</a>，一个j2me simulator，借助这个applet可以顺顺利利地打开facebook twiiter之类的网站，但是因为Linux上JRE中文字体的问题，看起来多少还有点吃力。然后我就弱弱地睡下来，片刻之后才反应过来这一切多有意思。看看Opera-mini最大的卖点：</p>
<p>http://en.wikipedia.org/wiki/Opera_Mini#Functionality</p>
<p>在Server和终端之间有一个Proxy，这个Proxy整好运行在墙外面，也就不奇怪twitter facebook这样的网站可以轻松地访问了。不仅仅是在线demo，用手机终端也是一样的道理。我之前还一直以为是中移动的疏忽，看来真是错怪他们的工作了，呵呵。</p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 44px; width: 1px; height: 1px;">http://en.wikipedia.org/wiki/Opera_Mini#Functionality</div>
]]></content:encoded>
			<wfw:commentRss>http://sunng.info/blog/2009/07/opera-mini/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>看图不说话</title>
		<link>http://sunng.info/blog/2009/03/%e7%9c%8b%e5%9b%be%e4%b8%8d%e8%af%b4%e8%af%9d/</link>
		<comments>http://sunng.info/blog/2009/03/%e7%9c%8b%e5%9b%be%e4%b8%8d%e8%af%b4%e8%af%9d/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 14:36:21 +0000</pubDate>
		<dc:creator>sunng</dc:creator>
				<category><![CDATA[自话]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[opera]]></category>

		<guid isPermaLink="false">http://www.classicning.com/blog/?p=35</guid>
		<description><![CDATA[EXE是Windows上的可执行文件，那么在Linux上系统默认是如何对待它的呢。请看下图。]]></description>
			<content:encoded><![CDATA[<p>EXE是Windows上的可执行文件，那么在Linux上系统默认是如何对待它的呢。请看下图。</p>
<p><img class="alignnone" title="看图不说话" src="http://pic.yupoo.com/classicning/7941771206a6/onmtjqmk.jpg" alt="" width="440" height="256" /></p>
]]></content:encoded>
			<wfw:commentRss>http://sunng.info/blog/2009/03/%e7%9c%8b%e5%9b%be%e4%b8%8d%e8%af%b4%e8%af%9d/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

