<?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>Stiern.com &#187; Articles</title> <atom:link href="http://stiern.com/category/articles/feed" rel="self" type="application/rss+xml" /><link>http://stiern.com</link> <description>Web design, graphic design, Photoshop, CSS, etc</description> <lastBuildDate>Sat, 28 Aug 2010 15:07:45 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.1</generator> <item><title>CSS3 is Not Freaking HTML5</title><link>http://stiern.com/articles/css3-is-not-freaking-html5</link> <comments>http://stiern.com/articles/css3-is-not-freaking-html5#comments</comments> <pubDate>Wed, 09 Jun 2010 09:42:03 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[CSS3]]></category> <category><![CDATA[HTML5]]></category> <category><![CDATA[JavaScript]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[MooTools]]></category> <category><![CDATA[Prototype]]></category><guid
isPermaLink="false">http://stiern.com/?p=1032</guid> <description><![CDATA[So, there&#8217;s been quite a buzz about HTML5 lately. New semantic elements, native audio and video tags, the canvas element, etc. It&#8217;s all good. However, some people seem to have a hard time distinguishing between HTML5 and CSS3. And between HTML5 and jQuery. Not Flash. They know that HTML5 is not Flash. In this article [...]]]></description> <content:encoded><![CDATA[<p>So, there&#8217;s been quite a buzz about HTML5 lately. New semantic elements, native audio and video tags, the canvas element, etc. It&#8217;s all good. However, some people seem to have a hard time distinguishing between HTML5 and CSS3. And between HTML5 and jQuery. Not Flash. They know that HTML5 is not Flash.</p><p><span
id="more-1032"></span></p><p>In this article I&#8217;m going to give you a very<em> </em>short overview of the three technologies, to help you know the difference.</p><h3>CSS3</h3><p>CSS—or <em>cascading stylesheets</em>—is a specification under development. Many features are already supported by modern browsers such as Safari, Firefox, and Chrome (and soon to come: IE9). Let&#8217;s have a glance at the W3C&#8217;s (those guys who work on developing standards) description of <a
title="HTML &amp; CSS - W3C" href="http://www.w3.org/standards/webdesign/htmlcss">what CSS is</a>:</p><blockquote><p>&#8220;CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.&#8221;</p></blockquote><p>Okay, so it&#8217;s got something to do with layout. What can you do with CSS? Well, you can <em>style</em> HTML elements. You can animate them. It&#8217;s awesome. But it&#8217;s not HTML5! I feel tempted to, once again, quote W3C:</p><blockquote><p>&#8220;The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the <em>separation of structure (or: content) from presentation.&#8221;</em></p></blockquote><p>For me, that settles it. In case it doesn&#8217;t for you, <em>separation</em> is the keyword here. We&#8217;re <em>separating</em> structure (HTML) from presentation (CSS). Structure. And presentation. Not the same. But equally important.</p><p>Even though CSS3 is not HTML5, it doesn&#8217;t mean that it isn&#8217;t cool. You can do all sorts of amazing stuff with CSS3. So many people have created lists of stunning CSS3 effects, and I&#8217;m not going to attempt to do it over again, &#8217;cause they&#8217;re all really good.</p><p>To learn more about CSS3 and what it does, check out <a
title="CSS3.info" href="http://www.css3.info/">CSS3.info</a>.</p><h3>JavaScript Frameworks</h3><p>JavaScript frameworks/libraries/whatever are might popular these days. With relatively few lines of code it&#8217;s possible to do Ajax interactions, animations, and a bunch of other stuff. Popular frameworks include <a
title="jQuery" href="http://jquery.com">jQuery</a>, <a
title="Prototype" href="http://www.prototypejs.org/">Prototype</a>, and <a
title="MooTools" href="http://mootools.net/">MooTools</a>—and they all share the same thing: it&#8217;s <em>JavaScript</em>. And JavaScript is not HTML5.</p><p>You can use JavaScript to enable HTML5 elements in older browsers (check out <a
title="Modernizt" href="http://modernizr.com/">Modernizr</a>), or you can use it to develop incredible web applications. JavaScript is amazing. Being able to do modifications on a website without reloading it is great. But it isn&#8217;t HTML5.</p><h3>HTML5</h3><blockquote><p>&#8220;HTML is the language for describing the structure of Web pages.&#8221;</p></blockquote><p>Yeah, I&#8217;m quoting W3C again. HTML5 is an emerging standard to take over HTML 4 and XHTML 1.1. With focus on structural elements and web application features, HTML5 really is going to be the next big thing. Recently, Apple launched their <a
title="Apple's HTML5 showcase" href="http://www.apple.com/html5/">“HTML5” showcase</a>. What&#8217;s funny is, that most examples are actually showcasing CSS3 and JavaScript. And as you all might remember—neither CSS3 nor JavaScript is HTML5.</p><p>It seems that HTML5 is becoming the generic term for &#8220;cool stuff you can do on the Internet&#8221;. I feel sorry for HTML5. It deserves to be recognized for what it is, and what it&#8217;s good at. As do CSS3. As do JavaScript. This confusion of concept isn&#8217;t doing good for anyone. Few years from now I fear my clients saying: &#8220;The design is a little bit boring. Maybe if you add some HTML5 effects…&#8221;.</p><p>So please, help spread the word: CSS3 is not HTML5. Neither is JavaScript.</p><p>Related posts:<ol><li><a
href='http://stiern.com/tutorials/create-a-cool-messy-list-with-css3-and-nth-child' rel='bookmark' title='Permanent Link: Create a Cool Messy List with CSS3 and nth-child'>Create a Cool Messy List with CSS3 and nth-child</a></li><li><a
href='http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website' rel='bookmark' title='Permanent Link: 5 Cool Ways to Add Graphs to Your Website'>5 Cool Ways to Add Graphs to Your Website</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/css3-is-not-freaking-html5/feed</wfw:commentRss> <slash:comments>8</slash:comments> </item> <item><title>Should Comment Forms Have More Fields?</title><link>http://stiern.com/articles/should-comment-forms-have-more-fields</link> <comments>http://stiern.com/articles/should-comment-forms-have-more-fields#comments</comments> <pubDate>Thu, 10 Dec 2009 23:41:43 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Accessibility]]></category> <category><![CDATA[Comments]]></category> <category><![CDATA[Discussion]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[Web Design]]></category><guid
isPermaLink="false">http://stiern.com/?p=879</guid> <description><![CDATA[Often, when you visit a website, you&#8217;ll want to leave a comment there. To do that, you&#8217;ll of course write some text in a comment form. But most comment forms, regardless of their design, look the same. Sure, some do add that hated captcha field, but still, most comment forms are the same. But should [...]]]></description> <content:encoded><![CDATA[<p>Often, when you visit a website, you&#8217;ll want to leave a comment there. To do that, you&#8217;ll of course write some text in a comment form. But most comment forms, regardless of their design, look the same. Sure, some do add that hated captcha field, but still, most comment forms are the same.</p><p><span
id="more-879"></span></p><p>But should they be? This post is in not an answer, it is an introduction to discussion&mdash;and hopefully reflection.</p><p>So, which comment fields do we see in comment forms today?</p><h3>Name</h3><p>Name is pretty obvious. We need a name to know who writes the comment.</p><h3>E-mail</h3><p>Is the e-mail field necessary? Well, many websites uses an e-mail field in the fight against spam. But is that really necessary? Most spam bots can figure out how to put an &#8216;@&#8217; between two words in order to cheat. Still, it&#8217;s better to have a little security than none at all.</p><h3>Website</h3><p>In this field, the user can put the URL to their website&mdash;if they have one. Most people that visit my website don&#8217;t have a website&mdash;at least they don&#8217;t write the URL in the website field.</p><h3>Comment</h3><p>This field is of course obvious, as it is the comment itself.</p><p>So, these four fields are the basics of a standard comment form. But what could we else be needing? Let&#8217;s look at where we might be able to improve.</p><p><br
/></p><h3>Headlines</h3><p>Why not give your users the possibility to give their comment a headline? It, of course, depends on each website, but headlines can be a good way to summarize a comment, and help people find the comment they are looking for a lot faster.</p><h3>Age</h3><p>Depending on your site&#8217;s topic, age might be a good field to add. It might even replace the name field in case the site is based on the anonymity of the user.</p><h3>Gender</h3><p>Like with age, a site allowing you to be anonymous would be a good place to use a gender field in your comment section.</p><h3>Social media</h3><p>Social media is here to stay. Whether it&#8217;s <a
href="http://facebook.com" title="Facebook">Facebook</a>, <a
href="http://twitter.com" title="Twitter">Twitter</a>, <a
href="http://flickr.com" title="Flickr">Flickr</a>, etc., social media connects people. And even though the primary function of a comment section on a website is not to connect people, I don&#8217;t see why we can&#8217;t add to social media by letting our users link to their social media accounts in a comment form.</p><p>Let your users write the URL to their Facebook account, their Flickr user name, their Last.fm account, whatever! Still, you shouldn&#8217;t let it get too clumsy by filling the comments up with way too much information. If there&#8217;s no need to let them write it, don&#8217;t give them the option.</p><p>If those reading the comment find one comment particularily interesting, it is very easy to get in touch with the person who wrote it, as the e-mail address isn&#8217;t public.</p><h3>Category</h3><p>You might want your users to give different categories of comments, such as review, support, criticism, etc. The comments can be styled in different colors or within tabs. A great example of this is <a
title="The Idea Shower" href="http://www.ideashower.com/ideas/launched/css-text-wrapper/">The Idea Shower</a>, as seen in the picture below.</p><p><a
class="lightbox postimg" title="Example from The Idea Shower" href="http://stiern.com/site/wp-content/everything/comment_example.png"><img
class="alignnone size-full wp-image-885" title="Example from The Idea Shower" src="http://stiern.com/site/wp-content/everything/comment_example.png" alt="" width="500" height="575" /></a></p><h3>Final Thoughts</h3><p>Remember, before everything, that you shouldn&#8217;t add a field if there is no use for them. The most important part of the comment is the comment itself&mdash;<em>don&#8217;t confuse your visitors with too much information</em>; you still want your comments to be readable.</p><p>This was my thoughts about adding new fields to a comment form. What do you think? Do you think it should stay the way it is or should we take advantage of being able to make every comment form different? Please write you comment in the standard comment form below&hellip;</p><p>Related posts:<ol><li><a
href='http://stiern.com/tutorials/how-to-use-directions-with-google-maps-api-v3' rel='bookmark' title='Permanent Link: How to Use Directions with Google Maps API V3'>How to Use Directions with Google Maps API V3</a></li><li><a
href='http://stiern.com/articles/which-social-networks-are-you-part-of' rel='bookmark' title='Permanent Link: Which Social Networks Are You Part Of?'>Which Social Networks Are You Part Of?</a></li><li><a
href='http://stiern.com/articles/5-ways-to-make-money-with-your-blog' rel='bookmark' title='Permanent Link: 5 Ways to Make Money with Your Blog'>5 Ways to Make Money with Your Blog</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/should-comment-forms-have-more-fields/feed</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>5 Ways to Make Money with Your Blog</title><link>http://stiern.com/articles/5-ways-to-make-money-with-your-blog</link> <comments>http://stiern.com/articles/5-ways-to-make-money-with-your-blog#comments</comments> <pubDate>Sun, 01 Nov 2009 21:45:02 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Amazon]]></category> <category><![CDATA[Blogging]]></category> <category><![CDATA[BuySellAds]]></category> <category><![CDATA[Donation]]></category> <category><![CDATA[Google AdSense]]></category> <category><![CDATA[Money]]></category> <category><![CDATA[Tradedoubler]]></category><guid
isPermaLink="false">http://stiern.com/?p=815</guid> <description><![CDATA[Maintaining a blog can be quite a job. Writing new, interesting articles and providing resources for your visitors can be a hassle, even though you enjoy every part of it. I am sure you&#8217;d like to earn a little something after your effort. This post looks into some easy ways to start monetizing your blog. [...]]]></description> <content:encoded><![CDATA[<p>Maintaining a blog can be quite a job. Writing new, interesting articles and providing resources for your visitors can be a hassle, even though you enjoy every part of it. I am sure you&#8217;d like to earn a little something after your effort. This post looks into some easy ways to start monetizing your blog.<br
/> <span
id="more-815"></span></p><h3>BuySellAds</h3><p><a
class="lightbox postimg" title="BuySellAds" href="http://stiern.com/site/wp-content/everything/bsa.png"><img
class="size-full wp-image-823" title="BuySellAds" src="http://stiern.com/site/wp-content/everything/bsa.png" alt="BuySellAds" width="500" height="150" /></a></p><p>BuySellAds is a very popular ad network that helps advertisers and publishers communicate. They have some very simple rules to follow to ensure the quality of the sites the ads are placed. First of all, the service evolves around design and tech sites with more than 100.000 impressions per month, which narrows it down a bit. Also, your website has to be in English. Many popular websites, such as the <a
title="Tuts+" href="http://tutsplus.com/">Tuts+ Network</a>, use this network.<br
/> <a
title="BuySellAds" href="http://buysellads.com/">Visit BuySellAds</a></p><h3>Google AdSense</h3><p><a
class="lightbox postimg" title="AdSense" href="http://stiern.com/site/wp-content/everything/adsense.png"><img
class="size-full wp-image-826" title="AdSense" src="http://stiern.com/site/wp-content/everything/adsense.png" alt="AdSense" width="500" height="150" /></a></p><p>Google AdSense is by far the most popular ad network in the world. It is very easy to setup &amp;emdash; in less than 5 minutes, you will have working ads on your website. It takes a lot of visitors to make real money out of this, but it is definitely possible. You can use AdSense both to place ads on your website, in your e-mail newsletters, in your search results, and in your feeds.<br
/> <a
title="Google AdSense" href="https://www.google.com/adsense/">Visit Google AdSense</a></p><h3>TradeDoubler</h3><p><a
class="lightbox postimg" title="Tradedoubler" href="http://stiern.com/site/wp-content/everything/tradedoubler.png"><img
class="size-full wp-image-827" title="Tradedoubler" src="http://stiern.com/site/wp-content/everything/tradedoubler.png" alt="Tradedoubler" width="500" height="150" /></a></p><p>TradeDoubler was founded in Sweden in 1999, and since then, it has grown to a very large marketing company. When you sign up, you will have to get your website accepted, and when you want to place ads, the companies will also have to accept your site as relevant for their products. Even though this might seem like a huge process, it can be well worth it. Some large companies, such as Apple and Dell, sell their ads here.<br
/> <a
title="TradeDoubler" href="http://www.tradedoubler.com/">Visit TradeDoubler</a></p><h3>Amazon</h3><p><a
class="lightbox postimg" title="Amazon" href="http://stiern.com/site/wp-content/everything/amazon.png"><img
class="size-full wp-image-833" title="Amazon" src="http://stiern.com/site/wp-content/everything/amazon.png" alt="Amazon" width="500" height="150" /></a></p><p>Amazon.com Associates puts Amazon products on your website, and allows you to make money from it. When people buy after following a link from your blog, you will get up to 15 %.<br
/> <a
title="Amazon.com Associates" href="https://affiliate-program.amazon.com/">Visit Amazon.com Associates</a></p><h3>Donations</h3><p><a
class="lightbox postimg" title="PayPal" href="http://stiern.com/site/wp-content/everything/paypal.png"><img
class="size-full wp-image-835" title="PayPal" src="http://stiern.com/site/wp-content/everything/paypal.png" alt="PayPal" width="500" height="150" /></a></p><p>If you&#8217;d like you can also ask your users for donation. That can be a great idea if you give away lots of free stuff. Most people won&#8217;t give you anything, but others will gladly spare a dime to help you out. For this purpose, you can use for instance <a
title="PayPal" href="https://www.paypal.com/">PayPal</a>. Instead of money, you can also ask for <a
href="http://www.blogclout.com/blog/goodies/buy-me-a-beer-paypal-donation-plugin/">a beer</a>.</p><p>I hope this article has given you a short glimpse into some different methods of earning money with your blog. Which services do you use, if any? Please share in the comments.</p><p>Related posts:<ol><li><a
href='http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website' rel='bookmark' title='Permanent Link: 5 Cool Ways to Add Graphs to Your Website'>5 Cool Ways to Add Graphs to Your Website</a></li><li><a
href='http://stiern.com/articles/should-comment-forms-have-more-fields' rel='bookmark' title='Permanent Link: Should Comment Forms Have More Fields?'>Should Comment Forms Have More Fields?</a></li><li><a
href='http://stiern.com/articles/great-designers-to-get-inspired-by' rel='bookmark' title='Permanent Link: Great Designers to get Inspired by'>Great Designers to get Inspired by</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/5-ways-to-make-money-with-your-blog/feed</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>5 Cool Ways to Add Graphs to Your Website</title><link>http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website</link> <comments>http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website#comments</comments> <pubDate>Sun, 18 Oct 2009 13:20:35 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Chart]]></category> <category><![CDATA[Flot]]></category> <category><![CDATA[Google]]></category> <category><![CDATA[Graph]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Open Flash Chart]]></category> <category><![CDATA[SVG]]></category> <category><![CDATA[Visualize]]></category><guid
isPermaLink="false">http://stiern.com/?p=585</guid> <description><![CDATA[Graphs, charts and diagrams can be used to visually describe data. Visualizing data is very important, as it helps the reader to understand the data even better. And even though some people might prefer viewing data in a table, I think we are many who feel more comfortable in viewing data graphically. Fortunately for us, [...]]]></description> <content:encoded><![CDATA[<p>Graphs, charts and diagrams can be used to visually describe data. Visualizing data is very important, as it helps the reader to understand the data even better. And even though some people might prefer viewing data in a table, I think we are many who feel more comfortable in viewing data graphically. Fortunately for us, there are several ways you can implement data into a graph on a website.</p><p><span
id="more-585"></span></p><p>Basically, you have two main options; You can use Flash, or you can use jQuery. What you prefer is entirely up to you, but I&#8217;d like to show you some of the possibilities within each technology.</p><h3>Open Flash Chart</h3><div
id="attachment_594" class="wp-caption alignnone" style="width: 510px"><a
class="lightbox" title="Open Flash Chart" href="http://stiern.com/site/wp-content/everything/ofc.png"><img
class="alignnone size-full wp-image-597" title="Open Flash Chart" src="http://stiern.com/site/wp-content/everything/ofc.png" alt="" width="500" height="186" /></a><p
class="wp-caption-text">An example of a bar chart made with Open Flash Chart</p></div><p>Open Flash Chart is—as the name states—a Flash chart. If you run a WordPress blog, you might know it from the <a
title="WordPress.com Stats Plugin" href="http://wordpress.org/extend/plugins/stats/">WordPress.com Stats Plugin</a>. It is open source, and there are lots of customization options. You can make almost any kind of chart you can imagine, and it&#8217;s fairly easy to setup if you just follow the <a
title="Open Flash Chart tutorial" href="http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php">tutorials</a> on the Open Flash Chart website. With the new Open Flash Chart 2, you can even use it with jQuery and save your graphs as images. To see examples, and to read the tutorials, visit the <a
href="http://teethgrinder.co.uk/open-flash-chart-2/">Open Flash Chart website</a>.</p><h3>Flot</h3><div
id="attachment_710" class="wp-caption alignnone" style="width: 510px"><a
class="lightbox"  title ="An example of a Flot graph" href="http://stiern.com/site/wp-content/everything/flot.png"><img
src="http://stiern.com/site/wp-content/everything/flot.png" alt="An example of a Flot graph" title="An example of a Flot graph" width="500" height="256" class="size-full wp-image-710" /></a><p
class="wp-caption-text">An example of a Flot graph</p></div><p>Next up is Flot, a jQuery based method for implementing graphs. It is hosted at <a
href="http://code.google.com/p/flot/" title="Flot at Google Code">Google Code</a>, and it works in all the major browsers (including IE6). It comes with <a
href="http://people.iola.dk/olau/flot/examples/" title="Flot examples">a great bunch of examples</a>, but the documentation could be better. The output of Flot will be a static image.</p><h3>jQuery Visualize Plugin</h3><div
id="attachment_713" class="wp-caption alignnone" style="width: 510px"><a
class="lightbox"  title ="An example of the jQuery Visualize Plugin." href="http://stiern.com/site/wp-content/everything/jqueryvisualize.png"><img
src="http://stiern.com/site/wp-content/everything/jqueryvisualize.png" alt="An example of the jQuery Visualize Plugin." title="An example of the jQuery Visualize Plugin." width="500" height="251" class="size-full wp-image-713" /></a><p
class="wp-caption-text">An example of the jQuery Visualize Plugin.</p></div><p><a
href="http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/" title="jQuery Visualize Plugin">This jQuery plugin</a> helps you implement dynamic charts into your website without using Flash. Using the HTML5 canvas element it is possible to create great-looking charts without using even images. There&#8217;s a very thorough tutorial at the site that helps you set it all up. Also, it works in every major browser.</p><h3>jQuery SVG</h3><div
id="attachment_719" class="wp-caption alignnone" style="width: 510px"><a
class="lightbox"  title ="An example of a bar graph made using jQuery SVG" href="http://stiern.com/site/wp-content/everything/svg.png"><img
src="http://stiern.com/site/wp-content/everything/svg.png" alt="An example of a bar graph made using jQuery SVG" title="An example of a bar graph made using jQuery SVG" width="500" height="276" class="size-full wp-image-719" /></a><p
class="wp-caption-text">An example of a bar graph made using jQuery SVG</p></div><p>This is yet another jQuery plugin called <a
href="http://keith-wood.name/svg.html" title="jQuery SVG">jQuery SVG</a>. It uses SVG, a language &#8220;for describing two-dimensional graphics in XML&#8221;. SVG is supported in most browsers. Actually, it is not only a graphing plugin. You can use it to create advanced graphics on your website such as text paths. Still, for graphs it is very usable.</p><h3>Google Chart API</h3><div
id="attachment_721" class="wp-caption alignnone" style="width: 450px"><a
class="lightbox"  title ="An example of a map chart made with Google Chart API" href="http://stiern.com/site/wp-content/everything/googlechart.png"><img
src="http://stiern.com/site/wp-content/everything/googlechart.png" alt="An example of a map chart made with Google Chart API" title="An example of a map chart made with Google Chart API" width="440" height="220" class="size-full wp-image-721" /></a><p
class="wp-caption-text">An example of a map chart made with Google Chart API</p></div><p>The last method is Google&#8217;s own <a
href="http://code.google.com/apis/chart/" title="Chart API">Chart API</a>. It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You&#8217;ll get some very fine looking graphs with little effort, and everything is customizable.</p><h3>Conclusion</h3><p>Now to the big question: Which method is the best? I don&#8217;t know. I guess it&#8217;s all about taste and what you need it for. But similar for the five mentioned methods is that you have some very great, free resources that easily lets you implement graphs into your website.</p><p>Related posts:<ol><li><a
href='http://stiern.com/tutorials/adding-custom-google-maps-to-your-website' rel='bookmark' title='Permanent Link: Adding Custom Google Maps to Your Website'>Adding Custom Google Maps to Your Website</a></li><li><a
href='http://stiern.com/articles/5-ways-to-make-money-with-your-blog' rel='bookmark' title='Permanent Link: 5 Ways to Make Money with Your Blog'>5 Ways to Make Money with Your Blog</a></li><li><a
href='http://stiern.com/articles/css3-is-not-freaking-html5' rel='bookmark' title='Permanent Link: CSS3 is Not Freaking HTML5'>CSS3 is Not Freaking HTML5</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website/feed</wfw:commentRss> <slash:comments>9</slash:comments> </item> <item><title>Adding Custom Google Maps to Your Website</title><link>http://stiern.com/tutorials/adding-custom-google-maps-to-your-website</link> <comments>http://stiern.com/tutorials/adding-custom-google-maps-to-your-website#comments</comments> <pubDate>Mon, 12 Oct 2009 22:56:47 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Google Maps]]></category> <category><![CDATA[Web Design]]></category><guid
isPermaLink="false">http://stiern.com/?p=626</guid> <description><![CDATA[Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn&#8217;t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am [...]]]></description> <content:encoded><![CDATA[<p>Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn&#8217;t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how.<br
/> <span
id="more-626"></span></p><p>Before we start, check out what we are going to create:</p><div
class="iframe-wrapper"> <iframe
src="http://dl.getdropbox.com/u/32709/googlemaps/index.html" frameborder="0" style="height:300px;width:500px;">Please upgrade your browser</iframe></div><p>Now, here is an overview:</p><h3>Overview</h3><ul><li><a
href="#google_api">Google Maps API</a></li><li><a
href="#coordinates">Getting the Coordinates</a></li><li><a
href="#adding_the_map">Adding the Map to Your Website</a></li><li><a
href="#adding_markers">Adding Markers</a></li><li><a
href="#custom_markers">Customizing the Markers</a></li><li><a
href="#infobox">Adding Infoboxes</a></li><li><a
href="#download">Download</a></li></ul><h3><a
id="google_api">Google Maps API</a></h3><p>The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying&#8212;a little CSS. <a
title="Google Maps API V3" href="http://code.google.com/apis/maps/documentation/v3/">Version 3</a> of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at <a
title="Google Labs" href="http://code.google.com/intl/en-EN/apis/maps/documentation/v3/">Google Labs</a>, and while you are there, be sure to get an <a
title="Google Maps API key" href="http://code.google.com/intl/en-EN/apis/maps/signup.html">API key</a>.</p><h3><a
id="coordinates">Getting the Coordinates</a></h3><p>As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:</p><div
class="wp_syntax"><div
class="code"><pre class="javascript" style="font-family:monospace;">http<span style="color: #339933;">:</span><span style="color: #006600; font-style: italic;">//maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&amp;output=csv&amp;oe=utf8&amp;sensor=false&amp;key=your_google_maps_api_key</span></pre></div></div><p>When you enter this in your address bar, you will see this:</p><div
id="attachment_653" class="wp-caption alignnone" style="width: 255px"><a
class="lightbox"  title ="The coordinates of Apple's head quarter in Cupertino" href="http://stiern.com/site/wp-content/everything/apple_coordinates.png"><img
src="http://stiern.com/site/wp-content/everything/apple_coordinates.png" alt="The coordinates of Apple&#039;s head quarter in Cupertino" title="The coordinates of Apple&#039;s head quarter in Cupertino" width="245" height="28" class="size-full wp-image-653" /></a><p
class="wp-caption-text">The coordinates of Apple's head quarter in Cupertino</p></div><p>The first number is the <a
href="http://code.google.com/intl/da-DK/apis/maps/documentation/geocoding/index.html#StatusCodes" title="Status Codes">status code</a>, and 200 means that everything is okay. The second number shows how <a
href="http://code.google.com/intl/da-DK/apis/maps/documentation/geocoding/index.html#GeocodingAccuracy" title="Accuracy">accurate</a> the address is&#8212;in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.</p><h3><a
id="adding_the_map">Adding the Map to Your Website</a></h3><p>There&#8217;s no need to hesitate – let&#8217;s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between <code>&lt;head&gt; and &lt;/head&gt;</code>:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;initial-scale=1.0, user-scalable=no&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://maps.google.com/maps/api/js?sensor=false&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></td></tr></table></div><p>After the URL, you will notice <code>sensor=false</code>. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.</p><p>Just below what we have just inserted, write the following:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #003366; font-weight: bold;">function</span> initialize<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> latlng <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">LatLng</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">57.0442</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9.9116</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> settings <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			zoom<span style="color: #339933;">:</span> <span style="color: #CC0000;">15</span><span style="color: #339933;">,</span>
			center<span style="color: #339933;">:</span> latlng<span style="color: #339933;">,</span>
			mapTypeControl<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
			mapTypeControlOptions<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>style<span style="color: #339933;">:</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">MapTypeControlStyle</span>.<span style="color: #660066;">DROPDOWN_MENU</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			navigationControl<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
			navigationControlOptions<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>style<span style="color: #339933;">:</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">NavigationControlStyle</span>.<span style="color: #660066;">SMALL</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			mapTypeId<span style="color: #339933;">:</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">MapTypeId</span>.<span style="color: #660066;">ROADMAP</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Let&#8217;s split this up to ensure that we understand it fully. In line 2 we create the function <code>initialize()</code>. Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, <code>latlng</code>. <code>latlng</code> stands for latitudes and longitudes. The variable contains the coordinates we&#8217;re going to use as the center of our map.<br
