tag:blogger.com,1999:blog-84672057411057927192024-02-08T02:57:41.162-08:00Graphically Herding the MassesJustinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-8467205741105792719.post-50169467262868189672011-02-15T13:21:00.000-08:002011-02-15T13:21:04.513-08:00"Nested" CSSI really don't know why this hasn't been implemented but it surely seems simple and would have a HUGE impact on the CSS coders everywhere.<br />
<br />
So instead of doing this...<br />
.selector .subselector{property:attribute;}<br />
.selector .anothersubselector{property:attribute;}<br />
<br />
Why not this?<br />
.selector{{<br />
.subselector{property:attribute;}<br />
.anothersubselector{property:attribute;}<br />
}}<br />
<br />
Pure. Simple. And it will increase CSS readability and cut down of file size because you wont have to repeat the lead selector 100 times...Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com1tag:blogger.com,1999:blog-8467205741105792719.post-39180782157679622522010-09-02T06:59:00.000-07:002010-09-02T06:59:13.661-07:00jQuery Random ColorThis is a simple example of how to assign a random color to any html element:<br />
<br />
<span class="Apple-style-span" style="font-family: monospace; white-space: pre;">$(this).css("color", 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')');</span><br />
<code><pre></pre></code>Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0tag:blogger.com,1999:blog-8467205741105792719.post-53496382965150618012010-05-04T11:29:00.000-07:002010-05-04T11:35:28.991-07:00Rounded Corners on Floating Images of Variable SizesRecently I have been working on a site that uses the awesome <a href="http://jquery.malsup.com/corner/">jQuery Corners plugin</a>. The plugin does not support rounded corners on images. So I am dynamically wrapping all the images in the content area with a span so that the image can a border with rounded corners. I thought this would be rather simple but as it always turns out things are a little more complicated than I imagined.<br />
<br />
First off these are images coming from a client via a CMS and can be any size or shape. No big deal. I'll just use the inline-block display attribute and move along. Well, not so fast. IE7 has issues with that. It will display at 100% of the parents width. So I need to use jQuery to find the width of our images and set the parent span to the same width. While working through this issue I found out that webkit browsers (Chrome and Safari) do not actually know any DOM element dimensions during $(document).ready. You have to wait a little longer and let the page be drawn out by using $(window).load. That makes sense to me, but I am curious why this is not the same across the board.<br />
<br />
Lastly, we have to account for the client setting the image to float left or right in the CMS and transfer those values to the parent. I decided to do that by passing the float value as a class. I have basic styling like float direction and corresponding margin values. <br />
<br />
So enough talk. Here is the code:<br />
<br />
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code><script type="text/javascript">
$(window).load(function(){
$('#content img').each(function(index,item){
var f=$(this).css('float');
var w=$(item).width();
$(item).wrap("<span class='img "+f+"'style='width:"+w+"'></span>");
$(item).parent().corner("10px cc:#AEE1FE");
});
});
</script>
</code></pre>Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0tag:blogger.com,1999:blog-8467205741105792719.post-78992507047664452502009-11-12T13:40:00.000-08:002010-04-22T04:41:27.246-07:00Access Yahoo's Weather API via YQL and jQueryLet me start off by saying that if you want a basic demo of YQL by grabbing an RSS feed check out my<a href="http://graphicallyherdingthemasses.blogspot.com/2009/10/yql-allows-you-to-query-entire-web.html"> first blog post</a> on YQL. In this post I am going to make a little weather widget that grabs the current temperature, weather condition, wind speed and direction, create a link to the full forecast and lastly drop a pretty weather condition graphic as the background of the widget. Then, once I have all that data I am going to display it via jQuery.<br />
<br />
So let's get started! Pull up the YQL developer console: <a href="https://developer.yahoo.com/yql/console/">https://developer.yahoo.com/yql/console/</a> and type in:<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>select * from weather.forecast where location=29201</code></pre><br />
Select JSON and click test. This shows you the weather data for Columbia, SC in JSON format. The good stuff is located in the within data.query.results.channel. In there you have access to the current temperature, humidity, wind, wind direction and even sunrise and sunset times. So let's start off simple.<br />
<br />
Notice the rest query url in YQL console? It reads:<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D29201&format=json&callback=cbfunc
</code></pre><br />
That is a little tough to work with if you ask me so I like to bring in a little jquery to make this JSON url a little easier to work with and read. Here is a little piece of jquery that does just that for you:<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
</code></pre><br />
I generally include this little snippet in a file called jquery.yql.js. After that we can place our YQL query just like in the console. Here is our sample query:<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>$.YQL("select * from weather.forecast where location=29201",function(data){
var w=data.query.results.channel;
$('#weatherTemp').html(w.item.condition.temp+"&deg;");
$('#weatherText').html(w.item.condition.text);
});
</code></pre><br />
This call grabs the weather information for Columbia, SC and injects the temperature and condition text to their corresponding divs. So data.query.results.channel.item.condition.temp = current temperature. and data.query.results.channel.item.condition.text = current condition.<br />
<br />
So that was easy, let's grab all the information we want for this demo!<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>$.YQL("select * from weather.forecast where location=29406",function(data){
var w=data.query.results.channel;
var weatherImage="url(http://l.yimg.com/a/i/us/nws/weather/gr/"+w.item.condition.code+"d.png)";
var wd=w.wind.direction;
if(wd>=348.75&&wd<=360){wd="N"};if(wd>=0&&wd<11.25){wd="N"};if(wd>=11.25&&wd<33.75){wd="NNE"};if(wd>=33.75&&wd<56.25){wd="NE"};if(wd>=56.25&&wd<78.75){wd="ENE"};if(wd>=78.75&&wd<101.25){wd="E"};if(wd>=101.25&&wd<123.75){wd="ESE"};if(wd>=123.75&&wd<146.25){wd="SE"};if(wd>=146.25&&wd<168.75){wd="SSE"};if(wd>=168.75&&wd<191.25){wd="S"};if(wd>=191.25 && wd<213.75){wd="SSW"};if(wd>=213.75&&wd<236.25){wd="SW"};if(wd>=236.25&&wd<258.75){wd="WSW"};if(wd>=258.75 && wd<281.25){wd="W"};if(wd>=281.25&&wd<303.75){wd="WNW"};if(wd>=303.75&&wd<326.25){wd="NW"};if(wd>=326.25&&wd<348.75){wd="NNW"};
$('#weatherWidget').css("background-image",weatherImage);
$('#weatherTemp').html(w.item.condition.temp+"&deg;");
$('#weatherText').html(w.item.condition.text);
$('#weatherWind').html(wd +" "+w.wind.speed+"mph");
$('#weatherLink').html("<a href='"+w.item.link+"'>Full Forecast</a>");
});
</code></pre><br />
OK, let's go line by line. First off you wil notice that I created weatherImage variable. Yahoo does not give you the full url to the image. I have to build the url and insert the condition code to display the right image. So to make the weatherImage I take the string "http://l.yimg.com/a/i/us/nws/weather/gr/" and add the condition code "30" to it and append the string ".png" to that you get: <a href="http://l.yimg.com/a/i/us/nws/weather/gr/30d.png">http://l.yimg.com/a/i/us/nws/weather/gr/30d.png</a> <br />
<br />
Yahoo does not give you the text wind direction. It gives you the degree. So if w.wind.direction might equal "90" which equals East. But I actually want to display E or NE. etc... So I wrote a series of if statements to check the direction number and output a string. I know, I know. I could have written a regular expression, but hey, I am a designer. Cut me some slack!<br />
<br />
The rest of it just injects all the data into the corresponding divs. So here is a working example:<br />
<script type="text/javascript">
$.YQL = function(query, callback) {
if (!query || !callback) {
throw new Error('$.YQL(): Parameters may be undefined');
}
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$(document).ready(function(){
$.YQL("select * from weather.forecast where location=29201",function(data){
var w=data.query.results.channel;
var weatherImage="url(http://l.yimg.com/a/i/us/nws/weather/gr/"+w.item.condition.code+"d.png)";
var weatherIcon="url(http://l.yimg.com/a/i/us/nws/weather/gr/"+w.item.condition.code+"s.png)";
var wd=w.wind.direction;
if(wd>=348.75&&wd<=360){wd="N"};if(wd>=0&&wd<11.25){wd="N"};if(wd>=11.25&&wd<33.75){wd="NNE"};if(wd>=33.75&&wd<56.25){wd="NE"};if(wd>=56.25&&wd<78.75){wd="ENE"};if(wd>=78.75&&wd<101.25){wd="E"};if(wd>=101.25&&wd<123.75){wd="ESE"};if(wd>=123.75&&wd<146.25){wd="SE"};if(wd>=146.25&&wd<168.75){wd="SSE"};if(wd>=168.75&&wd<191.25){wd="S"};if(wd>=191.25 && wd<213.75){wd="SSW"};if(wd>=213.75&&wd<236.25){wd="SW"};if(wd>=236.25&&wd<258.75){wd="WSW"};if(wd>=258.75 && wd<281.25){wd="W"};if(wd>=281.25&&wd<303.75){wd="WNW"};if(wd>=303.75&&wd<326.25){wd="NW"};if(wd>=326.25&&wd<348.75){wd="NNW"};
$('#weatherWidget').css("background-image",weatherImage);
$('#weatherIcon').css("background-image",weatherIcon);
$('#weatherTemp').html(w.item.condition.temp+"°");
$('#weatherText').html(w.item.condition.text);
$('#weatherWind').html(wd +" "+w.wind.speed+"mph");
$('#weatherLink').html("<a href='"+w.item.link+"'>Full Forecast</a>");
});
});
</script><br />
<div id="weatherWidget" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(51, 51, 51) none no-repeat scroll 0% 0%; border: 10px solid rgb(17, 17, 17); height: 150px; position: relative;"><div id="weatherDescription" style="left: 200px; position: absolute; top: 40px;"><div id="weatherTemp" style="font-size: 200%; font-weight: bold;"></div><div id="weatherText"></div><div id="weatherWind"></div><div id="weatherLink"></div></div></div><br />
Please note there is NO server side coding going on. This is just javascript, HTML, and a little css. Speaking of which, here is the html as well:<br />
<br />
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code><div id="weatherWidget" style="background: rgb(51, 51, 51) none no-repeat scroll 0% 0%; border: 10px solid rgb(17, 17, 17); height: 150px; position: relative;">
<div id="weatherDescription" style="left: 200px; position: absolute; top: 40px;">
<div id="weatherTemp" style="font-size: 200%; font-weight: bold;"></div>
<div id="weatherText"></div>
<div id="weatherWind"></div>
<div id="weatherLink"></div>
</div>
</div>
</code></pre><br />
Pretty simple stuff if you ask me. I am going to post some flickr, youTube, upcoming.org, and twitter YQL widgets in the near future. So stay tuned!Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com24tag:blogger.com,1999:blog-8467205741105792719.post-33368117775919530262009-10-23T13:33:00.000-07:002010-04-22T04:42:15.226-07:00YQL allows you to query the entire webLeave no RSS, XML document, or web 2.0 api untouched! You literally can grab content from anywhere, turn it into JSON data and display the desired information using my old fiend jQuery.<br />
First off check out the YQL developer console: <a href="https://developer.yahoo.com/yql/console/">https://developer.yahoo.com/yql/console/</a><br />
There you can run test queries and view many community tables using popular api's and file formats doing very useful things. For example, if I want to grab the latest 3 posts from my blog I would just put in:<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3
</code></pre><br />
And BAM. Right there in the console you can see the feed. If you select JSON and run the test again and copy the generated url you get this...<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20atom%20where%20url%3D'http%3A%2F%2Fgraphicallyherdingthemasses.blogspot.com%2Ffeeds%2Fposts%2Fdefault'%20limit%203&amp;format=json&amp;callback=cbfunc
</code></pre>That's great but how can I put that on MY site? Well, first we need to bring in a little jquery to make this JSON url a little easier to work with and read. Here is a little piece of jquery that does just that for you:<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
</code></pre><br />
So now all we need to do is grab the data and display it using a little jquery. First we grab the first 3 posts by our YQL call. Once we get the data we are going to find the individual blog posts and grab the title and the link and append it to the called bloggerWidget.<br />
<br />
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code>$.YQL("select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3",function(data){
var blogPost=data.query.results.entry;
$.each(blogPost,function(index, blogPost){
$('#bloggerWidget').append("<li><a href='"+blogPost.link[4].href+"'>"+blogPost.title.content+"</a></li>");
});
});
</code></pre><br />
Here is it in action:<br />
<script type="text/javascript">
$.YQL = function(query, callback) {
if (!query || !callback) {
throw new Error('$.YQL(): Parameters may be undefined');
}
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$(document).ready(function(){
$.YQL("select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3",function(data){
var blogPost=data.query.results.entry;
$.each(blogPost,function(index, blogPost){
$('#bloggerWidget').append("
<li><a href='"+blogPost.link[4].href+"'>"+blogPost.title.content+"</a></li>
");
});
});
});
</script><br />
<ul id="bloggerWidget"></ul><br />
No ASP, PHP, JSP, proxies, or cross domain errors... You can do this with ANY feed on ANY site. I am currently working on a site that pulls in data from the yahoo weather api, the flickr api, blogger atom feeds, twitter rss 2.0 feeds, and the youtube api.Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com2tag:blogger.com,1999:blog-8467205741105792719.post-39000022353209007682009-10-08T05:54:00.000-07:002009-10-08T05:57:23.105-07:00As the page foldsFound a great article that talks a problem that I run into all the time. Clients, especially older ones, want everything to fit on one page with no scrolling or to use a print term, "above the fold". Everytime I explain that they have too much information to fit into that space and that it many extremely successful brands have pages with content way below the fold.<br />
<br />
This artcle not only addresses the "popular brands approach:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.cxpartners.co.uk/wp-content/uploads/longpages.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="329" src="http://www.cxpartners.co.uk/wp-content/uploads/longpages.png" width="420" /></a><br />
</div><br />
It also takes hundreds of hours of eye tracking user testing. Here is a heat map of a site with content mainly above the fold and another with less content above the fold, think large rotating banner image at the top.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.cxpartners.co.uk/wp-content/uploads/brisair.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="310" src="http://www.cxpartners.co.uk/wp-content/uploads/brisair.png" width="420" /></a><br />
</div>The article also has an example of how to encourage users to explore below the fold. Simple things like don't make a large header that is 100% of the content area's width and "chop off" the page. Also, I would suggest using a subtle vertical gradient to draw the eye naturally downward.<br />
<br />
Another thing to think about to cut down on page scrolling is using columns. Not only does it help with the page height, but it also reduces wasted space and extremely wide copy. Everyone knows 72 characters is the "perfect" width so at 11px font size at 900px width. Two columns is almost perfect for real body text. You can even go to 3 columns on the homepage with short news headlines, event names and announcements.<br />
<br />
Check out the full article "The myth of the page fold":<br />
<a href="http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm">http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm</a>Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0tag:blogger.com,1999:blog-8467205741105792719.post-22056446067599595102009-09-29T14:36:00.000-07:002009-09-29T14:36:49.081-07:00Need a quick quote?I found a great article by Brian Fling, although it is kind of old, about pricing design based projects. Please adjust the dollar amounts for inflation ;)<br />
Here are some interesting excepts from the article...<br />
<br />
<blockquote>1 mockup x time(1×10 hours) x $100 = $1,000 <br />
Three mockups would look like this: <br />
3 mockups x time(1×10 hours) x $100 = $3,000 <br />
A slightly more complex mockup might look like this: <br />
3 mockup x time(1.5×10 hours) x $100 = $4,500 <br />
And a complex or challenging mockup might look like this: <br />
3 mockups x time(2×10 hours) x $100 = $6,000 <br />
And so on. Start with a three-point complexity scale using the quarter points if necessary (e.g. 1.25, 1.5, 1.75 etc). If you feel you need to use a five-point scale or even a ten-point scale I would imagine you haven’t figured out your hourly rate. <br />
</blockquote>He even answers an often asked question...What is my hourly rate?<br />
<br />
<blockquote> (expenses + salary) ÷ hrs worked per yr. + margin = hourly rate<br />
</blockquote>Liked what you saw? Check out the full article here:<br />
<a href="http://www.blueflavor.com/blog/2006/apr/25/pricing-project/">http://www.blueflavor.com/blog/2006/apr/25/pricing-project/</a>Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0tag:blogger.com,1999:blog-8467205741105792719.post-73961251393729007082009-09-25T08:56:00.000-07:002009-09-25T09:06:00.341-07:00Google Maps on Gameday<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&ll=33.985574,-81.031723&spn=0.012806,0.027874&msid=106046900687159557056.00047468bea7cd8284918&output=embed" width="425"></iframe><br />
<br />
I am been playing with Google maps alot lately. Mainly the <a href="http://code.google.com/apis/maps/">API</a> but I have also been playing with <a href="http://maps.google.com/">google maps</a> proper. My maps is a pretty sweet feature. I used it to map out ~40 locations around the midlands for a client map and I decided that the average user could do some neat things. <br />
<br />
I live in <a href="http://www.canalsidelofts.com/">Canalside</a> and I decided to bike to the South Carolina vs Mississippi football game last night. I mapped the 6.7 mile round trip and placed a picture I uploaded from the game in less than 2 minutes...Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0tag:blogger.com,1999:blog-8467205741105792719.post-7177804194678350082009-09-23T06:10:00.000-07:002009-09-23T06:49:37.838-07:00Google Chrome FrameGoogle just released pretty interesting plugin for Internet Explorer called <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>. It is aimed at IE 6, 7, and 8 users on Windows XP and Vista. These users are typically the corporate desktop users that have not upgraded because of legacy IE6 applications or lazy IT staffs or both. When users install this plugin they will have full <a href="http://www.w3.org/TR/html5/">HTML5</a> support in their browser while maintaining IE6 compatibility with their legacy applications.<br /><br />So legacy IE users download it here:<br /><a href="http://www.google.com/chromeframe/eula.html">http://www.google.com/chromeframe/eula.html</a><br /><br />Now, designers and developers. Place this little meta tag on your page and this will enable google chrome frame for your websites and web applications.<br /><br /><span style="font-family:monospace;"><meta http-equiv="X-UA-Compatible" content="chrome=1"></span><br /><br />If google chrome frame is there, then it will switch to the chrome webkit rendering engine. If not... it will work just like it did before. Google has also give us some handy tools to check to see if google chrome frame is installed and if not, prompt the user to download it...<br /><br /><pre class="prettyprint"><span class="pln"><script type="text/javascript"<br />src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"> </span><span class="pln"><</span><span class="tag">/script</span><span class="pln"><span class="pln">></span><br /><br /></span><span class="pln"><</span><span class="tag">div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"placeholder"</span><span class="tag"></span><span class="pln"><</span><span class="tag">/div</span><span class="pln"><span class="pln">></span><br /><br /></span><span class="pln"><</span><span class="tag">script</span><span class="pln"><span class="pln">></span><br /></span><span class="typ">CFInstall</span><span class="pun">.</span><span class="pln">check</span><span class="pun">({</span><span class="pln"><br /> node</span><span class="pun">:</span><span class="pln"> </span><span class="str">"placeholder"</span><span class="pun">,</span><span class="pln"><br /> destination</span><span class="pun">:</span><span class="pln"> </span><span class="str">"http://www.waikiki.com"</span><span class="pln"><br /> </span><span class="pun">});</span><span class="pln"><br /></span><span class="pln"><</span><span class="tag">/script</span><span class="pln"><span class="pln">></span><br /><br /></span></pre>Check out the full developer guide:<br /><a href="http://code.google.com/chrome/chromeframe/developers_guide.html">http://code.google.com/chrome/chromeframe/developers_guide.html</a><br /><br />So what does this really mean. Well, it really depends on google really. If google starts requiring HTML5 support for HQ <a href="http://youtube.com">youtube</a> videos and some advanced features in <a href="http://picasaweb.google.com/">picasa web</a>, <a href="http://blogger.com">blogger</a>, <a href="http://gmail.com">gmail</a> and <a href="http://docs.google.com">google docs</a>. Then this Google Chrome Frame will be huge. But perhaps this will force <a href="http://microsoft.com">microsoft</a> to push out an update to IE6 or that offers a "legacy" mode and a modern mode. I am in favor for either one... As long as we can move these neglected users out of the dark ages of web browsing.Justinhttp://www.blogger.com/profile/04781971751452170212noreply@blogger.com0