Paul Gueller » Personal

Export Illustrator Vector Artwork to a Canvas Element

Paul — Mon, 25 Apr 2011 21:03:47 +0000

Transforming my ugly old bitmap logo graphic into a slick canvas element with polished gradients and smooth curves, using the Ai→Canvas plug-in could not have been any easier.

After downloading and installing the OSX version of the plug-in, I starting with the old graphic as a reference and placed (not linked) the .JPG into an Illustrator artboard. I next overlaid my original vector paths and resized them to the correct proportions. I pulled out all the colors that I needed and inserted a layer underneath to simulate the drop-shadow used previously. Note: I did not consider using CSS3 box-shadow property because my graphic is a circle, not a box. I did not test this presumption however.

Once the weight and color of the stroke were set up, I configured the gradients to match the look of the bitmap and saved a working copy as an EPS. After a quick File > Export a nicely constructed .HTML file was created in my directory, and opened in my default browser.

Some of the alterations that I made to the exported code include:

wrapping the canvas in an a element
initializing the rendering via jQuery $(document).ready(…) instead of and cleaning up the then-unnecessary function declarations

adding alpha channel to the “background” gradient

1
2
3

gradient.addColorStop(0.92, "rgba(66, 101, 47, 1)");
gradient.addColorStop(0.97, "rgba(160, 178, 151, 0.5)");
gradient.addColorStop(1.00, "rgba(255, 255, 255, 0)");

Feel free to check out the source code of this site in lieu of specific code examples.

I didn’t include any screenshots of the process, simply because the whole thing took less than an hour to put in place. Would step-by-step screenshots be helpful?

Migration Complete!

Paul — Thu, 31 Mar 2011 14:23:52 +0000

No, we’re not talking about the birds returning from the south for spring. I recently made the very difficult decision to get rid of my home-brewed site in favor of one using WordPress. While I am still very proud of the work I did previously, which included programming my own PHP5/MySQL application, the benefits of an open-source CMS certainly cannot be ignored.

Some of the features that compelled me to convert include:

Clean separation of content from structure and presentation
Secure administrative area for updating posts and my portfolio projects
Hook to the LinkedIn API to pull in my resume data, instead of managing two separate profiles
Robust system to present code examples and manage downloadable files
Central hub for social media presence and web development interests

When it came down to it, I really couldn’t justify having two sites when all the functionality I needed could be provided by only one.

The experience was both challenging and fulfilling, and I not only have a deeper understanding and appreciation for WordPress but I also gained some insight into customizing a theme. While the process seemed daunting initially, I was surprised at how smoothly it went once it was broken down into digestible pieces.

I built on the minimalist Toolbox theme, which in addition to using many of the new semantic HTML5 elements appropriately, offers a decent number of page types and an excellent sample.css for reference. I included many of the aspects of my old layout, adjusting a number of background images for use in the page header and footer. Aspects of the Almost Spring theme that was previously applied to my standalone blog were blended in. Lastly 960.gs was included for a base grid-system to organize and standardize the layout.

Of course I still have a laundry list of features I’d still like to implement:

improve the styling and functionality of the sidebar
create a page to showcase my interest in photography, hooking up to flickr as well
move away from background imagery in favor of slick CSS3 effects
~~convert my personal logo to a canvas or SVG element~~ Completed! Thanks to the Ai→Canvas plug-in.

I also would like to go back through old posts and establish a more meaningful set of category and tag taxonomy. That, however, will require a whole different kind of thinking.

Feel free to poke around and check things out, and if you have feedback or a suggestion, you’re welcome to provide it in the comments.

Integrating Your Social Networks

Paul — Thu, 11 Dec 2008 22:45:30 +0000

If you’re reading this, you probably have them: social networks. Del.icio.us, Facebook, Flickr, LinkedIn, MySpace, Twitter, Virb, and countless others that supposedly keep us in closer contact with those close to us. A quick Google search returns over 34 MILLION results for the phrase, and it’s the holy grail, golden hammer, or panacea depending on who you talk to. But once you’ve decided which to participate in, how do you update them without wasting oodles of time?

Reviewing my Recent Posts, I have tried many times to begin a posting regimen to share information about my personal life as well as topics and links for fellow web developers with limited success. I attribute it to a combination of a lack of blogging discipline (as well as time and content) and the intimidation of having to post and update to the various services that I belong to. After performing a little research, I think I may have painless solutions to connect and cross-link them. WordPress is the blogging software this site uses. The features that drew me to it are that it is open-source (free!), has regular updates, and is fully customizable. There is a vast library of themes and plug-ins to extend the functionality of application, and here are some of the ones I am utilizing to work toward my goals:

WordBook notifies Facebook whenever a new blog article is published. With an easy-to-integrate API, it creates a wall post with a distinctive icon to inform all my friends.
Twitter Tools not only lists recent tweets in a sidebar widget, but also provides the option to send post headlines to Twitter.
FlickrRss displays photos from your profile or recent items from your photostream RSS feed.
Digsby is not just the best new multi-client chat application that monitors e-mail and social network accounts, it also lets you create customized live chat widgets that can be placed on the page with WP-Digsby
BONUS: If you are looking for a social network aggregator check out netvibes, which features innumerable widgets and views to keep on top of all the feeds, posts and entries on your social network. It doesn’t have a WordPress plug-in that I am aware of, but it does a kick-awesome job of being the one-stop-shop for information updates.

Addendum: WordPress 2.7 was released today, and in conjunction with the BuddyPress plugin, appears to give developers a framework to create their OWN social network tools. Facebook beware!

Agile Philosophy for More Than Just Software Development

Paul — Wed, 10 Dec 2008 22:46:10 +0000

I posted a link to Getting Real About Agile Design to the studio message board recently, and it set off quite a discussion internally. A number of people were hung up on the phrase “software development” and weren’t able to see the applications of planned flexibility for the greater business model. Admittedly, it is quite challenging in contrast to the waterfall model of project workflow, but Agile practices seem more fitting to the attitude and goals of this business.

From the article:

Agile is here to stay. The economic difficulties of the past months have finally put waterfall out of its misery; now more than ever, long requirements phases and vaporous up-front documentation aren’t acceptable. Software must be visible and valuable from the start.

I’m Blogging This

Paul — Sun, 02 Mar 2008 08:54:09 +0000

No, I’m not talking about this ThinkGeek item, I just installed the ScribeFire extension (or add-on, if you’ve never worked with the older versions of the browser) for Firefox. Hopefully this will help me to actually create some of the blog postings that I set out to when I was envisioning these pages.

I don’t think of myself as on who frequently uses trendy catchphrases or jargon excessively (and I can’t stand those people who use the word “blog” like the Smurfs use “smurf”) but I hope that through this channel I can accomplish the following things:

Improve my own style, grammar and vocabulary through writing on a more regular basis, though I will try to avoid too many obscure esoteric references
Provide interesting links and useful resources to others in the web development field
~~Rant~~Vent about things in life unrelated to my workplace or personal relationships (I can’t exactly be anonymous about these things people)

So, with this in mind, stay tuned and feel free to comment or contact me if you have suggestions. (or complaints!)

Hello world.

Paul — Wed, 10 Oct 2007 04:37:50 +0000

I think that title is pretty appropriate; considering when a person learns a new programming language, the first attempts usually involve outputting the text ‘hello world.’ So this is me learning the language of blogging.

I hope to use this forum to share resources and links about web design, programming, and general geekery, as well as to talk about things going on in my life (sorry no sex or violence here). I will try to keep this regularly updated, and we’ll see where this all leads!