Chuck McQuilkin

my writings, design experiements & code

HTML5 Minimalist WordPress Theme

Posted by on Mar 21, 2011 in Code, Web Design | 3 Comments

I really like this blog’s (my old) theme. It was developed by Jeff Star about five years ago. So when I read this article on Smashing Magazine about how to upgrade a WordPress theme to HTML5 I thought I’d update Minimalist. I changed the form styling, and some of the typography, but it’s mostly unchanged and it should validate as HTML5. I just think there’s something ironic about a minimalist bleeding-edge theme.

Jeff released Minimalist for free under the open source GPL so I figured I would release my updated version too. Jeff’s installation instructions are still included along with a complete set of files and images.

Download HTML5Minimalist [ v-1.3 | .zip ]

SVG Graphics

Posted by on Mar 15, 2011 in Code, Web Design | No Comments

One of the most interesting parts of HTML5 from a graphics standpoint is improved support for Scalable Vector Graphics. SVGs can automatically scale to any size because they are a vector format. Compare the SVG graphic of my logo below to the logo in the upper right hand corner of this site:
<p>If you’re reading this you’re probably using Internet Explorer. Time to upgrade?</p>
You can see it’s much sharper than the JPG and if you zoom in, it stays sharp. Safari, Firefox and Chrome support SVGs added inline to HTML5 documents. Safari allows SVGs to be specified as background images using CSS. The best way to embed them into WordPress seems to be to use an iframe. Because SVGs can support animation, they could one day replace Flash on the web and on the iPhone.

I wanted to see if I could build a version of my site using SVGs for the logo and background. Here’s what I learned:

If you check out the test page in Chrome or Safari it looks just like it should, but with crisp vector details. Firefox won’t display the shoe as an SVG background image, and Internet Explorer support is nonexistent. There’s an interesting project called SVGWeb that is supposed to provide SVG support for Internet Explorer, but I couldn’t get it to work.

The hardest part actually had very little to do with SVGs. Apache servers don’t serve SVG files
by default. Instead of displaying an SVG file, the browser delivers a box full of source code. Luckily I found the solution.

Here are some links to the sites I found most helpful:

Converting a Microsoft XML file to <ul>

Posted by on Feb 7, 2011 in Code, Snippets | No Comments

I modified a W3Schools script to get this JavaScript snippet because I needed to add a large excel table to a web-page as an unordered list. I set up a single column table in Excel and exported the table as an XML file called “list” and ran this code in the browser. Hope it helps somebody:


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","list.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<ul id='navlist'>");
var x=xmlDoc.getElementsByTagName("w:r");
for (i=0;i<x.length;i++)
  {
  document.write("<li><a href='#'>");
  document.write(x[i].getElementsByTagName("w:t")[0].childNodes[0].nodeValue);
  document.write("</a></li>");
  }
document.write("</ul>");

Videogames and the Art of Storytelling

Posted by on Oct 14, 2010 in Advertising, Art | No Comments

Annual video game sales are now regularly exceed Hollywood box office receipts. Video games are becoming the dominate popular art form of our era, but they are still largely a misunderstood medium. Video games were once played only by children, teens and nerds and there has been very little appreciation by their creators or their users that video games were a truly art. But even as a handful of game designers try to make a true art form out of video games, the convergence between advertising and gameplay will work against them. Video games, whether art or not, are becoming a powerful and diverse force in the media industries.

One of the reasons it’s been hard for video games to gain respect is that video games often communicate their messages through gameplay rather than storytelling. Stories and game play are both crucial to the human experience because they are both mechanisms with which children learn about the world. Storytelling has been at the center of all creative arts for centuries. Literature began with dramatic poetry and storytelling has been an important part of literature, theater, and even painting and photography ever since.

Burger King Video Game

Traditional bias is probably the biggest reason why creatives tend to favor storytelling over game play as a communication technique, but it’s time for creative people to recognize the legitimacy of games (There’s a great post on W/K London’s blog that makes this point for advertising professionals). CP+B was one of the first advertising agencies to recognize the power games had by creating a Burger King game for the XBox. The children who grow up playing the burger king game will probably experience more video games than movies, and will probably view gameplay as a natural and possibly even more effective communication technique than traditional storytelling.

Video games have been incorporating storytelling in some form for many years. Some have been successful, but overall, gameplay is the most effective construction for game design: “the medium is the message.” Under close examination though, the gameplay vs. storytelling divide falls apart. Gameplay is just a non-linear and experiential form of storytelling. The biggest problem standing in the way of the video game’s ascendence into an accepted art form isn’t that gameplay falls short as a technique. It’s that nobody has completely figured it out how to master the video game form–yet. This is one of the central points in Tom Bissell’s Extra Lives. He critiques the cultural value and the storytelling aspects of the video games throughout their history and he shows that video games are indeed evolving into an art form, but there is still a long way to go. The writing within video games is still often sub-par. Bissell interviews game industry veterans and most have high expectations for video games, they continue to provide an opportunity to communicate in totally new ways.

