<?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>Alpha Idea</title>
	<atom:link href="http://www.alphaidea.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.alphaidea.com/blog</link>
	<description>专注RIA, 用户体验</description>
	<lastBuildDate>Mon, 27 Jun 2011 03:57:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>不用图片, 用CSS3做酷酷的Login</title>
		<link>http://www.alphaidea.com/blog/css3-cool-transition-effect-login-ui/</link>
		<comments>http://www.alphaidea.com/blog/css3-cool-transition-effect-login-ui/#comments</comments>
		<pubDate>Fri, 24 Jun 2011 07:58:18 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[transition]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=838</guid>
		<description><![CDATA[在线效果演示 &#60;style type=&#34;text/css&#34;&#62; input &#123; border: none; outline: none; -webkit-border-radius:3px; border-radius:3px; &#125; input:hover &#123; -webkit-box-shadow:0 0 3px #9fc0e6; box-shadow:0 0 3px #9fc0e6; &#125; input:focus, input:active &#123; -webkit-box-shadow:0 0 30px #9fc0e6; box-shadow:0 0 10px #9fc0e6; &#125; input &#123; -webkit-transition:0.5s ease all; &#8230; <a href="http://www.alphaidea.com/blog/css3-cool-transition-effect-login-ui/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.alphaidea.com/blog/tutorial/css3Login/" target="_blank">在线效果演示</a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/06/css3-login.jpg" class="highslide-image" onclick="return hs.expand(this);"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/06/css3-login.jpg" alt="css3-login" title="css3-login" width="500" height="269" class="alignnone size-full wp-image-839" /></a></p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-size:12px;">&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
input <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	-webkit-border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
	border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
input<span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span>
	-webkit-box-shadow<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">3px</span> <span style="color: #cc00cc;">#9fc0e6</span><span style="color: #00AA00;">;</span>
	box-shadow<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">3px</span> <span style="color: #cc00cc;">#9fc0e6</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
input<span style="color: #3333ff;">:focus</span><span style="color: #00AA00;">,</span> input<span style="color: #3333ff;">:active </span><span style="color: #00AA00;">&#123;</span>
	-webkit-box-shadow<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">30px</span> <span style="color: #cc00cc;">#9fc0e6</span><span style="color: #00AA00;">;</span>
	box-shadow<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">10px</span> <span style="color: #cc00cc;">#9fc0e6</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
input <span style="color: #00AA00;">&#123;</span>
	-webkit-transition<span style="color: #00AA00;">:</span>0.5s ease all<span style="color: #00AA00;">;</span>
	-moz-transition<span style="color: #00AA00;">:</span>0.5s ease all<span style="color: #00AA00;">;</span>
	-o-transition<span style="color: #00AA00;">:</span>0.5s ease all<span style="color: #00AA00;">;</span>
	transition<span style="color: #00AA00;">:</span>0.5s ease all<span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/css3-cool-transition-effect-login-ui/feed/</wfw:commentRss>
		<slash:comments>2955</slash:comments>
		</item>
		<item>
		<title>ySlow建议js代码都放到页面底部，但是为什么大多数网站都没有这么去做？</title>
		<link>http://www.alphaidea.com/blog/yslow-js-bottom/</link>
		<comments>http://www.alphaidea.com/blog/yslow-js-bottom/#comments</comments>
		<pubDate>Wed, 22 Jun 2011 16:10:14 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[网站性能优化]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=831</guid>
		<description><![CDATA[之前在知乎上看到这样一个问题：http://www.zhihu.com/question/19699972 我想大多数刚开始研究网站性能,和ySlow的前端都或多或少有这样的疑惑，以下是我的理解： Yahoo 建议JS代码放在页面底部是因为某些浏览器(IE6,7 Firefox1.5,2)并发连接数只有2个(!同一域名下)，使浏览器解析JS时会造成阻塞。 但大多数大型网站，会将JS放在二级域名服务器下，比如：src.xxxx.com。所以不会有太多阻塞现象。 还有一种是动态生成脚本元素也不会阻塞。 Google Analytics 之前也建议把他们的的脚本放在 < /body > 之上。 新的版本用了这种方法后，他们更希望把代码放在 < /header > 之上。 var ga = document.createElement&#40;'script'&#41;; ga.type = 'text/javascript'; ga.src = 'ga.js'; var s = document.getElementsByTagName&#40;'script'&#41;&#91;0&#93;.appendChild&#40;ga&#41;;]]></description>
			<content:encoded><![CDATA[<p>之前在知乎上看到这样一个问题：<a href="http://www.zhihu.com/question/19699972">http://www.zhihu.com/question/19699972</a><br />
我想大多数刚开始研究网站性能,和ySlow的前端都或多或少有这样的疑惑，以下是我的理解：</p>
<p>Yahoo 建议JS代码放在页面底部是因为某些浏览器(IE6,7 Firefox1.5,2)并发连接数只有2个(!同一域名下)，使浏览器解析JS时会造成阻塞。<br />
但大多数大型网站，会将JS放在二级域名服务器下，比如：src.xxxx.com。所以不会有太多阻塞现象。</p>
<p>还有一种是动态生成脚本元素也不会阻塞。<br />
Google Analytics 之前也建议把他们的的脚本放在 < /body > 之上。<br />
新的版本用了这种方法后，他们更希望把代码放在 < /header > 之上。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-size:12px;"><span style="color: #003366; font-weight: bold;">var</span> ga <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> ga.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'text/javascript'</span><span style="color: #339933;">;</span>
ga.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'ga.js'</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>ga<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/yslow-js-bottom/feed/</wfw:commentRss>
		<slash:comments>1858</slash:comments>
		</item>
		<item>
		<title>转几个有用的apache设置</title>
		<link>http://www.alphaidea.com/blog/userful-apache-setting/</link>
		<comments>http://www.alphaidea.com/blog/userful-apache-setting/#comments</comments>
		<pubDate>Mon, 13 Jun 2011 02:12:53 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[.htaccess]]></category>
		<category><![CDATA[网站性能优化]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=814</guid>
		<description><![CDATA[全文十条：http://www.mangguo.org/10-useful-htaccess-snippets/ 另外还有一篇：http://uicss.cn/promotion-loading-rate/ 防止目录列表 Options -Indexes 通过压缩静态资源减少页面大小 (ySlow 35条rules之一的Gzip压缩) AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html &#60;ifmodule mod_deflate.c&#62; AddOutputFilter DEFLATE html xml php js css &#60;/ifmodule&#62; 为文件头指定Expires (ySlow &#8230; <a href="http://www.alphaidea.com/blog/userful-apache-setting/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>全文十条：<a href="http://www.mangguo.org/10-useful-htaccess-snippets/">http://www.mangguo.org/10-useful-htaccess-snippets/</a><br />
另外还有一篇：<a href="http://uicss.cn/promotion-loading-rate/">http://uicss.cn/promotion-loading-rate/</a></p>
<p>防止目录列表</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;"><span style="color: #00007f;">Options</span> -<span style="color: #0000ff;">Indexes</span></pre></div></div>

<p>通过压缩静态资源减少页面大小 (ySlow 35条rules之一的Gzip压缩)</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;"><span style="color: #00007f;">AddOutputFilterByType</span> DEFLATE text/html text/plain text/xml application/xml 
application/xhtml+xml text/javascript text/css application/x-javascript
<span style="color: #00007f;">BrowserMatch</span> ^Mozilla/<span style="color: #ff0000;">4</span> gzip-only-text/html
<span style="color: #00007f;">BrowserMatch</span> ^Mozilla/<span style="color: #ff0000;">4.0</span>[<span style="color: #ff0000;">678</span>] no-gzip
<span style="color: #00007f;">BrowserMatch</span> bMSIE !no-gzip !gzip-only-text/html</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;">&lt;<span style="color: #000000; font-weight:bold;">ifmodule</span> mod_deflate.c&gt;
<span style="color: #00007f;">AddOutputFilter</span> DEFLATE html xml php js css
&lt;/<span style="color: #000000; font-weight:bold;">ifmodule</span>&gt;</pre></div></div>

<p>为文件头指定Expires (ySlow 35条rules之一)</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;">&lt;<span style="color: #000000; font-weight:bold;">IfModule</span> mod_expires.c&gt;
<span style="color: #00007f;">ExpiresActive</span> <span style="color: #0000ff;">On</span>
<span style="color: #00007f;">ExpiresDefault</span> A600
<span style="color: #00007f;">ExpiresByType</span> image/x-icon A2592000
<span style="color: #00007f;">ExpiresByType</span> application/x-javascript A2592000
<span style="color: #00007f;">ExpiresByType</span> text/css A604800
<span style="color: #00007f;">ExpiresByType</span> image/gif A2592000
<span style="color: #00007f;">ExpiresByType</span> image/png A2592000
<span style="color: #00007f;">ExpiresByType</span> image/jpeg A2592000
<span style="color: #00007f;">ExpiresByType</span> text/plain A86400
<span style="color: #00007f;">ExpiresByType</span> application/x-shockwave-flash A2592000
<span style="color: #00007f;">ExpiresByType</span> video/x-flv A2592000
<span style="color: #00007f;">ExpiresByType</span> application/pdf A2592000
<span style="color: #00007f;">ExpiresByType</span> text/html A600
&lt;/<span style="color: #000000; font-weight:bold;">IfModule</span>&gt;</pre></div></div>

<p>配置ETag (ySlow 35条rules之一)</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;"><span style="color: #00007f;">FileETag</span> <span style="color: #0000ff;">none</span></pre></div></div>

<p>防止盗链</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;"><span style="color: #00007f;">RewriteEngine</span> <span style="color: #0000ff;">On</span>
<span style="color: #adadad; font-style: italic;">#将 ?mangguo\.org/ 替换成你的博客地址</span>
<span style="color: #00007f;">RewriteCond</span> %{HTTP_REFERER} !^http://(.+\.)?mangguo\.org/ [NC]
<span style="color: #00007f;">RewriteCond</span> %{HTTP_REFERER} !^$
<span style="color: #adadad; font-style: italic;">#将 /images/nohotlink.jpg 替换成“请勿盗链”图片地址</span>
<span style="color: #00007f;">RewriteRule</span> .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]</pre></div></div>

<p>创建自定义错误页</p>

<div class="wp_syntax"><div class="code"><pre class="apache" style="font-size:12px;"><span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">400</span> /errors/badrequest.html
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">401</span> /errors/authreqd.html
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">403</span> /errors/forbid.html
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">404</span> /errors/notfound.html
<span style="color: #00007f;">ErrorDocument</span> <span style="color: #ff0000;">500</span> /errors/serverr.html</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/userful-apache-setting/feed/</wfw:commentRss>
		<slash:comments>1860</slash:comments>
		</item>
		<item>
		<title>点点网招聘页的彩蛋</title>
		<link>http://www.alphaidea.com/blog/diandian-jobs-easter-eggs/</link>
		<comments>http://www.alphaidea.com/blog/diandian-jobs-easter-eggs/#comments</comments>
		<pubDate>Sun, 05 Jun 2011 08:14:01 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[娱乐]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=806</guid>
		<description><![CDATA[好吧，我承认放假闲在家里太无聊了。刚看完Zakas的JS for web Dev的第三章，想休息休息，逛逛网页时发现了这个： try&#123; console.info&#40;decodeURIComponent&#40;'%7B%22%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%AE%80%E5%8E%86%E6%8A%95%E9%80%92%E7%BB%BF%E8%89%B2%E9%80%9A%E9%81%93%22%3A%22sonic%40diandian.com%22%7D'&#41;&#41;; &#125;catch&#40;ex&#41;&#123;&#125;]]></description>
			<content:encoded><![CDATA[<p>好吧，我承认放假闲在家里太无聊了。刚看完Zakas的JS for web Dev的第三章，想休息休息，逛逛网页时发现了这个：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-size:12px;"><span style="color: #000066; font-weight: bold;">try</span><span style="color: #009900;">&#123;</span>
console.<span style="color: #660066;">info</span><span style="color: #009900;">&#40;</span>decodeURIComponent<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'%7B%22%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%AE%80%E5%8E%86%E6%8A%95%E9%80%92%E7%BB%BF%E8%89%B2%E9%80%9A%E9%81%93%22%3A%22sonic%40diandian.com%22%7D'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>ex<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/diandian-jobs-easter-eggs/feed/</wfw:commentRss>
		<slash:comments>1279</slash:comments>
		</item>
		<item>
		<title>LBS(基于位置服务)的基础应用 (二)</title>
		<link>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-2/</link>
		<comments>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-2/#comments</comments>
		<pubDate>Wed, 18 May 2011 04:49:10 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[geolocation]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[lbs]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[应用]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=668</guid>
		<description><![CDATA[下面是一个应用GOOGLEMAP API的例子 在线演示 (因为是HTML5框架，所以不支持IE8及以下和部分Firefox版本的浏览器，推荐Chrome,或iphone直接浏览) 源码下载 效果截图： 部份代码注释 //调用 Sencha 类库文件 &#60;script src=&#34;lib/touch/sencha-touch.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62; &#60;link href=&#34;lib/touch/resources/css/sencha-touch.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&#62; //Google 申请 api id 很方便的 &#60;script src=&#34;http://ditu.google.com/maps?file=api&#38;amp;v=2&#38;amp;key=(API ID)&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62; function getPositionSuccess( position ){ //得到当前经度纬度 var lat = position.coords.latitude; var lng = position.coords.longitude; &#8230; <a href="http://www.alphaidea.com/blog/lbs-basic-tutorial-part-2/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>下面是一个应用GOOGLEMAP API的例子<br />
<a href="http://www.alphaidea.com/blog/tutorial/lbs/">在线演示</a>   (因为是HTML5框架，所以不支持IE8及以下和部分Firefox版本的浏览器，推荐Chrome,或iphone直接浏览)</p>
<p><a href="http://www.alphaidea.com/blog/tutorial/lbs/lbs.rar">源码下载</a><br />
效果截图：<br />
<img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/IMG_0147.jpg" alt="当前位置" title="当前位置" width="320" height="480" class="alignnone size-full wp-image-669" /></p>
<p><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/IMG_0146.jpg" alt="位置记录" title="位置记录" width="320" height="480" class="alignnone size-full wp-image-673" /></p>
<p><span id="more-668"></span>部份代码注释</p>

<div class="wp_syntax"><div class="code"><pre class="js" style="font-size:12px;">//调用 Sencha 类库文件
&lt;script src=&quot;lib/touch/sencha-touch.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;lib/touch/resources/css/sencha-touch.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
//Google 申请 api id 很方便的
&lt;script src=&quot;http://ditu.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=(API ID)&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="js" style="font-size:12px;">function getPositionSuccess( position ){
	//得到当前经度纬度
	var lat = position.coords.latitude;
	var lng = position.coords.longitude;
	loadGoogleMap(lat,lng);
}	
&nbsp;
function loadGoogleMap(lat,lng) {
	//以下是调用google map api
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(&quot;map&quot;));
		//设置浏览器取得的经纬度做为地图的中心
		setMapPostion(map,lat, lng,14);
&nbsp;
		//标记中点位置
		var marker = new GMarker(map.getCenter());
		map.addOverlay(marker);	
	}
&nbsp;
	//申请一个ajax请求，递交坐标用于记录	
	Ext.Ajax.request({
		url: 'record.php',
		params: {
			post_lat: lat,       
			post_lng: lng
		}
	});			
}
&nbsp;
function setMapPostion(map,lat,lng,zoom){			
	//方向大小控制
	map.addControl(new GSmallMapControl());
	//标尺
	map.addControl(new GScaleControl());
	//设置当前得到的经纬度为地图中点，设置地图 zoom level
	map.setCenter(new GLatLng(lat,lng), zoom);
}
//以下代码是sencha的浏览器UI框架	
Ext.setup({
	onReady: function() {
		new Ext.TabPanel({
			fullscreen: true,
			type: 'dark',
			sortable: true,
			tabBar: {
				dock: 'bottom',
				layout: {
					pack: 'center'
				}
			},
			items: [{
				title: '当前位置',
				iconCls: 'locate',
				html: '&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;&lt;/div&gt;'
			}, {
				title: '位置记录',
				iconCls: 'team',
				html: '&lt;div id=&quot;map2&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;&lt;/div&gt;',
				listeners: {
					activate : function() {
						var map = new GMap2(document.getElementById(&quot;map2&quot;));
						setMapPostion(map,35.3890499, 111.3574218,4);								
						var marker = new GMarker(new GLatLng(31.176488810000002,121.43347531));
						map.addOverlay(marker);																
					}
				},
				badgeText: '8'
			}
		});
		//请求得到坐标
		navigator.geolocation.getCurrentPosition(getPositionSuccess);
	}
});</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-2/feed/</wfw:commentRss>
		<slash:comments>498</slash:comments>
		</item>
		<item>
		<title>LBS(基于位置服务)的基础应用 (一)</title>
		<link>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-1/</link>
		<comments>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-1/#comments</comments>
		<pubDate>Tue, 17 May 2011 14:39:48 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[geolocation]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[lbs]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[应用]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=656</guid>
		<description><![CDATA[LBS－基于位置服务（Location Based Service)， 就是利用移动终端(如手机,iPad..)的GPS定位系统来确认用户地理位置(经纬度)从而来提供一系列的服务。国外的有Foursquare，国内的街旁，玩转四方&#8230;.，虽然大多还只是停留在签到的应用，但其实还是有很多的玩法可以去开发的。现在我们来谈谈基本的实现吧。 首先我说一下这个教程用到的一些必要东西： 1. 一部 iphone (iOS3.0+) 或 android (2.0+) 的手机 2. 浏览器 Chrome 5+, Firefox 3.6+, Opera 10.6, Safari 5, IE 9(据说可以没试过) 顺便我会简单介绍下用YUI 和 GOOGLE MAP API，如何做些小应用~~~ 因为是手机应用，所以我选用了Sencha Touch的框架（前身是extjs），方便做手机版的UI。 好了下面我们开始吧 LBS最重要的东西当然就是如何知道用户的经纬度了。 下面是通过JS的函数来得到经纬度的方法 navigator.geolocation.getCurrentPosition(SuccessFunction); function SuccessFunction( position ){ &#8230; <a href="http://www.alphaidea.com/blog/lbs-basic-tutorial-part-1/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>LBS－基于位置服务（Location Based Service)， 就是利用移动终端(如手机,iPad..)的GPS定位系统来确认用户地理位置(经纬度)从而来提供一系列的服务。国外的有Foursquare，国内的街旁，玩转四方&#8230;.，虽然大多还只是停留在签到的应用，但其实还是有很多的玩法可以去开发的。现在我们来谈谈基本的实现吧。</p>
<p>首先我说一下这个教程用到的一些必要东西：<br />
1. 一部 iphone (iOS3.0+) 或 android (2.0+) 的手机<br />
2. 浏览器 Chrome 5+,  Firefox 3.6+,  Opera 10.6,  Safari 5,  IE 9(据说可以没试过)</p>
<p>顺便我会简单介绍下用YUI 和 GOOGLE MAP API，如何做些小应用~~~<br />
因为是手机应用，所以我选用了Sencha Touch的框架（前身是extjs），方便做手机版的UI。</p>
<p>好了下面我们开始吧<br />
LBS最重要的东西当然就是如何知道用户的经纬度了。</p>
<p>下面是通过JS的函数来得到经纬度的方法</p>

<div class="wp_syntax"><div class="code"><pre class="js" style="font-size:12px;">navigator.geolocation.getCurrentPosition(SuccessFunction);
function SuccessFunction( position ){
	//得到当前经度纬度
	lng = position.coords.longitude;
	lat = position.coords.latitude;
&nbsp;
	alert(&quot;您的当前经度：&quot;+lng+&quot; 纬度：&quot;+lat)
}</pre></div></div>

<p><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/IMG_0156.jpg" alt="得到经纬度" title="得到经纬度" width="320" height="180" class="alignnone size-full wp-image-663" /></p>
<p>这样就浏览器就会返回经度和纬度了。<br />
<span id="more-656"></span>通过一些API我们还可以做一些小应用。比如YAHOO就提供了，返回当前经纬度求信息的API:</p>
<p>http://where.yahooapis.com/geocode?q=(纬度),+(经度)&#038;gflags=R</p>
<p>比如：</p>
<p>http://where.yahooapis.com/geocode?q=38.898717,+-77.035974&#038;gflags=R</p>
<p>得到的是一个XML：</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-size:12px;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;line1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>1600 Pennsylvania Ave NW<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/line1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;line2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Washington, DC 20006<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/line2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;postal<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>20006<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/postal<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;neighborhood</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;city<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Washington<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/city<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;county<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>District of Columbia<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/county<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;state<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>District of Columbia<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/state<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;country<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>United States<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/country<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/IMG_0157.jpg" alt="得到位置信息" title="得到位置信息" width="320" height="180" class="alignnone size-full wp-image-664" /></p>
<p>EN，第一个小例子就完成了.<br />
明天我会结合GOOGLE MAP API，和 sencha的HTML5框架，写个大一点比较完整的例子。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/lbs-basic-tutorial-part-1/feed/</wfw:commentRss>
		<slash:comments>1853</slash:comments>
		</item>
		<item>
		<title>Sri Villas</title>
		<link>http://www.alphaidea.com/blog/sri-villas/</link>
		<comments>http://www.alphaidea.com/blog/sri-villas/#comments</comments>
		<pubDate>Mon, 25 Oct 2010 15:03:16 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[工作]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=600</guid>
		<description><![CDATA[http://www.srivillas.com]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.srivillas.com/" target="_blank">http://www.srivillas.com</a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2010/10/untitled-22.jpg" class="highslide-image" onclick="return hs.expand(this);" class="thickbox"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2010/10/untitled-22-500x320.jpg" alt="" title="主页面" width="500" height="320" class="alignnone size-medium wp-image-647" /></a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2010/10/333222121.jpg" class="highslide-image" onclick="return hs.expand(this);" class="thickbox"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2010/10/333222121-500x320.jpg" alt="" title="子页面" width="500" height="320" class="alignnone size-medium wp-image-649" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/sri-villas/feed/</wfw:commentRss>
		<slash:comments>2017</slash:comments>
		</item>
		<item>
		<title>@上海世博</title>
		<link>http://www.alphaidea.com/blog/at-shanghai-expo/</link>
		<comments>http://www.alphaidea.com/blog/at-shanghai-expo/#comments</comments>
		<pubDate>Thu, 21 Oct 2010 02:20:16 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[摄影]]></category>
		<category><![CDATA[GF1]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=709</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_5080443851.jpg" class="highslide-image" onclick="return hs.expand(this);"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_5080443851-500x280.jpg" alt="" title="世博轴" width="500" height="280" class="alignnone size-medium wp-image-712" /></a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_508044902.jpg" class="highslide-image" onclick="return hs.expand(this);"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_508044902-500x280.jpg" alt="" title="演艺中心" width="500" height="280" class="alignnone size-medium wp-image-710" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/at-shanghai-expo/feed/</wfw:commentRss>
		<slash:comments>2008</slash:comments>
		</item>
		<item>
		<title>CreaStyle</title>
		<link>http://www.alphaidea.com/blog/creastyle/</link>
		<comments>http://www.alphaidea.com/blog/creastyle/#comments</comments>
		<pubDate>Tue, 12 Oct 2010 07:12:44 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[工作]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=781</guid>
		<description><![CDATA[http://www.creastyledesign.cn/]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.creastyledesign.cn/" target="_blank">http://www.creastyledesign.cn/</a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/15.jpg" class="highslide-image" onclick="return hs.expand(this);"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/15-500x301.jpg" alt="About Us" title="About Us" width="500" height="301" class="alignnone size-medium wp-image-782" /></a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/23.jpg" class="highslide-image" onclick="return hs.expand(this);"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/23-500x301.jpg" alt="Our Services" title="Our Services" width="500" height="301" class="alignnone size-medium wp-image-783" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/creastyle/feed/</wfw:commentRss>
		<slash:comments>2346</slash:comments>
		</item>
		<item>
		<title>@世纪公园</title>
		<link>http://www.alphaidea.com/blog/at-century-park/</link>
		<comments>http://www.alphaidea.com/blog/at-century-park/#comments</comments>
		<pubDate>Thu, 07 Oct 2010 12:54:53 +0000</pubDate>
		<dc:creator>Alpha</dc:creator>
				<category><![CDATA[摄影]]></category>
		<category><![CDATA[GF1]]></category>

		<guid isPermaLink="false">http://www.alphaidea.com/blog/?p=703</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_499103365.jpg" class="highslide-image" onclick="return hs.expand(this);" class="thickbox"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_499103365-500x333.jpg" alt="" title="觅食" width="500" height="333" class="alignnone size-medium wp-image-704" /></a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_4991054881.jpg" class="highslide-image" onclick="return hs.expand(this);" class="thickbox"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_4991054881-500x559.jpg" alt="" title="芦苇大厦" width="500" height="559" class="alignnone size-medium wp-image-706" /></a></p>
<p><a href="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_495597922.jpg" class="highslide-image" onclick="return hs.expand(this);" class="thickbox"><img src="http://www.alphaidea.com/blog/blog/wp-content/uploads/2011/05/3443850_495597922-500x280.jpg" alt="" title="勤劳的小蜜蜂呀~~风到花丛中呀~~~" width="500" height="280" class="alignnone size-medium wp-image-707" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.alphaidea.com/blog/at-century-park/feed/</wfw:commentRss>
		<slash:comments>1733</slash:comments>
		</item>
	</channel>
</rss>