/> After that, we create the variable <code>settings</code>. You have a lot of options here.</p><p><code>zoom</code> specifies&#8212;you guessed it&#8212;how far the map will be zoomed in. Play around with the number to get it to fit your location.</p><p><code>center</code> specifies our center. By writing <code>latlng</code>, we refer to the variable we created earlier, and the coordinate inside that will be used.</p><p>The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.</p><p><code>mapTypeId: google.maps.MapTypeId.ROADMAP</code> defines that our map should be of the type <code>ROADMAP</code> – you can change this to either <code>SATELLITE</code>, <code>HYBRID</code> or <code>TERRAIN</code>.</p><p>Below the previous code, write this:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;map_canvas&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>This code creates the variable <code>map</code>, and defines that the map should use the settings we just created.</p><p>Write</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code"><pre class="html4strict" style="font-family:monospace;">}
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></td></tr></table></div><p> to end the function, and move to <code>&lt;body&gt;</code>, and write this:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
</pre></td><td
class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span> <span style="color: #000066;">onload</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;initialize()&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;map_canvas&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width:800px; height:500px&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></td></tr></table></div><p>By doing this we are telling our site to execute the <code>initialize()</code> function when the site is loaded, and insert a <code>&lt;div&gt;</code> with the size we want our map to be.</p><p>Try to view your site now. Cool, isn&#8217;t it?</p><h3><a
id="adding_markers">Adding Markers</a></h3><p>Now we have to add some markers. Let&#8217;s start by creating a standard marker&#8212;we&#8217;ll customize it in a moment.</p><p>Right below</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;map_canvas&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p> insert the following code:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;">  <span style="color: #003366; font-weight: bold;">var</span> companyPos <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">LatLng</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">57.0442</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9.9116</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> companyMarker <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Marker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
      position<span style="color: #339933;">:</span> companyPos<span style="color: #339933;">,</span>
      map<span style="color: #339933;">:</span> map<span style="color: #339933;">,</span>
      title<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Some title&quot;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Try to update your page, and watch the magic. So, what have we done?</p><p>First, we create the variable <code>companyPos</code>, where we specify the position of the marker. Next, we create the marker itself using the variable <code>companyMarker</code>. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won&#8217;t go into more depth with them.</p><h3><a
