In addition this site was also included into the online gallery called HTML5Gallery. To be accepted you have to have exceptional design and code.

This proves that hard work pays off.

Example with text-shadow

Hello World

Without text-shadow

Hello World

The property accepts 4 arguments (or values). 

1. Color of shadow

2. The X-coordinate of the text-shadow

3. The Y-coordinate of the text-shadow

4. The blur radius of the text-shadow

Now I know a lot of designers and developers come to my site to visit the resource page. The page is not gone but is no longer on the main menu. I might figure out something else for it but for now you will find the link in the footer. I think that it might have been confusing some clients into clicking on it expecting to find information for them. If you need a quicker link here is the Designer Resources.

If there are any other things that I can do to make the page more user friendly let me know.

First and foremost I am happy to note that Photoshop CS5 will finally be able to open animated gif files with all frames intact. Previously Photoshop would throw away all animation data and leave you only with the first frame of the animation. Needless to say this was useless.

The animation panel in Photoshop CS4 and previous was simple yet oddly hard to use. Mostly this was so because there was no good indicator as to what animation was going on. You had to remember what you did, and constantly preview your animation. Even more confusing is that if you wanted to make changes it was downright difficult to do so often resulting in starting over the animation process.

Gladly Adobe made some huge improvements to the panel. It is very easy to use and even more importantly easy to see what is going on and make changes.

Click image to see larger version

I wont go through how to make an animation but I will try to explain a few of the new things that have been introduced.

If you have ever used Adobe movie creation software than this will look very familiar to you. You have multiple layers in your timeline. Each layer has multiple properties that can be animated. Animations start by click on the stopwatch. The smart thing that Adobe does is that all you have to do is set the correct position in the timeline (using the scrubber) and change what property you want to animate. Adobe will then automatically set the keyframe for you. It is important to note that if you click on the same stopwatch it will turn off all animations for that property and hence delete your keyframes. If you need to make a change all you have to do is select the proper keyframe and move it to the desired position or change the property. 

There is many more features and options but that is the basic workings of the new panel. This is a huge refreshment over the last version and one that is very welcomed. It is easy (and fun) to create basic animations such as the one below.

First off, why is this bad? It is bad because it is very ineffective. Lets list the reasons.

It uses Javascript.

Any web savvy web user knows that javascript can be disabled. If they really wanted your content they can just disable javascript and bypass your script.

Print Screen

If they wanted your images, all they would have to do is do a screenshot and they have your image.

Menu - View Source

If you are trying to prevent them from gaining access to your code it isn't going to work. All browsers have an options to view the source from their menu systems. This gives them access to all your code and by consequence the URL's to all your images. Some browsers (Firefox, Safari, Chrome) have extensions that enable the visitor to see all your source code without the browser menu system so that is another way for them bypass your script

Takes time to load

Because it is a script, that means the browser needs to execute it. This takes time and browser resources which will make your site just that much slower.

User alerts

When a user does right click, they are alerted by a popup that the function has been disabled often requiring the user to accept the notification. This added click will do nothing but annoy the user who will often times just leave your site never to return.

____

Now the title said that it disables your users. How could the right click be a plus for users?

New Window or Tab

All browsers have the ability to open up tabs in one window. There are many users that use this functionality and a popular method is to open up links via the right click in a new tab or window. If you disable the right click it will make that method all the more harder to do.

Bookmarks

If the user wanted to bookmark the page via the right click menu, this would no longer be possible. The user would have to resort to the menu system. And unless you have really good content, they probably are not going to bother.

____

So you don't want people to steal your content, so what can you do?

Watermarks on images

Seems simple enough. It is a good start but be warned that even this is not fool proof. A poor watermark can be removed with an image editor.

Don't put it on the internet.

If you absolutely don't want certain content stolen just don't put it on the internet. It is 100% fool proof.

But what if you have a date, or even a word that means a point in time. What is the meaning behind that?

To give more meaning to it, you must use the datetime attribute.

So we can see that with HTML5, we can give purpose and meaning to time and dates.

Perhaps the biggest change is not a visual one at all. With all the blog posts about HTML5, it seemed kinda silly saying how easy it is to use and that you can use a lot of it right now, but not actually do it ourselves. So the whole site has been recoded to use HTML5 tags.

Let me know how you like the new changes.

Located in Brussels anyone can sleep with their favorite colors (or color combination). As you can expect everything is colorful and in Pantone's color swatches. Colors are even labeled with the correct color identifier.

Take a better look at the hotel by visiting www.pantonehotel.com.

On a side note, they should really hire someone to fix the awful kerning problems on their site.

Google has a solution. The Google Font API. If you know just even a tiny bit of CSS, you can use this. First you have a group of fonts that you can choose from. At the moment it is only a small selection but I am sure it will grow with time. You can visit the font library here.

After you pick a font you just insert the given code into your webpage. For example if I was to choose the Vollkorn font the code would be this:

Then you would make reference to the font using CSS:

The nice thing about the code/font library is that it is compatible with even IE6. If the library grows to a couple hundred fonts I can see this as a valuable tool for serious production in the future.

This your basic syntax:

To solve the problem between Safari/Chrome and Firefox you can modify the syntax like this:

This will display the video in each browser that supports it, but currently it will sit on the first frame with no way for the user to start or watch the video. To do that we must either add controls or make the video play automatically (or both). It would be also wise to auto buffer the video before playing. If you have multiple videos on one page, I would avoid auto buffering.

For IE, you will have to figure out what browser they are using with either a server language or javascript and then display a flash version of your video.

The nice thing about the video tag is that since it is HTML, it can be styled with CSS to personalize it they way you need to match your site and needs. The video tag is a block-level element so keep that in mind as you style it. As an added note, since you are using HTML5, why not try using some CSS3 to style it such as rounded corners and drop-shadows.