But even as the traditional game industry is becoming more influential, the game industry itself is being transformed by the convergence of advertising, social media and games. Social games like Farmville combine online games with marketing and advertising. Farmville is built upon an online business opportunity that is an answer to psychological questions nobody else was asking, who would have thought that people would pay money to show up their friends in an online game? It’s amazing too that people would be willing to complete surveys and sign up for credit cards for points in a video game. Games are becoming a part of reality, a part of everyday life. Jesse Schell explains how he sees the convergence between games and reality and how it will evolve in the future. His talk is a plea to professional game designers to get involved in making these games better. With more than 80 million Farmville players game designers have a stage that is bigger than ever before, now is the time to make art out of video games.

Spoilrr AR Presentation

Posted by on Oct 3, 2010 in 3D, Web Design | No Comments

Last February I built a working mock-up of what I hope will eventually be an augmented reality greeting card-creating web application. Currently the site has only one greeting card and there is no functionality to create new card designs. It was a project I originally took on to explore building Flex applications using the AR toolkit. It was also an opportunity to design a unique web application interface. The idea that inspired the project was the possibility of creating a web application that would make it easy for anybody to easily create augmented reality content. It’s an idea that has kept me interested in the project ever since, even though I am stumped by the technical problems that stand in the way. I believe that if creating AR content was made simple the web community would invent useful, entertaining and social applications for the technology. In July I presented the presentation above at a Spoilrr Meet-Up about what I’ve built so far and where I’d like the project to go from here.

If you’d like to check out my 3DeeCards site you can see it live at:3DeeCards.com, and if you have any questions or if you’d be interested in collaborating on a new version of the project, please contact me.

Thanks.

Printing Helvetica Neue

Posted by on Sep 10, 2010 in Advertising | One Comment

Helvetica Neue

Helvetica Neue is an attractive, versatile font, but have you ever tried to use it on a Mac running Leopard? How about sending print-ready PDF files using Helvetica Neue to a printer? In order to fix the font conflicts and create PDFs that didn’t drop apostrophes I deleted all my Postscript versions of Helvetica Neue and used Odystar PDF settings to export print-read PDFs from InDesign.  This might not be the only solution, but it worked for my situation.  Switching to Adobe’s OpenType version might also work too.

Mental Note (Comic)

Posted by on Jul 28, 2010 in Uncategorized | No Comments
Web Comic

Random Web Comic

Just a random web comic idea I had the other day and finally sketched up.

CS5 vs. Coda/Pixelmator

Posted by on May 2, 2010 in Web Design | No Comments
Pixelmator

CS5 is out and it has fully adopted Cocoa, which means it should perform faster than CS3 or CS4 on a Mac, but there are non-Adobe options for image editing and web development that been running well on Macs for years.  I have tried Pixelmator and Coda and I am impressed with both.  Although Pixelmator lacks some important Photoshop features, it’s a much faster and leaner image editing application.  Coda vs. Dreamweaver is a completely different situation.  Coda is leaner and easier to use than Dreamweaver and I don’t think I’m ever going to go back. I’m particularly impressed because Coda incorporates Webkit into it’s preview mode, a property inspector that resembles Firebug and also provides built-in language documentation. And for $99 (Coda) and $59 (Pixelmator) they’re worth considering.

Wonderfl

Posted by on Apr 6, 2010 in 3D, Art, Web Design | No Comments

This site is truly amazing. Wonderfl is an online ActionScript compiler with an interface that encourages code-sharing. It’s an online community for ActionScript developers. The game above is as sophisticated as the old arcade game that inspired it and you can peek under the hood at the code that makes it work ( to play us the move;arrow or wasd/shot;ctrl,z,n/slow;shift,x,m). The projects on Wonderfl currently shared range from simulations, experiments to games but there’s no limit to the kinds of Flash apps that could be collaboratively developed on the site.

3D Scanner

Posted by on Mar 29, 2010 in Uncategorized | No Comments

This is absolutely incredible, being able to make a copy of anything so quickly will revolutionize how 3D models are built. This 3D scanner is another development that will interface the virtual and physical world. Functional AR applications that recognize gestures and respond to GPS coordinates presage a natural user interface that will eventually make mouses and keyboards obsolete and blur the boundary between the real and the virtual.  There will be all sorts of ways to leverage 3D scanning technology, but the most important will be those that will advance science, medicine, education and communication.  Maybe researchers will use it to scan and share important artifacts. Crime scene investigators could use it to share data more quickly with the lab. Maybe it could help doctors diagnose patients from far away.