id="custom_markers">Customizing the Markers</h3><p>Even though this could be enough to show your customer how to find you, we can still make it a lot nicer. Create an image in Photoshop with the size 100&#215;50 pixels, and create something similar to this:<br
/><div
id="attachment_660" class="wp-caption alignnone" style="width: 110px"><a
class="lightbox" title="Create your logo" href="http://stiern.com/site/wp-content/everything/logo.png"><img
class="size-full wp-image-660" title="Create your logo" src="http://stiern.com/site/wp-content/everything/logo.png" alt="Create your logo" width="100" height="50" /></a><p
class="wp-caption-text">Create your logo</p></div></p><p>Next, create a shadow for your image:</p><div
id="attachment_663" class="wp-caption alignnone" style="width: 140px"><a
class="lightbox" title="The logo shadow" href="http://stiern.com/site/wp-content/everything/logo_shadow.png"><img
class="size-full wp-image-663" title="The logo shadow" src="http://stiern.com/site/wp-content/everything/logo_shadow.png" alt="The logo shadow" width="130" height="50" /></a><p
class="wp-caption-text">The logo shadow</p></div><p>To add these images as a marker instead of the standard marker, change the marker code to this:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> companyLogo <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">MarkerImage</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'images/logo.png'</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Size</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Point</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Point</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> companyShadow <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">MarkerImage</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'images/logo_shadow.png'</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Size</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">130</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Point</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Point</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">65</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> companyPos <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">LatLng</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">57.0442</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9.9116</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> companyMarker <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Marker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	position<span style="color: #339933;">:</span> companyPos<span style="color: #339933;">,</span>
	map<span style="color: #339933;">:</span> map<span style="color: #339933;">,</span>
	icon<span style="color: #339933;">:</span> companyLogo<span style="color: #339933;">,</span>
	shadow<span style="color: #339933;">:</span> companyShadow<span style="color: #339933;">,</span>
	title<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Company Title&quot;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>What we have done here is also really simple. The variable <code>companyImage</code> points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable <code>companyShadow</code>. In our <code>companyMarker</code> variable we add <code>icon</code> and <code>shadow</code>, and that is basically it.</p><p>Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).</p><p>If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:</p><div