If you have preordered it for download, you can download it now. If you ordered the box, you'll have to wait until the physical product is shipped to you but you can download the trial to what ever suite you ordered and then enter in the serial to your product when you get the box. 

Also as promised, trials will also be available starting today so if you have not ordered the suite, you can still get your hands on it for 30 days.

We ordered the box, so when it arrives we will post pictures of the un-boxing as well as a review of some of the major programs.

For now we must resort to javascript as the solution until everyone has moved over to the yet unreleased IE9 which will support HTML5. If the user visit your page in IE, Javascript must tell IE that these tags are actually part of the DOM (Document Object Model) and then you can style them just as any other tag.

You can download it here: IE HTML5 Support.

In our next post we will be talking about the new tags and how you should be using them correctly for semantic purposes.

The Adobe CS5 software will officially ship April 30, 2010. The trials would also be released from that date. We don't have too long to wait.

We will be getting the software as soon as Adobe will let us, and we will make a full review on it.

In an attempt to give you a good resource on how to make a HTML5 pages while still supporting, we will be looking at some of the new tags and options that it gives us.

First we will look at some of the new tags, what they are used for and then show an example of a full HTML5 page how it should be coded.

The Tags

While there are many new tags, we will only be looking at a few of them and their purpose. It is important to note that HTML5 is a way to better make tags represent the content that fills them. For example a site could have a generic div tag for an article. Hardly semantic from the looks of it. HTML5 fixes that with the article tag. 

Here are a few of the basic HTML5 tags you should know (not a full list of all HTML5 tags).

The Doctype

Another change is the doctype. Many really hate the doctype mostly because no one can remember it and always have to copy it from one place or another. HTML5 gets rid of this and replaces it with something much easier to remember

Old (for HTML 4.01 Transitional):

New:

Now that isn't hard to remember is it?

Dropped Tags

With the addition of new tags, old ones have been dropped. They are as follows: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

The future

In the next few posts we will look more in depth about what HTML5 entails and how you should change your workflow (and your next webpage) to this new standard and how you can support even IE6.

Photoshop CS5

• Mixer Brush (for live painting effects)
• Content Aware Fill
• New selection refinement tools
• Puppet Warp
• Enhanced HDR imaging
• 3D Extrusions
• Better Media Management

Illustrator CS5

• Perspective drawing
• Enhanced strokes (variable widths, better dashes and art brush control)
• Bristle brush (paint vectors that resemble natural media)
• Pixel grid for web and mobile devices
• Shape builder tool
• Drawing enhancements (draw behind/inside, join paths with a keystroke)
• Resolution independent effects

InDesign CS5

• Interactive documents and presentations
• Simplified object selection and editing
• Multiple page sizes (at last they heard our pleas) 
• Paragraphs that span or split columns
• Track text changes
• Animations pallet
• Redesigned Layers pallet
• Enhanced Flash export
• Live Captions (generate static or live captions from image meta data)
• Enhanced eBook creation

Dreamweaver CS5

• Integrated CMS support (Wordpress, Joomla, and Drupal)
• CSS Inspection
• Integration with BrowserLabs
• PHP custom class hinting
• Subversion support
• Site-specific code hinting

Flash CS5

• Text engine (finally better text controls)
• Code Snippets panel
• Enhanced Actionscript panel
• XML-based FLA source files
• Sprint for Bones
• Deco drawing tools
• Improved video
• Content Distribution (Air, iPhone, iPad)

Fireworks CS5

• Pixel-precise rendering
• Design Templates
• Adobe Swatch Exchange support

Flash Catalyst CS5 (new)

Adobe Flash Catalyst is a brand new produce from Adobe. It allows designers to create flash based apps with no coding. It can interact with Illustrator, Photoshop, or Fireworks for roundtrip editing. Once done, the file can be given to a Actionscript or Flex coder for further logic coding.

3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).

This was originally reported by TechCrunch. When TechCrunch contacted Adobe about the TOS change, they replied:

We are aware of the new SDK language and are looking into it. We continue to develop our Packager for iPhone OS technology, which we plan to debut in Flash CS5.

On thing is for sure. This is a beta TOS, and things could change. Personally I think it would be smart for Apple to allow private API's to open the door to more developers, but perhaps Apple isn't interested in that.

Update

A representative from Adobe (speaking for himself not the company) posted on his Flash blog his opinions.

I am positive that there are a large number of Apple employees that strongly disagree with this latest move. Any real developer would not in good conscience be able to support this. The trouble is that we will never hear their discontent because Apple employees are forbidden from blogging, posting to social networks, or other things that we at companies with an open culture take for granted.

Many of Adobe’s supporters have mentioned that we should discontinue the Creative Suite products on OS X as a form of retaliation. Again, this is something that Adobe would never consider in a million years. We are not looking to abuse our loyal users and make them pawns for the sake of trying to hurt another company. What is clear is that Apple most definitely would do that sort of thing as is evidenced by their recent behavior.

Now let me put aside my role as an official representative of Adobe for a moment as  Speaking purely for myself, I would look to make it clear what is going through my mind at the moment. Go screw yourself Apple.

PR spokes person Vanessa Rios for Adobe said in today's press conference that:

We feel that everyone should be up-to-date with the latest technology that Adobe offers. We realize that our typical upgrade prices were leaving some companies behind.

It seems as though people with CS3 and older will still have to pay the normal price to upgrade.

We will be following this and be reporting any worthy news that Adobe releases. It has also been rumored that the actual product will be released April 21st or 22nd. We will see if that is true or not when Adobe gives us a date.

*Note that the above logo is something we created and not the actual logo for CS5.