Please note: This site’s design is only visible in a graphical browser that supports web standards, but its content is accessible to any browser or internet device. To see this site as it was designed please upgrade to a web standards compliant browser.
Last weekend I had the pleasure to work with three brilliant Harvey Mudd students, Ozzie Gooen, Rahul Swaminathan and Paul Hobbs building this mobile web app Instapol for Mobile Hack Days. Instapol is a mobile web application that allows presenters to gain instant feedback from their audience. Instapol creates real-time graphs of audience responses to questions.
The animation above isn’t Flash, it’s a JavaScript animation created with Adobe Edge. Adobe Edge is a prototype application that allows designers to create iPhone/iPad friendly JavaScript and CSS3 animations. Edge is an HTML5 technology and designed for mobile devices, but it’s not sophisticated enough to be a Flash replacement. Right now it lacks bells and whistles like filters, drop shadows and layer styles. There’s also no coding panel to insert scripts. The application interface looks and feels more like AfterEffects than Flash, hopefully it will eventually evolve into a robust tool for creating cross-platform rich media content.
I really like this blog’s 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 ]
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:
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.
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.
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.
E-cards can be kind of cheesy and paper cards are a little…flat. That’s why I created a web app called 3DeeCards that lets you create a card with a 3D augmented reality object inside that you can print out and send to a friend. I came up with the concept, developed the logo and designed and developed the website. I used CS3, Flash and Flex 3 using Papervision3D and the Flash Augmented Reality Toolkit and got a lot of help from tutorials on gotoandlearn and Miko Happoja’s blog. Right now there’s only one card design but if anybody reading this has got an idea for a 3d card I’d like to add it to the site. Drop a comment or send me an email. Check it out and send somebody a 3DeeCard!
We go into a store, we get what we need and then we’re on our way. Very few of us stop and get to know the people who help us behind the counter. Corner Store is a documentary that tells the story of one particular corner store in San Francisco and its proprietor. I created this little mircosite to help promote the film. Hopefully it will be on the film festival circuit soon please check it out.
Sometimes art isn’t a tangible object but an experience. Since installation and video art emerged in the 90s, these artists have embraced digital technology. Toby Joe explains how the frameworks for animation are evolving in a cross-posted blog post Toward the Bare Metal: From Flash to Processing, OpenFrameworks, and Beyond, “A lot of people moved from Flash to Processing–a great Java-based framework and IDE–as their interests moved away from wide distribution (via the Flash player) towards lower-level access to the hardware.” OpenFrameworks is a C++ library for creative coding. An artist collaborative called Field showcases the video above with some information about their processes. Code has created art, but coding is an art in itself.