id="attachment_674" class="wp-caption alignnone" style="width: 157px"><a
class="lightbox" title="Adding zIndex allows you to choose which marker should be on top" href="http://stiern.com/site/wp-content/everything/zindex.png"><img
class="size-full wp-image-674" title="Adding zIndex allows you to choose which marker should be on top" src="http://stiern.com/site/wp-content/everything/zindex.png" alt="Adding zIndex allows you to choose which marker should be on top" width="147" height="87" /></a><p
class="wp-caption-text">Adding zIndex allows you to choose which marker should be on top</p></div><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> companyMarker <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">Marker</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	position<span style="color: #339933;">:</span> companyPos<span style="color: #339933;">,</span>
	map<span style="color: #339933;">:</span> map<span style="color: #339933;">,</span>
	icon<span style="color: #339933;">:</span> companyImage<span style="color: #339933;">,</span>
	shadow<span style="color: #339933;">:</span> companyShadow<span style="color: #339933;">,</span>
	title<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Høgenhaug&quot;</span><span style="color: #339933;">,</span>
	zIndex<span style="color: #339933;">:</span> <span style="color: #CC0000;">4</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><h3><a
id="infobox">Adding Infoboxes</a></h3><p>To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it&#8217;s peace of cake.</p><div
id="attachment_677" class="wp-caption alignnone" style="width: 510px"><a
class="lightbox" title="Clicking your company logo will bring up an infobox" href="http://stiern.com/site/wp-content/everything/infobox.png"><img
class="size-full wp-image-677" title="Clicking your company logo will bring up an infobox" src="http://stiern.com/site/wp-content/everything/infobox.png" alt="Clicking your company logo will bring up an infobox" width="500" height="398" /></a><p
class="wp-caption-text">Clicking your company logo will bring up an infobox</p></div><p>Paste this code right after you define the <code>map</code> variable:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> contentString <span style="color: #339933;">=</span> <span style="color: #3366CC;">'&lt;div id=&quot;content&quot;&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;div id=&quot;siteNotice&quot;&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;h1 id=&quot;firstHeading&quot; class=&quot;firstHeading&quot;&gt;Høgenhaug&lt;/h1&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;div id=&quot;bodyContent&quot;&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;p&gt;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 aliquip ex ea commodo consequat.&lt;/p&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> infowindow <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">InfoWindow</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    content<span style="color: #339933;">:</span> contentString
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last <code>}</code> in the <code>initialize()</code> function:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
</pre></td><td
class="code"><pre class="javascript" style="font-family:monospace;">google.<span style="color: #660066;">maps</span>.<span style="color: #660066;">event</span>.<span style="color: #660066;">addListener</span><span style="color: #009900;">&#40;</span>companyMarker<span style="color: #339933;">,</span> <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  infowindow.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>map<span style="color: #339933;">,</span>companyMarker<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>To make the infobox just a little more pretty, add some styles in your stylesheet file:</p><div
class="wp_syntax"><table><tr><td
class="line_numbers"><pre>1
2
3
4
</pre></td><td
class="code"><pre class="css" style="font-family:monospace;">body <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Helvetica<span style="color: #00AA00;">,</span> Arial<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">10pt</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div><p>And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.</p><h3><a
id="download">Download</a></h3><p>If you&#8217;d like to download the sample files, you can get &#8216;em <a
href="http://dl.getdropbox.com/u/32709/googlemaps.zip" title="Download the example files">right here</a>. Be sure to leave a comment!</p><p>No related posts.</p>]]></content:encoded> <wfw:commentRss>http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/feed</wfw:commentRss> <slash:comments>165</slash:comments> </item> <item><title>8 OS X Apps With Beautiful Icons</title><link>http://stiern.com/articles/8-os-x-apps-with-beautiful-icons</link> <comments>http://stiern.com/articles/8-os-x-apps-with-beautiful-icons#comments</comments> <pubDate>Sun, 06 Sep 2009 09:14:33 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Applications]]></category> <category><![CDATA[Billings]]></category> <category><![CDATA[Coda]]></category> <category><![CDATA[Espresso]]></category> <category><![CDATA[ForkLift]]></category> <category><![CDATA[Mac OS X]]></category> <category><![CDATA[MindNode]]></category> <category><![CDATA[QuickTime]]></category> <category><![CDATA[Times]]></category><guid
isPermaLink="false">http://stiern.com/?p=553</guid> <description><![CDATA[There are a lot of cool Mac applications out there, but unfortunately only some of them has beautiful icons. I&#8217;ve tried to collect some apps that I believe have pretty icons. Just like the interface means a lot to the user experience, I actually think the icon does as well. Some software developers understands this, [...]]]></description> <content:encoded><![CDATA[<p>There are a lot of cool Mac applications out there, but unfortunately only some of them has beautiful icons. I&#8217;ve tried to collect some apps that I believe have pretty icons. Just like the interface means a lot to the user experience, I actually think the icon does as well. Some software developers understands this, and some unfortunately don&#8217;t.</p><p><span
id="more-553"></span></p><p>I&#8217;m sure there&#8217;s many other apps with cool icons out there, and if you like one in particular, please let me know in the comments.</p><h3>Espresso ($78)</h3><p><em> </em></p><p><em> </em></p><p><em> </em></p><div
id="attachment_554" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="Espresso" href="http://macrabbit.com/espresso/"><img
class="size-medium wp-image-554  " title="Espresso" src="http://stiern.com/site/wp-content/everything/Espresso-300x300.png" alt="Espresso" width="300" height="300" /></a></dt></dl></div><p>Now, this icon really makes me wanna lick the screen&#8230; The steam from the cup is so delicious! Espresso is MacRabbit&#8217;s web development software, and it&#8217;s not only the icon that&#8217;s nice.</p><h3>Bodega (free)</h3><div
class="mceTemp"><dl
id="attachment_557" class="wp-caption alignnone" style="width: 310px;"><dt
class="wp-caption-dt"><a
class="lightbox" title="Bodega" href="http://appbodega.com/"><img
class="size-medium wp-image-557 " title="Bodega" src="http://stiern.com/site/wp-content/everything/Bodega-300x300.png" alt="" width="300" height="300" /></a></dt></dl></div><p>Bodega is created by IDFusion Software and Centrix.ca. It is the iPhone App Store for Mac apps. It comes with a stunning interface, and it seems to be growing incredibly fast. And, oh yeah–the icon is great!</p><h3>ForkLift ($19.95)</h3><div
class="mceTemp"><dl
id="attachment_561" class="wp-caption alignnone" style="width: 310px;"><dt
class="wp-caption-dt"><a
class="lightbox" title="ForkLift" href="http://www.binarynights.com/forklift/"><img
class="size-medium wp-image-561" title="ForkLift" src="http://stiern.com/site/wp-content/everything/ForkLift-300x300.png" alt=" " width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>Are you as tired of Cyberduck as I am? Then you should try ForkLift. It is an advanced FTP client that is fast, and has all the features you&#8217;ll ever need from a FTP client. The interface is beautiful and so is the icon.</p><h3>MindNode (free)</h3><div
id="attachment_563" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="Mindnode" href="http://www.mindnode.com/"><img
class="size-medium wp-image-563" title="Mindnode" src="http://stiern.com/site/wp-content/everything/Mindnode-300x300.png" alt="" width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>MindNode is a really cool piece of software. It helps you organize and structure your ideas in really neat mind maps. The icon is nothing I&#8217;ve seen before–I love the way the plant comes out of the frame.</p><h3>QuickTime Player X (free)</h3><div
id="attachment_564" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="QuickTimePlayerX" href="http://www.apple.com/macosx/what-is-macosx/quicktime.html"><img
class="size-medium wp-image-564" title="QuickTimePlayerX" src="http://stiern.com/site/wp-content/everything/QuickTimePlayerX-300x300.png" alt="" width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>With Snow Leopard Apple released QuickTime Player X with an entirely new interface and some cool new features (and unfortunately without some of the very useful features from QuickTime Player 7). Nevertheless, the icon got a complete redesign, and I don&#8217;t think I&#8217;m the only one who thinks they got pretty well away with it.</p><h3>Times ($30)</h3><div
id="attachment_566" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="Times" href="http://www.acrylicapps.com/times/"><img
class="size-medium wp-image-566" title="Times" src="http://stiern.com/site/wp-content/everything/Times-300x300.png" alt="" width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>Acrylic has tried to reinvent the RSS reader with their app Times, and I think they succeeded, although for me $30 is a bit too much to spend on a RSS reader. However, the app does feature a beautiful icon.</p><h3>Coda ($99)</h3><div
id="attachment_569" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="Coda" href="http://panic.com/coda/"><img
class="size-medium wp-image-569" title="Coda" src="http://stiern.com/site/wp-content/everything/Coda-300x300.png" alt=" " width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>Coda is Panic&#8217;s web development client, and has for a long time been the by far most popular web development client as well. Now that Espresso&#8217;s out, let&#8217;s see what happens. Even though I actually never really understood why the icon is a leaf, I still think it&#8217;s a very beautiful icon.</p><h3>Billings ($56)</h3><div
id="attachment_570" class="wp-caption alignnone" style="width: 310px"><a
class="lightbox" title="Billings" href="http://www.billingsapp.com/"><img
class="size-medium wp-image-570" title="Billings" src="http://stiern.com/site/wp-content/everything/Billings-300x300.png" alt=" " width="300" height="300" /></a><p
class="wp-caption-text"></p></div><p>Billings is really popular these days. It is a feature packed invoicing app with time billing and it&#8217;s very easy to use.</p><p>Related posts:<ol><li><a
href='http://stiern.com/downloads/250-sweet-icons-for-your-external-media' rel='bookmark' title='Permanent Link: 250+ Sweet Icons for Your External Media'>250+ Sweet Icons for Your External Media</a></li><li><a
href='http://stiern.com/articles/5-cool-ways-to-add-graphs-to-your-website' rel='bookmark' title='Permanent Link: 5 Cool Ways to Add Graphs to Your Website'>5 Cool Ways to Add Graphs to Your Website</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/8-os-x-apps-with-beautiful-icons/feed</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Which Social Networks Are You Part Of?</title><link>http://stiern.com/articles/which-social-networks-are-you-part-of</link> <comments>http://stiern.com/articles/which-social-networks-are-you-part-of#comments</comments> <pubDate>Thu, 23 Apr 2009 21:09:52 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Dopplr]]></category> <category><![CDATA[Facebook]]></category> <category><![CDATA[Flickr]]></category> <category><![CDATA[Last.fm]]></category> <category><![CDATA[LinkedIn]]></category> <category><![CDATA[MySpace]]></category> <category><![CDATA[Social Networking]]></category> <category><![CDATA[Twitter]]></category> <category><![CDATA[Vimeo]]></category> <category><![CDATA[YouTube]]></category><guid
isPermaLink="false">http://stiern.com/?p=312</guid> <description><![CDATA[Social networking has eventually become crucial for surviving (!), and it seems there are endless posibilities as to finding the right ones to be part of. For me, it all started with Facebook about two years ago. My friends tried to convince me to sign up, and I finally gave in. Since then, Facebook has [...]]]></description> <content:encoded><![CDATA[<p>Social networking has eventually become crucial for surviving (!), and it seems there are endless posibilities as to finding the right ones to be part of. For me, it all started with <a
title="Facebook" href="http://facebook.com/">Facebook</a> about two years ago. My friends tried to convince me to sign up, and I finally gave in. Since then, Facebook has developed in to a commercial monster, and I hardly log on anymore. But still, Facebook was where it begun. My interest in social networks has only grown since then, and I tell you, there is a cornucopia of social networks out there. But which ones should you be a part of? It is a jungle. I&#8217;d like to take you through the social networks I&#8217;m a part of, and also mention a few that I&#8217;ll never be a part of.</p><p><span
id="more-312"></span></p><h2>Twitter</h2><p><img
class="alignnone size-full wp-image-323" title="Twitter" src="http://stiern.com/site/wp-content/everything/twitter.png" alt="Twitter" width="500" height="100" /></p><p><a
title="Twitter" href="http://twitter.com/">Twitter</a> is for me the most important social network. It is the place for me to share links to great articles, ask questions about software or design related stuff, and lots of other stuff. If you&#8217;re not a member of Twitter, you&#8217;re falling behind. Twitter is the <a
title="Twitter is growing fast!" href="http://www.web-strategist.com/blog/2009/01/11/a-collection-of-soical-network-stats-for-2009/">fastest growing</a> social network ever with an increase of unique visitors of almost 1400 % in one year. That&#8217;s crazy, and the number speaks for itself. Sign up now!</p><p><a
title="Follow me at Twitter" href="https://twitter.com/pshoeg">Follow me on Twitter</a></p><h2>Facebook</h2><p><img
class="alignnone size-full wp-image-325" title="facebook" src="http://stiern.com/site/wp-content/everything/facebook.png" alt="facebook" width="500" height="100" /></p><p>I think I can surely say, that you&#8217;re a member of <a
title="Facebook" href="http://facebook.com">Facebook</a>. If you aren&#8217;t—good for you! Facebook has over the last year become more and more commercial. Oh, and there&#8217;s also this thing about them owning your pictures (which they, as far as I know, are changing) and using them in advertisements. Still, Facebook is probably where most of your friends are. And in the end, it <em>is </em>a great way of keeping in touch with long distance friends, or just knowing every step they take. A couple of my friends have deactivated their Facebook accounts (you can&#8217;t delete it), and I&#8217;m considering following in their footsteps, but I don&#8217;t think I&#8217;m ready yet…</p><p><a
title="Be my friend at Facebook" href="http://www.facebook.com/pshoeg">Be my friend at Facebook</a></p><h2>Flickr</h2><p><img
class="alignnone size-full wp-image-326" title="flickr" src="http://stiern.com/site/wp-content/everything/flickr.png" alt="flickr" width="500" height="100" /></p><p>Until recently, I haven&#8217;t really used <a
title="Flickr" href="http://flickr.com">Flickr</a> as much as I want to. Flickr is a great way of sharing your photos with your family and your friends, or with the world. Flickr became attractive to me the minute I found out that users with free accounts suddenly were able to create more than three sets, a feature that until then only was available for users with pro accounts. I&#8217;ve searched for similar photo sharing services, and there&#8217;s a lot of different alternatives to Flickr, such as <a
title="Picasa" href="http://picasaweb.google.com/home">Picasa</a>, <a
title="Zooomr" href="http://www.zooomr.com/">Zooomr</a> and <a
title="Fotonauts" href="http://www.fotonauts.com/">Fotonauts</a>, but I just don&#8217;t think that any of them can live up to the features and the high standard of photos at Flickr.</p><p><a
title="Be my contact at Flickr" href="http://www.flickr.com/photos/pshoeg/">Be my contact at Flickr</a></p><h2>Vimeo</h2><p><img
class="alignnone size-full wp-image-327" title="vimeo" src="http://stiern.com/site/wp-content/everything/vimeo.png" alt="vimeo" width="500" height="100" /></p><p><a
title="Vimeo" href="http://vimeo.com">Vimeo</a> is my new favourite social network. The cool thing about Vimeo over e.g. YouTube, is that it consists of only original videos. The design of the site is amazing, and it&#8217;s incredibly easy to use. It&#8217;s not as big as YouTube, hence not so immense. There&#8217;s a lot of great stuff for inspiration there, and you should definitely check out the <a
title="Staff Picks at Vimeo" href="http://vimeo.com/staffpicks">Staff Picks channel</a>, where some amazing videos can be found.</p><p><a
title="Be my contact at Vimeo" href="http://vimeo.com/pshoeg">Be my contact at Vimeo</a></p><h2>Dopplr</h2><p><img
class="alignnone size-full wp-image-328" title="dopplr" src="http://stiern.com/site/wp-content/everything/dopplr.png" alt="dopplr" width="500" height="100" /></p><p>I only recently discovered <a
title="Dopplr" href="http://dopplr.com">Dopplr</a>, a place to share you travelling experiences and plans. It allows you to plan your trip into details, and find other people who are going the same places as you. You can invite people to follow your trips, so you can keep them updated while you&#8217;re away. I haven&#8217;t tried this while I&#8217;m travelling yet, but I&#8217;m looking forward to this summer where my wife and I are spending a month in the states. Who know, maybe Dopplr will come in handy?</p><p><a
title="Connect with me at Dopplr" href="http://www.dopplr.com/traveller/pshoeg">Connect with me at Dopplr</a></p><h2>LinkedIn</h2><p><img
class="alignnone size-full wp-image-329" title="linkedin" src="http://stiern.com/site/wp-content/everything/linkedin.png" alt="linkedin" width="500" height="100" /></p><p><a
title="LinkedIn" href="https://www.linkedin.com/">LinkedIn</a> is mostly for work related stuff. It&#8217;s a great place to meet new or future colleagues, and some have found their new job through LinkedIn just by knowing people who knows people, who knows people, who&#8230; You get the point! Use LinkedIn to build up a large network, and make sure you&#8217;re introduced to other peoples&#8217; bosses—maybe they&#8217;ll hire you. LinkedIn is you professional identity online, contrary to e.g. Facebook which is&#8230; Well, not so professional.</p><p><a
title="Be my contact at LinkedIn" href="http://www.linkedin.com/in/pshoeg">Be my contact at LinkedIn</a></p><h2>Social Networks I&#8217;m Not a Member Of</h2><p>If I should pick one social network, that I know for sure I&#8217;ll never be a member of, it has to be <a
title="MySpace" href="http://www.myspace.com/">MySpace</a>. It is very infrequent I find a well-designed MySpace profile. It&#8217;s just all too confusing to me. I&#8217;ve tried using <a
title="Last.fm" href="http://www.last.fm/">Last.fm</a> and similar, but they just never fell into my taste. I like owning my own music. <a
title="i use this" href="http://osx.iusethis.com/">i use this</a>, <a
title="Wakoopa" href="http://wakoopa.com/">Wakoopa</a>, and other equivalents, are not my style either, but hey, maybe someone like them&#8230;</p><p>That&#8217;s about it for me. Now it&#8217;s your turn! Which social networks are you part of? And why? Which social networks will you never sign up to? And why? Please leave you comment below!</p><p>Related posts:<ol><li><a
href='http://stiern.com/articles/should-comment-forms-have-more-fields' rel='bookmark' title='Permanent Link: Should Comment Forms Have More Fields?'>Should Comment Forms Have More Fields?</a></li><li><a
href='http://stiern.com/articles/great-designers-to-get-inspired-by' rel='bookmark' title='Permanent Link: Great Designers to get Inspired by'>Great Designers to get Inspired by</a></li><li><a
href='http://stiern.com/articles/5-ways-to-make-money-with-your-blog' rel='bookmark' title='Permanent Link: 5 Ways to Make Money with Your Blog'>5 Ways to Make Money with Your Blog</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/which-social-networks-are-you-part-of/feed</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Great Designers to get Inspired by</title><link>http://stiern.com/articles/great-designers-to-get-inspired-by</link> <comments>http://stiern.com/articles/great-designers-to-get-inspired-by#comments</comments> <pubDate>Thu, 19 Mar 2009 22:57:50 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Graphic Design]]></category> <category><![CDATA[Inspiration]]></category> <category><![CDATA[Interview]]></category> <category><![CDATA[Web Design]]></category><guid
isPermaLink="false">http://stiern.com/?p=256</guid> <description><![CDATA[When I first started out doing web design, and other types of design, I looked for people to get inspired by. I&#8217;m not only inspired by their graphical work, but also by their methods of working and acting on the Internet. I&#8217;ve tried to collect a list of people I get inspired by. These guys [...]]]></description> <content:encoded><![CDATA[<p>When I first started out doing web design, and other types of design, I looked for people to get inspired by. I&#8217;m not only inspired by their graphical work, but also by their methods of working and acting on the Internet. I&#8217;ve tried to collect a list of people I get inspired by. These guys are amongst the greatest artists out there right now, so you should have a look at their work. For each person, I&#8217;ve collected some great interviews that I hope you&#8217;ll enjoy reading.</p><p><span
id="more-256"></span></p><h2><strong>Nick La</strong></h2><p><strong></strong>Nick is the owner of <a
href="http://www.webdesignerwall.com/">Web Designer Wall</a>, and runs <a
href="http://www.ndesign-studio.com/"><span>N.Design Studio</span></a> and <a
href="http://bestwebgallery.com/"><span>Best Web Gallery</span></a>. He has been around for many years, and has apart from a lot of great articles on Web Designer Wall also gotten tutorials posted in magazines.</p><p><img
class="alignnone size-full wp-image-277" title="Web Designer Wall" src="http://stiern.com/site/wp-content/everything/webdesignerwall.png" alt="webdesignerwall" width="500" height="100" /></p><ul><li><a
style="text-decoration: none;" href="http://www.designinterviews.com/interviews/Nick-La-Read-Experiment-and-Follow-the-Big-Designers">Interview with Nick at Web Designer&#8217;s Interviews</a></li></ul><h2><strong>Collis Ta’eed</strong></h2><p>Collis is the CEO of the <a
href="http://envato.com/">Envato network</a> (if you haven&#8217;t heard of that, something&#8217;s gone wrong). The network contains <a
href="http://psd.tutsplus.com/">Psdtuts+</a>, <a
href="http://net.tutsplus.com/">Nettuts+</a>, and other sites you should have subscribed to in your feed reader already. Collis is a great example of what hard work and making the right decisions can do for your business. As an example, Psdtuts+ has over 50.000 subscribers.</p><p><img
class="alignnone size-full wp-image-294" title="Envato" src="http://stiern.com/site/wp-content/everything/envato1.png" alt="Envato" width="500" height="100" /></p><ul><li><a
href="http://www.fuelyourcreativity.com/interview-with-collis-taeed/">Interview with Collis at Fuel Your Creativity</a></li><li><a
href="http://www.retireat21.com/interview/interview-with-collis-taeed-founder-of-freelanceswitch-dot-com">Interview with Collis at Retire@21</a></li><li><a
href="http://walkmybusiness.com/28/08/interview-with-envato-ceo-collis-taeed/">Interview with Collis at WalkMyBusiness</a></li><li><a
href="http://twitter.com/collis">Follow Collis at Twitter</a></li><li><a
href="http://thenetsetter.com">The Netsetter</a></li></ul><h2>Jacob Cass</h2><p><strong></strong>Jacob is an amazing designer, running the blog <a
href="http://justcreativedesign.com/">Just Creative Design</a>. He writes some very inspirational blog posts, and also is a <a
href="http://justcreativedesign.com/portfolio/">very talented designer</a>. One of his very interesting projects is the <a
rel="bookmark" href="http://justcreativedesign.com/2008/02/17/5000-dollar-prize-giveaway-graphic-design-group-writing-project/">Graphic Design Group Writing Project</a>, which you should definitely check out.</p><p><img
class="alignnone size-full wp-image-296" title="Just Creative Design" src="http://stiern.com/site/wp-content/everything/justcreative1.png" alt="Just Creative Design" width="500" height="100" /></p><ul><li><a
href="http://abduzeedo.com/interview-jacob-cass">Interview with Jacob at Abduzeedo</a></li><li><a
href="http://inspiredology.com/jacob-cass-interview/">Interview with Jacob at Inspiredology</a></li><li><a
href="http://www.myinkblog.com/interview-with-jacob-cass/">Interview with Jacob at My Ink Blog</a></li><li><a
href="http://colorburned.com/2009/01/meet_jacob_cass_from_just_crea.html">Interview with Jacob at Colorburned</a></li><li><a
href="http://twitter.com/justcreative">Follow Jacob at Twitter</a></li></ul><h2>Chris Spooner</h2><p><strong><span
style="font-weight: normal;">Chris is an extremely talented designer with some very thorough tutorials. His <a
href="http://www.blog.spoongraphics.co.uk/">blog</a> is</span><span
style="font-weight: normal;"> very exciting to read as his tutorials are very different from each other. Also, you should check out his <a
href="http://www.chrisspooner.com/">personal website</a>, which is a &#8220;self-updating social homepage&#8221;, as he puts it &#8211; a great idea for an online business card. You should also pay a visit to his <a
href="http://spoongraphics.co.uk/">portfolio site</a>.</span></strong></p><p><img
class="alignnone size-full wp-image-292" title="SpoonGraphics" src="http://stiern.com/site/wp-content/everything/spoon1.png" alt="SpoonGraphics" width="500" height="100" /></p><ul><li><a
href="http://vandelaydesign.com/blog/design/interview-with-chris-spooner/">Interview with Chris at Vandelay Design</a></li><li><a
href="http://inspiredology.com/chris-spooner-interview/">Interview with Chris at Inspiredology</a></li><li><a
href="http://justcreativedesign.com/2008/11/09/designer-in-the-spotlight-chris-spooner/">Interview with Chris at Just Creative Design</a></li><li><a
href="http://twitter.com/chrisspooner">Follow Chris at Twitter</a></li></ul><h2><strong>Chris Coyier</strong></h2><p><strong><span
style="font-weight: normal;">Chris is the founder of <a
href="http://css-tricks.com/">CSS-Tricks</a>, a blog that touches many more subjects than just CSS tricks&#8230; Chris makes some amazing screencasts, that you should definitely consider <a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728">subscribing</a> to. <a
href="http://aremysitesup.com/">Are My Sites Up?</a> is another great project of Chris&#8217;. The concept is very simple &#8211; add your site, and receive a notification whenever your site (or your client&#8217;s) is down. Also, Chris is behind <a
href="http://scriptandstyle.com/">Script &amp; Style</a>, a link sharing service for design-related articles and ressources.</span></strong></p><p><img
class="alignnone size-full wp-image-298" title="Script &amp; Style" src="http://stiern.com/site/wp-content/everything/scriptstyle1.png" alt="Script &amp; Style" width="500" height="100" /></p><ul><li><a
href="http://net.tutsplus.com/articles/interviews/chatting-with-chris-coyier/">Interview with Chris at Nettuts+</a></li><li><a
href="http://designm.ag/interviews/chris-coyier/">Interview with Chris at DesignM.ag</a></li><li><a
href="http://www.snap2objects.com/2008/01/31/chris-coyier-the-guy-who-showed-us-how-beautiful-html-codes-looks-like/">Interview with Chris at Snap2Objects</a></li><li><a
href="http://twitter.com/chriscoyier">Follow Chris at Twitter</a></li></ul><p>Who inspires you the most and why? Please share in the comments.</p><p>Related posts:<ol><li><a
href='http://stiern.com/articles/which-social-networks-are-you-part-of' rel='bookmark' title='Permanent Link: Which Social Networks Are You Part Of?'>Which Social Networks Are You Part Of?</a></li><li><a
href='http://stiern.com/articles/5-ways-to-make-money-with-your-blog' rel='bookmark' title='Permanent Link: 5 Ways to Make Money with Your Blog'>5 Ways to Make Money with Your Blog</a></li><li><a
href='http://stiern.com/articles/should-comment-forms-have-more-fields' rel='bookmark' title='Permanent Link: Should Comment Forms Have More Fields?'>Should Comment Forms Have More Fields?</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/great-designers-to-get-inspired-by/feed</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Finding Inspiration in Music</title><link>http://stiern.com/articles/finding-inspiration-in-music</link> <comments>http://stiern.com/articles/finding-inspiration-in-music#comments</comments> <pubDate>Mon, 26 Jan 2009 11:33:14 +0000</pubDate> <dc:creator>Peter</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[David Gilmour]]></category> <category><![CDATA[Inspiration]]></category> <category><![CDATA[Jason Mraz]]></category> <category><![CDATA[Music]]></category> <category><![CDATA[Sigúr Rós]]></category> <category><![CDATA[Tim Christensen]]></category><guid
isPermaLink="false">http://stiern.com/?p=188</guid> <description><![CDATA[When I make websites, business cards, logos, when I walk, workout, or relax, I listen to music. Music has always had a massive impact on my life; I&#8217;ve listened to music since the day I was born. But different genres suits different purposes. I&#8217;d like to give you insight in which music I listen to, and [...]]]></description> <content:encoded><![CDATA[<p>When I make websites, business cards, logos, when I walk, workout, or relax, I listen to music. Music has always had a massive impact on my life; I&#8217;ve listened to music since the day I was born. But different genres suits different purposes. I&#8217;d like to give you insight in which music I listen to, and find inspiration in. Music has a great way of touching people. Music can make you laugh, cry, shout, etc. It is also a great source of inspiration. Make yourself a cup of coffee, sit down in your couch, and turn up your stereo. Close your eyes, and soon you&#8217;ll find yourself creating images matching the music you listen to.</p><p><span
id="more-188"></span></p><p>Whether you want to use music as a source of inspiration, or if you want to listen to it in a break, music can create wonderful feelings. It can make you review a problem, and maybe find a completely different solution, and lead you in another direction. A break where you listen to some music can make your mind wander far away from what you were doing, allowing to concentrate on nothing but the break. So go listen to some music!</p><p>Here are some of the artists I tend to listen to in breaks, while working, when relaxing… You get the picture!</p><h2>Sigúr Rós</h2><p><a
rel="lightbox" href="http://stiern.com/site/wp-content/everything/agc3a6tisbyrjuncover.jpg"><img
class="alignleft" title="Ágætis byrjun" src="http://stiern.com/site/wp-content/everything/agc3a6tisbyrjuncover-150x150.jpg" alt="Ágætis byrjun" width="120" height="120" /></a>Sigúr Rós is probably my largest inspiration source when it comes to music. It is an Icelandic band, singing in both Icelandic and Hopelandic, a language written by Jónsi Birgisson, the lead singer of the band. Especially the songs written in Hopelandic touch me, because I can put whatever ever meaning I&#8217;d like into the words (however, I don&#8217;t understand Icelandic either).</p><p>Sigúr Rós is definitely not mainstream music, but I beleive that most people will find it relaxing. When listening to them, I find myself concentrating a lot more about the work I need to get done, because the music blends in with everything else. And when you get to know Sigúr Rós, you&#8217;ll not even notice that you&#8217;re listening to music, you&#8217;ll rather notice when you&#8217;re not listening to it.</p><p><strong>Listen to</strong></p><ul><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=27057&amp;id=27067&amp;s=143441">&#8220;Track 4&#8243;</a></em><em> </em>from the album<em> </em><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=27067&amp;s=143441">&#8220;()&#8221;</a></em></li><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=79870533&amp;id=79870523&amp;s=143441">&#8220;Hoppípolla&#8221;</a></em><em> </em>from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=79870523&amp;s=143441">&#8220;Takk&#8230;&#8221;</a></em></li><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=275351950&amp;id=275351947&amp;s=143441">&#8220;Starálfur&#8221;</a></em> from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=275351947&amp;s=143441">&#8220;Ágætis byrjun&#8221;</a></em></li></ul><h2>Jason Mraz</h2><p><a
rel="lightbox" href="http://stiern.com/site/wp-content/everything/waiting_for_my_rocket_to_come.jpg"><img
class="alignleft" title="waiting_for_my_rocket_to_come" src="http://stiern.com/site/wp-content/everything/waiting_for_my_rocket_to_come-150x150.jpg" alt="waiting_for_my_rocket_to_come" width="120" height="120" /></a>I <em>love</em> Jason Mraz. Jason Mraz is simple pop music, but yet incredibly deep. Take a moment to listen to his lyrics, and be amazed. The skills of that man are enviable. So far, he has made three studio albums, all of them of great difference, showing a large variety in genre; from pop to funk, from electronica to country.</p><p>When you get to know the music of Mraz, you&#8217;ll find yourself singing in the shower, and you&#8217;ll have a hard time not moving your lips when riding your bike. Jason Mraz makes you happy and satisfied. No more, no less.</p><p><strong>Listen to</strong></p><ul><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=76020024&amp;id=76020401&amp;s=143441">&#8220;Mr. Curiosity&#8221;</a></em> from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=76020401&amp;s=143441">&#8220;Mr. A-Z&#8221;</a></em></li><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=30645489&amp;id=30645390&amp;s=143441">&#8220;Curbside Prophet&#8221;</a></em><em> </em>from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=30645390&amp;s=143441">&#8220;Waiting for My Rocket to Come&#8221;</a></em></li><li><em>&#8220;</em><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=277635830&amp;id=277635758&amp;s=143441">Butterfly&#8221;</a></em> from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=277635758&amp;s=143441">&#8220;We Sing, We Dance, We Steel Things&#8221;</a></em></li><li>Who am I kidding, just listen to <a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtist?id=156987">all of it</a>!</li></ul><h2>David Gilmour</h2><p><a
rel="lightbox" href="http://stiern.com/site/wp-content/everything/david_gilmour_on_an_island.jpg"><img
class="alignleft" title="david_gilmour_on_an_island" src="http://stiern.com/site/wp-content/everything/david_gilmour_on_an_island-150x150.jpg" alt="david_gilmour_on_an_island" width="120" height="120" /></a>David Gilmour was one of the members of <em>Pink Floyd</em>. He has made a couple of studio albums, but, to be frank, only one of them is worth listening to. It is called <em>On an Island </em>and was released in 2006. And it is amazing! Long, crisp guitar solos, and bulletproof choirs is just some of the ingredients used to make this album a piece of art.</p><p>This album really touches me. Every single note is chosen with dedication, meaning that every song is—yes, perfect! Of course, not all people would think that it&#8217;s perfect, but again, I&#8217;m just giving you an insight in what music I love and listen to.</p><p><strong>Listen to</strong></p><ul><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=159841582&amp;id=159841423&amp;s=143441">&#8220;On an Island&#8221;</a> </em>from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=159841423&amp;s=143441">&#8220;On an Island&#8221;</a></em></li><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=159841674&amp;id=159841423&amp;s=143441">&#8220;Take a Breath&#8221;</a> </em>from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=159841423&amp;s=143441">&#8220;On an Island&#8221;</a></em></li></ul><h2>Tim Christensen</h2><p><a
rel="lightbox" href="http://stiern.com/site/wp-content/everything/honeyburst.jpg"><img
class="alignleft" title="honeyburst" src="http://stiern.com/site/wp-content/everything/honeyburst-150x150.jpg" alt="honeyburst" width="120" height="120" /></a>Tim Christensen is a Danish artists, probably not that familiar outside Denmark, but you owe yourself to listen to his music. He played in a band called Dizzy Mizz Lizzy, which unfortunately is no more. His solo is amazing in its completely own way. Tim Christensen sounds like no one else, and the same song gives you an entirely new experience every time you listen to it. His music is very varied, and his albums are showing a development in both style and personality. Every album has its own qualities, and are showing Tim Christensen&#8217;s skills at their best. If you ever get the opportunity, you should go to see a concert with the great Dane, cause it&#8217;s absolutely worth it.</p><p><strong>Listen to</strong></p><ul><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=253125732&amp;id=253122434&amp;s=143441">&#8220;Caterpillar&#8221;</a></em> from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=253122434&amp;s=143441">&#8220;Secrets on Parade&#8221;</a></em></li><li><em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=204315930&amp;id=204315804&amp;s=143441">&#8220;No Easy Key&#8221;</a></em> from the album <em><a
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=204315804&amp;s=143441">&#8220;Honeyburst&#8221;</a></em></li><li><em>&#8220;Hard to Make You Mine&#8221;</em> from the album <em>&#8220;Superior&#8221; </em>(not on iTunes yet)</li><li><em>&#8220;Wonder of Wonders&#8221; </em>from the album <em>&#8220;Superior&#8221; </em>(not on iTunes yet)</li></ul><p>Now I&#8217;ve told you a little about which music I listen to. Now it&#8217;s your turn! Where do you find inspiration? In nature, in music, other? Please write a comment below!</p><p>Related posts:<ol><li><a
href='http://stiern.com/inspiration/stunning-wedding-invitation-inspiration' rel='bookmark' title='Permanent Link: Stunning Wedding Invitation Inspiration and Resources'>Stunning Wedding Invitation Inspiration and Resources</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://stiern.com/articles/finding-inspiration-in-music/feed</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss> <br
/> <b>Fatal error</b>:  Cannot redeclare class JSMin in <b>/home/www/stiern.com/site/wp-content/plugins/w3-total-cache/lib/Minify/JSMin.php</b> on line <b>53</b><br
/>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced) (user agent is rejected)
Database Caching 87/259 queries in 1.132 seconds using disk

Served from: stiern.com @ 2010-09-07 18:08:12 -->