September 3rd, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=205
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
With the possible exception of the Watchmen trailer [1], I don't
remember a comic book ever stopping the web community in shock.
The surprise unveiling of Google Chrome [2] yesterday - in
comic book form - did just that.
Google leaked news of the browser yesterday by releasing a comic
book [3] (by comics legend Scott McCloud [4]) describing the
design decisions that went into the new browser.
For users, Chrome is a brand new web browser with blazing fast
load times and a minimalist interface, designed to highlight
page content over (ironically) browser chrome. Customary browser
features are tucked away behind clever user interface elements,
most of which are easily discoverable as you need them.
For developers, Chrome uses the same WebKit rendering engine as
Safari, but bundles its own screaming fast JavaScript engine,
called V8. The browser's common ancestry with Safari will help
to reduce the testing burden on developers of a whole new
browser, but when testing is required, Chrome includes a DOM/CSS
inspector, an HTTP profiler, and a JavaScript debugger.
A beta of Chrome [5] is now available for Windows, with a Mac
version under development. For more on Chrome, check out Josh
Catone's preview on sitepoint.com [6].
[1] <http://watchmenmovie.warnerbros.com/>
[2] <http://www.google.com/chrome>
[3] <http://www.google.com/googlebooks/chrome/>
[4] <http://www.scottmccloud.com/>
[5] <http://www.google.com/chrome>
[6] <http://www.sitepoint.com/blogs/2008/09/02/google-working-on-browser-what-about-mozilla/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
EXPAND YOUR BUSINESS WITH W3 MARKUP
Rely on us to get more projects completed each week! We provide:
* Pixel-precise hand-coded Valid CSS & (X)HTML for any project
* Theme or "skin" implementation into popular software like:
WordPress, Drupal, Joomla, MovableType, Blogger, Pligg,
Textpattern, Typo3, osCommerce, Shopify, X-Cart, SMC, even
HTML Email templates, Server Side Includes
* Same-day turnarounds and pricing discounts
* Search engine friendly semantic coding
* 100% cross-browser, cross-platform browser compatibility
* Money back guarantee and 100% non-disclosure
Get started here: http://w3-markup.com/p/sitepoint-newsletter-tech-times
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Easy Vector Graphics with the RaphaA?l JavaScript Library
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
EASY VECTOR GRAPHICS WITH THE RAPHAEL JAVASCRIPT LIBRARY - -
by Andrew Tetlaw
Raphael [1] is a small JavaScript library written by Dmitry
Baranovskiy of Atlassian [2], that allows you to create and
manipulate vector graphics in your web pages. It's amazingly
simple to use and is cross-browser compatible; supporting
Internet Explorer 6.0+, Safari 3.0+, Firefox 3.0+, and Opera
9.5+. Internally Raphael uses VML in IE and SVG in the
other browsers.
Now, demos involving circles and squares are fine, but I wanted
to create an example that demonstrated a legitimate, practical
use of vector graphics. So how about real-time statistics
measurement [3]? Here's a screenshot of my Current Sprocket
Usage line graph that plots real-time "sprocket" usage levels.
Best of all, it was a snap to make.
The HTML is simple; we just need a heading and container to hold
our canvas -- a div element:
<h1>Current Sprocket Usage:
<span id="readout"></span></h1>
<div id="graph"></div>
To start we have to generate a new graphics canvas. I always
like to place all my code within an object definition in order
to create a separate namespace, so we'll start with the
following code:
var SpGraph = {
init : function(){
SpGraph.graph = Raphael("graph", 400, 200);
SpGraph.graph.rect(
0, 0, 390, 110, 10
).attr("fill", "#000");
}
}
window.onload = function () {
SpGraph.init();
};
Using the window.onload event we call our SpGraph.init method.
Within this method we create our canvas using Raphael("graph",
400, 200). The first argument is the ID of our container
element, the other two represent width and height. We store the
returned canvas object in our SpGraph.graph property. With the
next line we create a rectangle and set some attributes:
SpGraph.graph.rect(
0, 0, 390, 110, 10).attr("fill", "#000");
The rect method allows us to draw a rectangle specifying the x
coordinate, y coordinate, width, height, and optionally a corner
radius. Notice that we've also chained a call to the attr method
to set the fill color. All Raphael graphic objects support
the attr method and there's a range of attributes you can set.
Raphael supports chaining all its methods, which we will
take advantage of soon. Our effort so far has resulted in this
lovely black rectangle with rounded corners.
Now lets add stripes! To do this we add the following loop to
the SpGraph.init method:
for(var x = 10; x < 110; x += 10) {
var c = (x > 10) ? "#333" : "#f00";
SpGraph.graph.path(
{stroke: c}).moveTo(0, x).lineTo(390,x);
}
The loop executes 10 times drawing a line each time; a red line
for the first one and a gray line for the others. The
Raphael path method initializes the path mode of drawing,
returning a path object. It doesn't actually draw anything
itself; you have to use the path object methods, which are
chainable. The moveTo method moves the drawing cursor to the
specified x and y coordinates and the lineTo method draws a line
from the cursor point to the point specified. The result is the
stripey background below:
Keep reading, we finish the code below.
[1] <http://raphaeljs.com/>
[2] <http://www.atlassian.com/?s_kwcid=atlassianawsearch>
[3] <http://www.sitepoint.com/blogs/wp-content/uploads/2008/09/raphael-graph-demo/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
* Focus only on your application with The Hosting Cloud(tm) *
Just code it, load it and go. You don't ever have to think about
the hardware, let alone scaling it. Our advanced clustered
technology automatically scales to give you the capacity you need.
You sit back and watch it grow with your business. Learn more!
For as little as $100/month, get:
* Online tools to create unlimited sites, databases & email accounts
* 24x7x365 live phone & chat support
* 50 GB of storage, 500 GB of bandwidth & 10,000 compute cycles
For really big applications, only pay for the resources you use.
Take Mosso for a 30-day test-drive. If it's not all that we say it
is, we'll put your money back in your hand. Ready to Go Mosso?
https://www.mosso.com/buy.htm?utm_source=sitepoint%2Btrib&utm_medium=newsletter&utm_campaign=1
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
So now we have to draw the actual graph line. The vertical axis
(represented by the stripes) is the percentage usage level. The
horizontal axis will represent time in 10 pixel increments. In
the real world each update of the graph would be obtained via an
Ajax call, say every 5 seconds, but here I just create random
values and update the graph every second. Once again, we use the
path method to draw a 5 pixel wide line.
We initialise the path and store the reference to it in the
SpGraph.path property like so:
SpGraph.path = SpGraph.graph.path({
stroke: "#0f0",
"stroke-width": 5,
"fill-opacity": 0
}).moveTo(20, 110);
Every update, we extend the line using the lineTo method like
so:
SpGraph.path.lineTo(
20+SpGraph.updates*10, 110-perf);
perf is a random value between 0 and 100. The SpGraph.updates
property is a simple counter that allows us to control how many
updates before the line is reset. The counter value is also used
to plot the location of the line on the horizontal axis. After 35
updates the line is reset by removing it, using the
SpGraph.path.remove method, and starting a new one.
So the whole script looks like this:
var SpGraph = {
init : function(){
SpGraph.graph = Raphael("graph", 400, 200);
SpGraph.graph.rect(
0, 0, 390, 110, 10).attr("fill", "#000");
for(var x = 10; x < 110; x += 10) {
var c = (x > 10) ? "#333" : "#f00";
SpGraph.graph.path(
{stroke: c}).moveTo(0, x).lineTo(390,x);
}
SpGraph.startPath();
SpGraph.updateGraph();
},
startPath : function() {
if(SpGraph.path) {
SpGraph.path.remove();
}
SpGraph.path = SpGraph.graph.path({
stroke: "#0f0",
"stroke-width": 5,
"fill-opacity": 0
}).moveTo(20, 110);
},
updateGraph : function() {
if(SpGraph.updates++ < 36) {
// imagine this value comes
// from an ajax request
var perf = Math.floor(
Math.random() * 100);
SpGraph.path.lineTo(
20+SpGraph.updates*10, 110-perf);
document.getElementById(
'readout').innerHTML = perf+'%';
} else {
SpGraph.updates = 0;
SpGraph.startPath();
}
SpGraph.timer = setTimeout(
"SpGraph.updateGraph();",1000);
},
updates : 0
}
window.onload = function () {
SpGraph.init();
};
Don't forget to see it working in the demo [1]. OK, so maybe a
sprocket usage graph isn't exactly the legitimate, practical
example I promised, but at least you got a look at what you can
achieve with Raphael with only a little effort. The
documentation on the site isn't complete, but it's not too
difficult to work out anyway. Why don't you have a go yourself?
Quick, Simple, cross-browser compatible, vector graphics on the
web has never been easier.
Read the blog entry:
JavaScript & CSS Blog: Stylish Scripting
by Andrew Tetlaw
Easy Vector Graphics with the Raphael JavaScript Library
http://www.sitepoint.com/blogs/?p=2926
[1] <http://www.sitepoint.com/blogs/wp-content/uploads/2008/09/raphael-graph-demo/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
You love your product, but does your customer? Use Morae to find out.
Morae is the premier software for understanding customer
experiences and sharing those insights clearly and powerfully.
From usability testing to focus groups and beyond, Morae helps
you transform designs and marketing to make things people love.
Click to find out more about Morae usability testing software:
http://www.techsmith.com/featured/2008/morae/user_experience/?cmp=StPM001
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you in
two weeks.
Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
Interview with Jeff Veen, User Experience Guru
by Josh Catone
Jeff Veen is a high-profile author, speaker, and user experience
consultant who has lead design teams at companies such as
Adaptive Path and Google. Jeff took some time out to answer a
few questions submitted by the SitePoint Forums community.
http://www.sitepoint.com/article/1667
Learn Adobe AIR, Part 2: Build a Customer Management App
by Akash Mehta
Part 2 of Akash's Adobe AIR tutorials describes how to build a
simple Customer Relationship Management (CRM) application. Take
the quiz at the end and receive a free pocket guide: Adobe AIR
For JavaScript Developers, courtesy of Adobe!
http://www.sitepoint.com/article/1666
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
Linux Laptop Revolution?
<http://www.sitepoint.com/forums/showthread.php?threadid=567448>
Are graphic tablets more productive? Thinking of buying one
<http://www.sitepoint.com/forums/showthread.php?threadid=569239>
Google Working on Open Source Browser
<http://www.sitepoint.com/forums/showthread.php?threadid=569052>
Digitalpoint sued by Ebay
<http://www.sitepoint.com/forums/showthread.php?threadid=568450>
Are you a Trial and Error Coder
<http://www.sitepoint.com/forums/showthread.php?threadid=568345>
Checkboxes into a multi-select list?
<http://www.sitepoint.com/forums/showthread.php?threadid=567864>
Alt or title or nothing?
<http://www.sitepoint.com/forums/showthread.php?threadid=567820>
Select in a select
<http://www.sitepoint.com/forums/showthread.php?threadid=567047>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Google Working on Browser: What About Mozilla? (50 comments)
http://www.sitepoint.com/blogs/2008/09/02/google-working-on-browser-what-about-mozilla/
Target Settles Accessibility Lawsuit for $6 Million (53
comments)
http://www.sitepoint.com/blogs/2008/08/29/target-settles-accessibility-lawsuit-for-6-million/
Would You Switch To IE8? (81 comments)
http://www.sitepoint.com/blogs/2008/08/29/would-you-switch-to-ie8/
Web Tech Blog: TECHNICALLY SPEAKING
Tagging is Not Just for Content (9 comments)
http://www.sitepoint.com/blogs/2008/08/29/tagging-is-not-just-for-content/
Attending Drupalcon 2008 - Szeged, Hungary
http://www.sitepoint.com/blogs/2008/08/28/attending-drupalcon-2008-szeged-hungary/
Another 100 Free Adobe AIR Books: First In, Best Dressed! (1
comment)
http://www.sitepoint.com/blogs/2008/08/28/another-100-free-adobe-air-books-first-in-best-dressed/
PHP Blog: DYNAMICALLY TYPED
Rasmus Lerdorf: PHP Frameworks? Think Again. (27 comments)
http://www.sitepoint.com/blogs/2008/08/29/rasmus-lerdorf-php-frameworks-think-again/
ColdFusion Blog: INFUSED
All's Quiet on the CF Front... (1 comment)
http://www.sitepoint.com/blogs/2008/08/29/alls-quiet-on-the-cf-front/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list, send a blank email to:
leave-2467197-2266608.e57363ef99c8b59c8667cca2fd106cbe@sitepoint.sparklist.com
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.