ScottKing.com.au

It’s been almost 3 months since I’ve joined Adobe as a Product Specialist and I must say it’s easy to see why they’re the industry leader in digital content creation and digital marketing. The crew at Adobe are an incredibly switched on, dedicated and intelligent group of professionals.

I’ve joined at an exciting time as the company looks to strengthen it’s place as the digital marketing leader, the upcoming launch of CS6 and the range of incredible touch and mobile applications about to drop.

It’s been far too long since I’ve posted, a lot has been happening professionally and personally of late.

Time to start posting.

Here’s a quick overview to adding social media buttons to an EDM. For the most part this is possible and simple to implement.

Very cool.

Adding Facebook

Adding a “LIKE” button to an EDM is as simple as using the following code:

 
<a href="http://www.facebook.com/plugins/like.php?href=http://www.reborn.com.au&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 target=">

<img title="Facebook Like Button" src=" http://www.scottking.com.au/likebutton.jpg" alt="Facebook Like Button" />
</a>
 

All you have to do is:

1. Change the URL to the page you want ‘liked’
2. Change the img location and upload your “Like” button image.

Adding Twitter

Adding Twitter uses much the same medthod, simply use the following code:

<a href=”http://twitter.com/share?url http://www.scottking.com.au &amp;text=Scotts&nbsp;Blog&amp;via=websiteaccount&amp;related=myaccount“>Tweet this</a>

And all you have to change is:

1. Change the URL to the page you want ‘liked’
2. Change the text (remember to escape any special characters)
3. Add an image icon similar to the Facebook implementation.
4. Specify your website name / account after the via variable
5. Specify your Twitter account after the related variable

Google +1

Unfortunately the new Google +1 uses JavaScript so at present there is no way to implement a “+1” directly into EDMs.

However Google’s +1 could be implemented using the alternate method outlined below.

An Alternate Method

An alternative is that when you click the Social media button, ‘Like’, ‘Tweet this’, ‘+1’ button you are taken to the hosted version of the newsletter and the relevant social media service can be called and overlayed as a div above the hosted version of your edm.

Creating effects such as Smoke or Fire is always a bit of a trick, it’s something I’ve wanted to have a crack at for a long time and finally got the opportunity recently.

Smokin:

http://scottking.com.au/portfolio/worldkitchen/

Exciting stuff! Away 3D now has GPU support of the Molehill APIs for the up-coming Flash 3D player upgrade!!! Finally proper 3D accelerated 3D hits the web!!! Bring it on!

Further reading:

http://away3d.com/away3d-4-0-alpha-release-broomstick

First post of 2011 and it’s all about some experiments. Firstly with a 3D bump mapping algorithm which I decided to apply to some awesome Jasper Goodall works after seeing him speak at Semi-Permanent.

Check it out:
http://scottking.com.au/portfolio/jasp/

Jasper Goodall 3D Test

As the Technical Director at Reborn I worked alongside the owners to build the company from 12 employees to 30 within 12 short months. I watched the company develop from a small digital agency into a fully fledged creative agency with the might to take on the best in Australia.

Recently launched, a web site to showcase 158 Collins Road for Barnes Realty.

http://www.158collinsroad.com.au

A few friends of have asked my thoughts on HTML 5 and posing questions such as “Will HTML 5 replace Flash”. Firstly, HTML 5 is simply a new markup, it will replace HTML 4. Canvas is the SVG graphics technology that will enable HTML 5 and JavaScript to create rich and dynamic graphic, much like Flash, native in the browser.

Old dog, new tricks?
Canvas is an SGML based graphic language – however it is by no means the first SGML SVG, some of you will remember VRML that was around in the mid to late ’90s. If you remember VRML you’ll know how well that turned out.

Browser Penetration
3-5 years for browser support to reach a level that allows real world usage of HTML 5 + Canvas. Sure us tech heads love jumping onto the latest and greatest browser and it’s support for the latest cutting edge technologies. Most users, don’t. Most big companies don’t. And remember most Government systems, banking systems, etc are still using Internet Explorer 6 and some are even still running IE 5.

Browser Compatibility
If there is one thing that Browsers can agree on, it is to disagree. Each browser implements their technologies differently. Always have and always will. Even W3C strict standards based technologies get implemented differently. Even the exact same verison of a browser on Windows may have inconsistencies when compared to the same browser on a Macintosh. It’s about time us web developers got used to the fact that “browser standardisation” is .

Flash major flaw is also it’s major strength – it is a plug-in, a browser component so it must be installed seperatley in each browser implementation (or packaged with the brwosers by default) which can be a pain. However because Flash is run through, propietry player it is all but standardised across all browsers and operating systems.

Hardware Acceleration
SVG is a Vector graphic format, it is therefore quite processor intensive. Flash has overcome many of the hurdles of Vector based animation through years of development and by recently introducing hardware acceleration to it’s Flash Player. Canvas faces the same potential performance problems however it is up to each indepent browser vendor to implement it’s own opimistion and hardware acceleration meaning Canvas applications will run faster on some browsers, then others.

HTML 5 based image editors – visual image editors such as Photoshop that output to Canvas

Writing Canvas based code is very difficult. Lets take a look at a sample rectangle in Canvas:

HTML Mark-up:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

JavaScirpt:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

To do the same thing in Flash you can either write the ActionScript to create the rectangle, which in actual fact looks quite similar to the JavaScirpt component of Canvas example. However, you can also just open up your Flash editor, grab the rectangle tool, pick a color and draw it onto the Stage.

What the Flash editor is doing is essentially creating the ActionScript (or more correctly the MXML) for you.

Until a few “WYSIWIG” style image editors come out with Canvas support (a future Photoshop Save to web option perhaps?) we will not see complex interfaces created with Canvas. 7 lines of code to create a simple colors rectangle with no animation or interactivity is a lot to write. Creating an entire interface in this way would be impossible.

Community
For Canvas to be successfull it must be adopted by a strong community of developers. I have no doubt that we will see JavaScript libraries to manipulate Canvas – animation packages, Tween packages, colorisation and the likes developed and released to the development community. But these things take time. There have been plenty of promising web technologies come and go. However, given it’s adoption by most major browser vendors and the hype surrounding Canvas it appears it will be with us for some time.

Conclusion
Canvas is a nice new technology to have in the toolkit, although a lot of the hype surrounding it at present is unfounded as real world corss-browser implementation of the Standard is sitll a long way off. Flash is a powerful technology with over 15 years of development behind it, 99% browser and market penetration and the worldwide multimedia leader Adobe behind it. Will Canvas replace Flash? No.

http://en.wikipedia.org/wiki/Canvas_element

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

http://en.wikipedia.org/wiki/VRML

http://en.wikipedia.org/wiki/MXML