<?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>DIANA STUTZ DESIGN BLOG</title>
	<atom:link href="http://www.dianastutz.com/blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.dianastutz.com/blog</link>
	<description>web design &#38; development / interactive media / motion graphics: news, commentary, inspiration, and tutorials</description>
	<lastBuildDate>Sun, 08 Aug 2010 16:25:05 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>UNICORN: New W3C Multiple Web Standards Validator</title>
		<link>http://www.dianastutz.com/blog/?p=146</link>
		<comments>http://www.dianastutz.com/blog/?p=146#comments</comments>
		<pubDate>Sun, 08 Aug 2010 16:23:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[NEWS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=146</guid>
		<description><![CDATA[The web’s governing body has launched a new validation tool called Unicorn that checks the quality of your website’s code against multiple web standards at the same time.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/08/unicorn_as1.gif"><img class="alignright size-full wp-image-147" title="unicorn_as1" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/08/unicorn_as1.gif" alt="" width="132" height="150" /></a></p>
<p>The web’s governing body has launched a new validation tool called <strong>Unicorn</strong> that checks the quality of your website’s code against multiple web standards at the same time.</p>
<p>You can find the new Unicorn “all-in-one validator” on the Worldwide Web Consortium (W3C) website at validator.w3.org/unicorn/.</p>
<p>The W3C maintains a number of free web-based tools for checking whether your web code is valid, and Unicorn makes several of these tools available under a single interface. Just plug in a URL and you can see your results for all of these tests on a single page:</p>
<ul>
<li>HTML/XHTML markup validator</li>
<li>CSS validator</li>
<li>Atom or RSS feed validator</li>
<li>mobileOK, which tells you how friendly your site is to mobile visitors</li>
</ul>
<p><span id="more-146"></span></p>
<p>When you visit the Unicorn page, you’ll see a dropdown menu where you can choose what to check. The default is a “General Conformance Check,” which runs all the validators at once and is particularly unforgiving. Your site may validate as strict XHTML, but your syndication feeds and mobile accessibility might be a mess. It’s almost impossible to rack up a perfect score, so be prepared for a lot of red ink.</p>
<p>You can also select one of the individual validation services in the dropdown. Each of the individual validators also continues to run on its own service, and the W3C confirms they aren’t going anywhere.</p>
<p>Unicorn will continue to roll in more validation options over time. There’s already a wiki where you can learn how to write additional modules.</p>
<p>The wiki is also where you’ll find links to the Unicorn code. You can run your own instance of the validator to test your own pages, or you can set up a public Unicorn server for others to use.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=146</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Black Boxes displaying behind Flash After Installing CS5 Suite?</title>
		<link>http://www.dianastutz.com/blog/?p=113</link>
		<comments>http://www.dianastutz.com/blog/?p=113#comments</comments>
		<pubDate>Mon, 26 Jul 2010 12:53:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[TIPS]]></category>
		<category><![CDATA[black background flash]]></category>
		<category><![CDATA[black boxes behind flash]]></category>
		<category><![CDATA[cs5]]></category>
		<category><![CDATA[safari 5]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=113</guid>
		<description><![CDATA[This drove me a bit crazy and wanted to provide the solution in case anyone else experiences the same thing &#8211; black boxes displaying behind flash elements in Safari, after installing Adobe Creative Suite 5.
Problem: After installing the CS5 Production Suite, I noticed that everywhere there was flash in Safari 5.0, some parts of it [...]]]></description>
			<content:encoded><![CDATA[<p><strong>This drove me a bit crazy and wanted to provide the solution in case anyone else experiences the same thing &#8211; black boxes displaying behind flash elements in Safari, after installing Adobe Creative Suite 5.</strong></p>
<p><strong><em>Problem:</em></strong> After installing the CS5 Production Suite, I noticed that everywhere there was flash in Safari 5.0, some parts of it would have solid black displaying behind various elements.</p>
<p><strong><em>Solution:</em></strong> After research and trial and error, determined that this wasn&#8217;t a Safari problem, but a bug in the version of Adobe&#8217;s Flash Player that installs from the CS5 Suite. The problem is solved easily by downloading the latest update that fixes this and other bugs with version 10.1. <a title="Download Flash 10.1 Update" href="http://download.macromedia.com/pub/flashplayer/updaters/10/flash_player_update_201006_flash10.zip" target="_blank">Here&#8217;s the link to the latest update download</a> , simply install the update and the black displaying behind flash elements will be corrected.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=113</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Controversial Design Acquisition @ MoMA</title>
		<link>http://www.dianastutz.com/blog/?p=104</link>
		<comments>http://www.dianastutz.com/blog/?p=104#comments</comments>
		<pubDate>Tue, 20 Jul 2010 13:25:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[NEWS]]></category>
		<category><![CDATA[@]]></category>
		<category><![CDATA[controversial art]]></category>
		<category><![CDATA[moma]]></category>
		<category><![CDATA[symbol art]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=104</guid>
		<description><![CDATA[ "The discussion has moved on beyond the object. The reality of design exists within a system of use. It acknowledges we are in a postindustrial communications age, and the @ sign is the pivot of that, at the center of e-mail, which is at the center of communication."]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/atsymbol.jpg"><img class="alignright size-full wp-image-105" title="atsymbol" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/atsymbol.jpg" alt="" width="240" height="240" /></a></p>
<p><strong>Love it, whether this symbol should or shouldn&#8217;t have been acquired is not the most important part of this conversation for me. I just love the conversation itself and the beauty of rediscovering the art, importance and level of communication that occurs with everyday symbols that are taken for granted in their daily use. Thank you to Paola Antonelli, keep up the great work!</strong></p>
<p>MoMA acquires a typographic symbol—but what does it mean?</p>
<p>The morning of Monday, March 22, Paola Antonelli published a post on the Museum of Modern Art&#8217;s blog about a new acquisition to the museum&#8217;s design department. Antonelli, senior curator of architecture and design at the museum, then alerted one reporter and 43 other bloggers to the news and headed to the airport to catch a plane to San Francisco.</p>
<p>&#8220;By the time I landed, it was like a volcano eruption,&#8221; says Antonelli. Commentators were in a lather on account of the unusual nature of the acquisition: the @ symbol, the tiny &#8220;pig&#8217;s tail&#8221; that resides above the number two on the QWERTY keyboard. The acquisition cost nothing, was freely available to everyone, and didn&#8217;t add anything material to the museum&#8217;s collection. Inserting @ into MoMA&#8217;s collection, Antonelli wrote, &#8220;relies on the assumption that physical possession of an object as a requirement for an acquisition is no longer necessary, and therefore it sets curators free to tag the world.&#8221;</p>
<p><span id="more-104"></span></p>
<p>Online comments at MoMA&#8217;s site were fast and curious, ranging from &#8220;neat&#8221; and &#8220;cool&#8221; to &#8220;intellectual garbage,&#8221; &#8220;I&#8217;m mystified,&#8221; &#8220;pretentious nonsense,&#8221; and suspicions that the announcement was an early April Fools&#8217; joke. Some of those in the &#8220;neat&#8221; and &#8220;cool&#8221; camp even proposed acquiring &#8220;e&#8221; and &#8220;ñ,&#8221; while the art blog Hyperallergic reported that the Chinese government had taken possession of the rest of the keyboard.</p>
<p>The acquisition was genuine, though. Antonelli took the @ symbol through the standard acquisitions process within the museum. She researched the symbol&#8217;s history as shorthand both for the Latin <em>ad</em>written by monks in the seventh century and for &#8220;amphora,&#8221; a unit of measurement used in 16th-century Venice. The symbol languished as an obscure accounting mark until 1971, when an electrical engineer named Ray Tomlinson used it to send information between computers to a particular person or location, establishing the standard form for e-mail addresses. The curator presented her findings to the acquisitions committee in March. &#8220;There was so much that made it a pregnant testimony of what design should be today,&#8221; says Antonelli, who says it is emblematic of &#8220;the public domain, reusing and recycling, tradition updated for modernity.&#8221; The @ sign is now displayed in the collection as a silk screen on the wall.</p>
<p>The ongoing jokes about the museum&#8217;s acquisition arise from the logical impossibility of owning something that is not only free and abundant, but also physically nonexistent. Yet thanks to the rise, since the &#8217;70s, of performance and digital art, museum art departments have already had to work through the problem of owning something immaterial. In her March 22 blog post, Antonelli compares the museum&#8217;s acquisition of the @ symbol to that of Tino Sehgal&#8217;s performance piece <em>The Kiss</em>. But <em>The Kiss</em> did cost something (reportedly in the high five-figure range) and its &#8220;use,&#8221; or performance, is regulated by contract, so it is neither free nor abundant.</p>
<p>A more apt comparison might be to Internet art—works online are immaterial, freely accessible, and challenging for museums to present—or, even better, to the mass-produced objects in MoMA&#8217;s design collection. The desire to showcase the flexible, inadvertent beauty of functional, everyday objects stretches back to MoMA&#8217;s 1934 &#8220;Machine Art&#8221; show, organized by Philip Johnson, which highlighted the elegance of a self-aligning ball bearing, a toaster, and petri dishes. In her 2004 exhibition &#8220;Humble Masterpieces,&#8221; Antonelli featured the Post-it note and paper clip.</p>
<p>The @ sign represents more than simply an interesting typographic mark. &#8220;It&#8217;s indicative of a direction in which MoMA is heading and responding actually to a larger shift in design discourse,&#8221; says Alice Twemlow, chair of the M.F.A. design criticism department at the School of Visual Arts. &#8220;The discussion has moved on beyond the object. The reality of design exists within a system of use. It acknowledges we are in a postindustrial communications age, and the @ sign is the pivot of that, at the center of e-mail, which is at the center of communication.&#8221;</p>
<p>But some graphic designers are conflicted over whether the mostly symbolic gesture of acquiring @ was necessary, and even whether @ represents excellent design. What about the elegant period or ampersand, for instance? According to Michael Bierut, a noted graphic designer and partner at Pentagram in New York, the acquisition is &#8220;more important for MoMA&#8221; than it is for the @ symbol or the public at large. &#8220;I think it&#8217;s meant to be sort of a provocation to get a conversation going about the new role communication plays in the world of museums,&#8221; he says.</p>
<p>Acquiring @ is just one part of Antonelli&#8217;s push to address communication design in the museum. She is currently working on &#8220;Talk to Me,&#8221; a broad exhibition looking at communication between people and objects, which is scheduled to open on July 24, 2011. The curatorial process for that show is being aired openly on a MoMA blog, Talk to Me: On the Way to the Exhibition, on which curators post ideas for things and concepts to include in the show, such as virtual pets, a blog featuring designer Christoph Niemann&#8217;s collection of fanciful maps, and odd interactive Web sites like the map of every bodega in New York City. Perhaps the @ acquisition is a step in the process of figuring out how to sort through the new artifacts of the digital age. &#8220;It&#8217;s like a curatorial manifesto more than anything,&#8221; says Antonelli. &#8220;Curators around the world, let&#8217;s feel free and liberated!&#8221;</p>
<p><em>Carly Berwick is a contributing editor of</em> ARTnews.</p>
<p><strong><em>Source: http://www.artnews.com/issues/article.asp?art_id=3017</em></strong></p>
<p><strong><em><br />
</em></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=104</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Inspired Recycling &amp; Design</title>
		<link>http://www.dianastutz.com/blog/?p=96</link>
		<comments>http://www.dianastutz.com/blog/?p=96#comments</comments>
		<pubDate>Mon, 19 Jul 2010 16:54:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[INSPIRATION]]></category>
		<category><![CDATA[NEWS]]></category>
		<category><![CDATA[architecture]]></category>
		<category><![CDATA[eco design]]></category>
		<category><![CDATA[jet house]]></category>
		<category><![CDATA[recycling]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=96</guid>
		<description><![CDATA[
Well, I&#8217;m inspired by this ingenious use of recylcing and design!
A Malibu, Calif. resident with a lust for aviation and creative upcycling enlists an architect to transform a retired Boeing 747 jumbo jet into a hilltop dream home.
When the concept behind Wing House, a luxury home in Malibu built from the remnants of a retired Boeing [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/jethouse.jpg"><img class="alignright size-medium wp-image-97" style="margin: 20px; border: 1px solid #ccc; padding: 5px;" title="jethouse" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/jethouse-300x300.jpg" alt="" width="240" height="240" /></a><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/WingHouse3.jpg"><img class="alignright size-medium wp-image-98" style="margin: 20px; border: 1px solid #ccc; padding: 5px;" title="WingHouse3" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/WingHouse3-300x200.jpg" alt="" width="240" height="160" /></a></p>
<p><strong>Well, I&#8217;m inspired by this ingenious use of recylcing and design!</strong></p>
<p>A Malibu, Calif. resident with a lust for aviation and creative upcycling enlists an architect to transform a retired Boeing 747 jumbo jet into a hilltop dream home.</p>
<p>When the concept behind <a href="http://www.studioea.com/projects/residential/wing_house/index.php#0" target="_blank">Wing House</a>, a luxury home in Malibu built from the remnants of a retired Boeing 747 jumbo jet, surfaced a few years back most folks who got wind of the audacious project had a standard “yeah, right, I’d like to see that happen” type of reaction. Well, what do you know … Wing House <em>is</em> happening with construction underway and set to be completed by the end of this year.</p>
<p>Francie Rehwald, the eco-minded co-owner of a Mercedes Benz dealership, enlisted architect <a href="http://www.studioea.com/" target="_blank">David Hertz</a> to build her a dream home in the hills of Malibu with a “curvilinear/feminine” shape.” Turns out, the best way to achieve that ladylike shape was with a roof made from an airplane wing. But Hertz didn’t stop there … he incorporated almost<em> all</em> of the 4.5 million parts from an old 747 into the main residence and auxiliary structures. The diverted-from-landfill airplane scraps cost in the ballpark $35,000. The total cost to build the home will be much more although I&#8217;m guessing nowhere near as much as the cost for a <em>new</em> 747: $200 million.</p>
<p><span id="more-96"></span></p>
<p>Here’s exactly <a href="http://www.studioea.com/projects/residential/wing_house/index.php#0" target="_blank">how</a> some of those 4.5 million 747 bits n’ pieces are being used:</p>
<p>The Main Residence will use both of the main wings as well as the 2 stabilizers from the tail section as a roof for the Master Bedroom. The Art Studio Building will use a 50-foot long section of the upper fuselage as a roof, while the remaining front portion of the fuselage and upper first class cabin deck will be used as the roof of the Guest House. The lower half of the fuselage, which forms the cargo hold, will form the roof of the Animal Barn. A Meditation Pavilion will be made from the entire front of the airplane at 28 feet in diameter and 45 feet tall; the cockpit windows will form a skylight. Several other components are contemplated for use in a sublime manner, which include a fire pit and water element constructed out of the engine cowling.</p>
<p>In addition to the fact that Wing House is built from 100 percent post-consumer waste, the home will also boast green specs like <a href="http://www.mnn.com/eco-glossary/solar-power">solar power</a>, radiant heating, natural ventilation, and high performance heat mirror gazing.</p>
<p>As you can probably imagine, achieving take-off for Wing House wasn&#8217;t exactly easy. While appeasing a HOA wasn&#8217;t an issue (and Rehwald&#8217;s neighbors don&#8217;t seem to mind), the project had to be cleared by 17 different government agencies and approved by the FAA so pilots don&#8217;t mistake the home for a downed aircraft.</p>
<p><em><strong>Source: http://www.mnn.com/your-home/green-building-remodeling/blogs/plane-sweet-plane</strong></em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=96</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>So Many GIF&#8217;s, So Little Time</title>
		<link>http://www.dianastutz.com/blog/?p=89</link>
		<comments>http://www.dianastutz.com/blog/?p=89#comments</comments>
		<pubDate>Thu, 15 Jul 2010 23:07:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[INSPIRATION]]></category>
		<category><![CDATA[animated gif]]></category>
		<category><![CDATA[gifs]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=89</guid>
		<description><![CDATA[The most impressive animated gifs, ever! I am so inspired to do more with less.]]></description>
			<content:encoded><![CDATA[<p>The most impressive animated gifs, ever! I am so inspired to do more with less. I might have to think twice before complaining about not having enough resources to get the job done and done creatively.</p>
<div id="attachment_90" class="wp-caption alignleft" style="width: 440px"><a href="http://www.iamnotanartist.org/index.php" target="_blank"><img class="size-full wp-image-90  " title="manygifs" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/manygifs.jpg" alt="iamnotanartist.org" width="430" height="323" /></a><p class="wp-caption-text">I AM NOT AN ARTIST - AN ANIMATED GIF PARANOIA ABOUT NONSTOP DESIGN WORKERS</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=89</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Good Stuff: Five Myths of HTML5 (vs. Adobe Flash)</title>
		<link>http://www.dianastutz.com/blog/?p=81</link>
		<comments>http://www.dianastutz.com/blog/?p=81#comments</comments>
		<pubDate>Sun, 11 Jul 2010 13:55:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[NEWS]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flash debate]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=81</guid>
		<description><![CDATA[source: RadleyMarx.com
First off, the inevitable disclaimer: I’m a Flash guy, not really an HTML5 guy. But I’m also an Apple guy  - I’ve owned 8 Macs, 2 iPhones, and 0 PCs over the last 20 years. I’m naturally receptive to Steve’s ideas, so maybe this HTML5 stuff does make sense. Or does it?
I don’t mean to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/5.jpg"><img class="alignright size-full wp-image-87" title="5" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/5.jpg" alt="" width="123" height="138" /></a>source: <a href="http://radleymarx.com/2010/02/five-myths-of-html5-vs-adobe-flash/">RadleyMarx.com</a></p>
<p>First off, the inevitable disclaimer: I’m a Flash guy, not really an HTML5 guy. But I’m also an Apple guy  - I’ve owned 8 Macs, 2 iPhones, and 0 PCs over the last 20 years. I’m naturally receptive to Steve’s ideas, so maybe this HTML5 stuff does make sense. Or does it?</p>
<p>I don’t mean to come late to or prolong the argument. Rather, I actually wanted to dig a little deeper into the HTML5 vs. Flash debate and offer a fair rebuttal to the most fanatical of claims.</p>
<p>Let’s get to it…</p>
<h3><strong>Myth 1: the video tag will replace Flash video</strong></h3>
<p>I’m getting this out of the way first because it’s been done to death. Yes, it’s possible to play video without Flash by using HTML5 video. But it has caveats depending on the browser and the codec. This myth also wants us to overlook that we’ve been able to play video in HTML4 for over a decade using Quicktime, Windows Media, DIVX, RealPlayer, and dozens of other formats.</p>
<p><span id="more-81"></span></p>
<p>The problem solved by Flash video wasn’t <em>can I show a video? </em>Instead, Flash solved <em>can everyone watch my video?</em> HTML5 video doesn’t provide this solution; it just adds another approach to the incompatibility pile.</p>
<p>It’s also important to point out that Apple’s support for HTML5 video in iPOS* has less to do with open standards and more to do with boosting QuickTime-based view count. Don’t believe me? Visit<a href="http://www.youtube.com/html5">www.youtube.com/html5</a> on your iPhone. You won’t see the HTML5 video example. Instead you’ll be forwarded to YouTube mobile which offers videos playable only in the iPOS QuickTime player.</p>
<p><em>* iPOS – aka the iPhone, iPod, iPad OS</em></p>
<h3>Myth 2: HTML5 is here, Flash is dead</h3>
<p>Another hot topic with little merit. If Flash had stopped advancing eight years ago it might have been possible see “HTML5 kill Flash” someday. But Flash is far more ubiquitous and powerful than that.</p>
<p>In the immediate future, Flash player will be up and running on almost every device and browser. Historically it takes about a year for the latest Flash Player to hit 80% penetration, and another 6 months to get to 90%.</p>
<p>In contrast, HTML5 must continue to wait for users to adopt newer browsers as well as for these browsers to negotiate standards. The leading HTML5 browsers, Safari and Chrome, make up less than 20% of the desktop market. And Mobile Safari is only at ~30% share despite being available for 2+ years and the current mobile market leader.</p>
<p>Moving on, the Flash Platform today provides a far more complex level of interactivity that the HTML5 digerati can imagine, including skinnable components, embeddable swfs, movieclips, native apps w/ native processes, video and microphone input, peer-to-peer communication and file transfer, the Text Layout Framework, shared whiteboarding, and multiplayer games …and that’s just the off-the-top-of-my-head stuff.</p>
<p>Fact is, no other technology provides all of this in a single universal platform.</p>
<h3>Myth 3: Canvas is great for artists</h3>
<p>To me, canvas appears to be is the most severe limitation to HTML5. To start off, there’s the little things. Canvas <a href="https://developer.mozilla.org/en/Canvas_tutorial">doesn’t support fonts</a> except those supported by each particular browser. Canvas<a href="http://dev.w3.org/html5/spec/Overview.html">only supports limited interactivity</a>, so games are a no-no.* Canvas has <a href="http://www.paciellogroup.com/blog/?p=362">no plans for accessibility</a>. And canvas can’t do <a href="http://blog.papervision3d.org/2009/08/05/the-economist-thinking-space/">this</a>.</p>
<p>The there’s the big thing: <a href="http://www.google.com/search?hl=en&amp;q=html5+canvas+application&amp;aq=f&amp;aqi=g1&amp;oq=">canvas has zero support for designers</a>. No apps, no drawing tools, no animation controls, no tutorials. Nothing! What does exist are various examples of <a href="http://carsonified.com/blog/dev/html-5-dev/how-to-draw-with-html-5-canvas/">how to write code to create primitive graphics</a> or <a href="http://www.mezzoblue.com/archives/2010/01/14/illustrator_/">how to convert graphics from Illustrator to canvas</a>.</p>
<p>Designers and artists don’t write code, they draw lines and add color. They expect a GUI to create visual content, not BBEdit. Easy-to-use visual tools will have be created for design and layout before we ever see serious adoption.</p>
<p>[ * Update: I misread this section in the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specifications</a> which actually advises against <em>graphically</em>intense canvas content, particularly that which could be done in mark-up.]</p>
<h3><strong>Myth 4: HTML5 will solve all the problems associated with Flash</strong></h3>
<p>This is a catch-all for some of the most common complaints associated with Flash, yet will persist in HTML5.</p>
<p>1) CPU hogging – yes, Flash pushes CPUs. But so does HTML5, even with <a href="http://9elements.com/io/projects/html5/canvas/">really simple apps</a>.</p>
<p>2) Banner ads – HTML5 won’t kill Flash banner ads – they’ll just be done in HTML5, but now you can’t ignore them with a Flash-blocker <em>(note to HTML5 developers – you can have the banner market. Please. Take it.)</em></p>
<p>3) Splash pages – we <a href="http://www.seomoz.org/blog/how-to-convince-a-client-they-dont-need-a-splash-page">finally defeated Flash-based splash intros</a>, only to see them <a href="http://www.apple.com/safari/welcome/">reintroduced for HTML5</a></p>
<p>4) Crashes – this one is harder to clearly refute except to say that Flash Player 10.1 is far less resource intensive than the current version because it’s meant to work on mobile devices, which is no small effort. In contrast, HTML5 is brand new and therefore untested. As people start to experiment with complex canvases, we’re going to see CPUs pushed just as much as Flash, if not more.</p>
<h3><strong>Myth 5: Adobe is afraid of HTML5</strong></h3>
<p>The fact: nobody is doing more to support HTML5 than Adobe (not even Apple). First off, Adobe provides the tools for 99% of the creative community, so inevitably Adobe will be the primary source for design tools to actually make SVGs and canvas content. Ironically, Adobe <a href="http://www.appleinsider.com/articles/08/05/05/flash_wars_adobe_in_the_history_and_future_of_flash_part_1_of_3.html">pushed for SVG integration but was ultimately won over by the flexibility of Flash</a>.</p>
<p>Further, Adobe is already working on supporting the code-based approaches to graphics in their Creative Suite. <strong><a href="http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification">FXG</a></strong>, a XML-based graphic format guide, was started with CS4 to better enable the transfer of graphic content between apps. With some tweaking, it will be very easy for Illustrator, Fireworks, and Photoshop to export canvas-happy content. If Flash picks up the torch, we may even have sophisticated animation as well.</p>
<p>Bottom line (and greatest irony): the only company we can actually count on to make HTML5 successful will be Adobe.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=81</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5: Graphic Applications &amp; Sketching Tools</title>
		<link>http://www.dianastutz.com/blog/?p=78</link>
		<comments>http://www.dianastutz.com/blog/?p=78#comments</comments>
		<pubDate>Sun, 11 Jul 2010 13:45:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[canvas tag]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[semantic]]></category>
		<category><![CDATA[web concept]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=78</guid>
		<description><![CDATA[Recent big news from the Google I/O conference showed us that the main market players admit HTML5 as a main perspective for the further development. Actually we hope that it will disctact us from all these media wars and that the social media world will expand a more useful information about new and interesting achievements of HTML5.]]></description>
			<content:encoded><![CDATA[<p>There is no doubt that the most intriguing new HTML5 tag is the <strong>canvas</strong> tag. Despite all controversial web discussions concerning this element it is obvious that canvas symbolizes the “semantic” web concept. Its aim is to simplify the process of rendering the 2D shapes and bitmap images. You may have seen a few “canvas” demos that already became viral on the web. As the result many developers and web designers have noticed that using the canvas tag is really effective and it saves much time.</p>
<p>Recent big <a href="http://blog.templatemonster.com/category/news/">news</a> from the Google I/O conference showed us that the main market players admit HTML5 as a main perspective for the further development. Actually we hope that it will disctact us from all these media wars and that the <a href="http://blog.templatemonster.com/category/social-media/">social media</a> world will expand a more useful information about new and interesting achievements of <a href="http://blog.templatemonster.com/category/html5/">HTML5</a>.</p>
<p><span id="more-78"></span></p>
<p>Today we have compiled some interesting <a href="http://blog.templatemonster.com/tag/applications/">applications</a> and sketching tools that are build with the help of Java scripts and the “canvas” tag. These examples are only experiments but they’re definitely worth checking out. (Don’t forget that it would be better to browse all these application via Chrome or the latest versions of Opera and Firefox).</p>
<h3>1. <a href="http://www.benjoffe.com/code/toys/spirograph/" target="_blank">Spirograph</a></h3>
<p><a href="http://www.benjoffe.com/code/toys/spirograph/" target="_blank"><img title="spirograph" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/spirograph-300x271.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="271" /></a></p>
<p>Spirograph is a geometric drawing toy that produces mathematical curves of the variety technically known as the hypotrochoids and epitrochoids (via <a href="http://en.wikipedia.org/wiki/Spirograph" target="_blank">WikiPedia</a>). This example allows you to play with all kinds of parameters including size of mobile circle, static circle and so on.</p>
<p>* * *</p>
<h3>2. <a href="http://bomomo.com/" target="_blank">Bomomo</a></h3>
<p><a href="http://bomomo.com/" target="_blank"><img title="bomomo" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/bomomo-300x237.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="237" /></a></p>
<p>Inspiring tool that will make you feel like a real artist even if you are not. Great painting application with original patterns and interesting options.</p>
<p>* * *</p>
<h3>3. <a href="http://www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas/" target="_blank">Tilt-Shift Photo Effect</a></h3>
<p><a href="http://www.p01.org/releases/Tilt-shift_photo_effect_in_Canvas/" target="_blank"><img title="tiltshift" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/tiltshift-300x157.jpg" alt="Canvas-Tilt-Shift Photo Effect" width="300" height="157" /></a></p>
<p>Have you ever wondered how all those tilt-shift photos are made? This app will help you to know the magic of “toy” photography.</p>
<p>* * *</p>
<h3>4. <a href="http://labs.pimsworld.org/wp-content/uploads/2009/04/demo-content-aware-image-resizing-2/" target="_blank">Content Aware Image Resizing</a></h3>
<p><a href="http://labs.pimsworld.org/wp-content/uploads/2009/04/demo-content-aware-image-resizing-2/" target="_blank"><img title="resizing" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/resizing.jpg" alt="canvas image resizing" width="300" height="236" /></a></p>
<p>This is a really useful image tool that will help to keep the genuine size of images while resizing them. In other words the application calculates which parts of the image should and should not be resized.</p>
<p>* * *</p>
<h3>5. <a href="http://mugtug.com/sketchpad/" target="_blank">Sketchpad</a></h3>
<p><a href="http://mugtug.com/sketchpad/" target="_blank"><img title="sketchpad" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/sketchpad-300x232.jpg" alt="canvas-sketchpad" width="300" height="232" /></a></p>
<p>Sketchpad is a helpful online service for those who like simple and effective sketching tools. Contains set of most popular options (brush, pencil, fill and text items; tools for spirographs, unusual shapes and stamps).</p>
<p>* * *</p>
<h3>6. <a href="http://www.gartic.com/sketch/" target="_blank">Gartic</a></h3>
<p><a href="http://www.gartic.com/sketch/" target="_blank"><img title="gartic" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/gartic-300x168.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="168" /></a></p>
<p>This is a drawing <a href="http://blog.templatemonster.com/tag/html5/">HTML5</a> program that has a pencil, eraser, line and shape tools, flood fill, colour picker and undo. Gartic also allows you to watch an animation and save it out as PNG, GIF or JPG.</p>
<p>* * *</p>
<h3>7. <a href="http://www.hanovsolutions.com/webdraw/" target="_blank">WebDraw</a></h3>
<p><a href="http://www.hanovsolutions.com/webdraw/" target="_blank"><img title="webdraw" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/webdraw-300x290.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="290" /></a></p>
<p>Please meet a line drawing vector graphics application. It creates impressive “hand-drawn” effect and has a plenty of effective features that will enhance your sketch without a doubt.</p>
<p>* * *</p>
<h3>8. <a href="http://jabtunes.com/notation/panning_navigator.html" target="_blank">Panning Navigator</a></h3>
<p><a href="http://jabtunes.com/notation/panning_navigator.html" target="_blank"><img title="panning" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/panning-300x245.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="245" /></a></p>
<p>Well everything is simple here – thanks to the canvas tag and JQuery you can easily pan large image or photo.</p>
<p>* * *</p>
<h3>9. <a href="http://www.iconza.com/" target="_blank">Iconza</a></h3>
<p><a href="http://www.iconza.com/" target="_blank"><img title="iconza" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/iconza-300x207.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="207" /></a></p>
<p>This is a great icon builder powered by MooTools and canvas tag. You can choose color and size of your icon and use them absolutely for free.</p>
<p>* * *</p>
<h3>10. <a href="http://physicsketch.appspot.com/" target="_blank">PhysicSketch</a></h3>
<p><a href="http://physicsketch.appspot.com/" target="_blank"><img title="physketch" src="http://blog.templatemonster.com/wp-content/uploads/2010/05/physketch-300x168.jpg" alt="HTML5 based Graphic Apps and Sketching Tools" width="300" height="168" /></a></p>
<p>PhysicSketch allows to draw items on the <a href="http://blog.templatemonster.com/tag/canvas/">canvas</a> and then hit a button to watch gravity take control.</p>
<p id="credit"><a href="http://blog.templatemonster.com/2010/01/20/awesome-jquery-solutions-for-online-portfolios/">Read more</a> about <a href="http://blog.templatemonster.com/2010/05/26/html5-apps-graphics-sketching-tools/">HTML5-based Graphic Apps and Sketching Tools | Template Monster Blog</a> by <a href="http://blog.templatemonster.com/">blog.templatemonster.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=78</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Maybe next year &#8230; iSurface from Apple?</title>
		<link>http://www.dianastutz.com/blog/?p=72</link>
		<comments>http://www.dianastutz.com/blog/?p=72#comments</comments>
		<pubDate>Fri, 09 Jul 2010 15:32:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[INSPIRATION]]></category>
		<category><![CDATA[TECHNOLOGY]]></category>
		<category><![CDATA[interactive]]></category>
		<category><![CDATA[touch projector]]></category>
		<category><![CDATA[touch screen]]></category>
		<category><![CDATA[touch surface]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=72</guid>
		<description><![CDATA[
Portable Large Interactive Display Concept from Hiep Truong on Vimeo.
The Portable Interactive Display doesn’t have a catchy name but the student concept does provide a solution to architects and others involved in building design. The concept provides a way for professionals to take all their (digital) building plans and discuss them anywhere.

The suitcase form factor which contains [...]]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="320" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=5452585&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="320" src="http://vimeo.com/moogaloop.swf?clip_id=5452585&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/5452585">Portable Large Interactive Display Concept</a> from <a href="http://vimeo.com/thedesignhype">Hiep Truong</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>The Portable Interactive Display doesn’t have a catchy name but the student concept does provide a solution to architects and others involved in building design. The concept provides a way for professionals to take all their (digital) building plans and discuss them anywhere.</p>
<p><span id="more-72"></span></p>
<p>The suitcase form factor which contains all the components to create an interactive touch surface on any sufficiently large and bright table. A ultra short throw projector provides a 60″ projection on virtually any bright surface, combined with a vision based tracking system this allows touch inputs to be detected on the same surface.</p>
<p>The software provided on the interactive display is programmed to take images and CAD drawings (and also 3D objects eventually) and displays this on the surface. The content can be freely manipulated with natural gestures and allows annotation (drawing, notes) as well.</p>
<p>Sounds almost like a very specific application of <a href="http://www.microsoft.com/surface/"><strong>Microsoft’s Surface</strong></a> table but in a portable package.</p>
<p>Designer: Hiep Truong</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=72</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Kawasaki: The Zen of PowerPoint, Facebook and Twitter</title>
		<link>http://www.dianastutz.com/blog/?p=60</link>
		<comments>http://www.dianastutz.com/blog/?p=60#comments</comments>
		<pubDate>Fri, 09 Jul 2010 14:35:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[INSPIRATION]]></category>
		<category><![CDATA[design principles]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[social media]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[zen design]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=60</guid>
		<description><![CDATA[Presentation Zen Design: Simple Design Principles and Techniques to Enhance Your Presentations]]></description>
			<content:encoded><![CDATA[<p><em><strong><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/presentation-zen-book.jpg"><img class="alignright size-medium wp-image-66" style="margin-left: 20px; margin-right: 20px; margin-top: 10px; margin-bottom: 10px; border: 1px solid black;" title="presentation-zen-book" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/presentation-zen-book-245x300.jpg" alt="" width="176" height="216" /></a>source:</strong></em> OpenForum | Article by Guy Kawasaki | July 7, 2010 | <a href="http://bit.ly/dx94cB">bit.ly/dx94cB</a></p>
<p>I found a treasure chest in the back of a great book called <em>Presentation Zen Design: Simple Design Principles and Techniques to Enhance Your Presentations</em> by Garr Reynolds. It is a list of ten Japanese aesthetic principles.</p>
<p>I love this kind of stuff: not only can these principles improve your PowerPoint pitches, products, website, and outlook on life, but they make people think you&#8217;re smart when you mention them. Here they are:</p>
<p><strong>1.  Kanso:</strong> eliminating clutter and expressing things in plain and simple ways. Application: change your mediocre PowerPoint pitch by reducing the amount of text and only covering the key points.</p>
<p><span id="more-60"></span></p>
<p><strong>2.  Fukinsei:</strong> using asymmetry or irregularity to depict balance. Application: Add asymmetry to your logo to make it more memorable.</p>
<p><strong>3.  Shibui: </strong>understating and not elaborating upon things. Application: designing products that don&#8217;t have superfluous features.</p>
<p><strong>4.  Shizen: </strong>depicting naturalness with the absence of pretense and artificiality. Application: simplifying the user interface of your products.</p>
<p><strong>5.  Yugen: </strong>using subtle and symbolic suggestion rather than revelation. Application: creating advertising that isn&#8217;t “in your face”; rather, it moves your soul.</p>
<p><strong>6.  Datsozoku:</strong> freeing yourself from habit or formula. Application: updating your customer-service policies.</p>
<p><strong>7.  Seijaku: </strong>achieving a state of tranquility and energized calm. Application: changing how your deal with employees.</p>
<p><strong>8.  Wa:</strong> embodying harmony and balance. Application: melding the needs of your customers, employees, and shareholders in your management decisions.</p>
<p><strong>9.  Ma: </strong>providing a spatial void or silence to provide a focal point. Application: redecorating and reorganizing your work space for greater productivity and creativity.</p>
<p><strong>10. Yohaku-no-bi:</strong> appreciating the beauty of what is implied, unstated, and unexpressed. Application: developing a more trusting approach to managing people.</p>
<p>Maybe I&#8217;m nuts, but Garr&#8217;s collection can also apply to one&#8217;s presence and use of social networking and social media:</p>
<p><strong>1.  Kanso: </strong>cutting the crap and silliness of your tweets and updates.</p>
<p><strong>2.  Fukinsei: </strong>using an avatar that isn&#8217;t a symmetrical, full-face photograph.</p>
<p><strong>3.  Shibui:</strong> using only 140 characters to express deep thoughts.</p>
<p><strong>4.  Shizen:</strong> responding to anyone who contacts you, not just “important people.”</p>
<p><strong>5.  Yugen: </strong>using subtle tweets and updates to communicate information.</p>
<p><strong>6.  Datsozoku: </strong>changing your tweets and updates so that they&#8217;re not always the same kind.</p>
<p><strong>7.  Seijaku:</strong> avoiding arguments and flame wars.</p>
<p><strong>8.  Wa:</strong> considering the impact of your tweets and updates on all the people who read them.</p>
<p><strong>9.  Ma:</strong> creating a clean and simple avatar, profile and Facebook profile.</p>
<p><strong>10. Yohaku-no-bi:</strong> achieving a greater understanding of what people are trying to say in their tweets and updates.</p>
<p>These principles are the tip of the proverbial iceberg in Garr&#8217;s book. He also explains effective uses of typography, color, images, video, and white space.</p>
<p>If you want to create an enchanting PowerPoint or keynote presentations and improve the zen of your social-media presence, <em>Presentation Zen Design</em> is required reading.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=60</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Design Inspiration: Just the Images</title>
		<link>http://www.dianastutz.com/blog/?p=54</link>
		<comments>http://www.dianastutz.com/blog/?p=54#comments</comments>
		<pubDate>Fri, 09 Jul 2010 14:08:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[INSPIRATION]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[image collection]]></category>

		<guid isPermaLink="false">http://www.dianastutz.com/blog/?p=54</guid>
		<description><![CDATA[no nonsense design inspiration by just displaying design and illustration images submitted by registered members]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/evilbunny.jpg"><img class="alignright size-full wp-image-55" title="evilbunny" src="http://www.dianastutz.com/blog/wp-content/uploads/2010/07/evilbunny.jpg" alt="" width="200" height="200" /></a></p>
<p>Liking this site &#8211;&gt; <a href="http://www.drwr.it" target="_blank">www.drwr.it</a>, it provides no nonsense design inspiration by just displaying design and illustration images submitted by registered members. Good concept and fantastic and diverse imagery, definately inspiring!</p>
<p>For a better description, here is their site&#8217;s about paragraph &#8230;</p>
<h2>what the blazes?</h2>
<p>let&#8217;s face it, there is just too much great work sprinkled around the web to keep track of it all. if we aren&#8217;t spending 8 hours of our day looking for great work to inspire us then we are spending another 8 hours trying to keep it all organized. drwr.it is a community where everyone finds and bookmarks the graphic design and illustrations that they like and share it with the community.</p>
<p>if you are looking for a community around graphic design and illustration then check out <a href="http://drwr.it/">drwr.it</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dianastutz.com/blog/?feed=rss2&amp;p=54</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
