It all started with Steve Jobs writing a letter announcing why Flash will never be supported on the iPhone or iPad. It has been the talk of the industry and now more hands are rising in favour of ditching Flash and living with HTML 5. Following is Opera (the browser) and Microsoft both stating that they back HTML 5 in favour of Flash. (Microsoft clearly doesn’t realise it’s Silverlight is likely to die as well)

With Javascript being able to do most of Flash’s tricks natively it’s main purpose has been used for video and audio. Now HTML 5 can do both of these making Flash virtually pointless.

YouTube, Vimeo and Scribd are just a few of the sites that used to rely heavily on Flash that are taking advantage of HTML 5 features to rid themselves of Flash for a better user experience. I myself have been working of ridding Flash out of my sites, namely NexTunes.com.au‘s audio player will run using the audio tag in browsers which support it coming the next release of the site and it will also say goodbye to any Flash based ads.

Adobe are obviously concerned about this recent onslaught from competitors and will be interesting to see whether or not they try new techniques to keep Flash alive.

Get The Functions

Download the functions here: GD Functions V1.0

Using The Functions

There are currently 3 functions included that are quite flexible and they allow you to:

• Resize Images
• Rotate Images
• Crop Images

This is a pretty standard set of functions but they are very easy to use, and they do all the heavy GD lifting for you.

In order to use the functions you must first include the GD Functions into your page.

<?php
require_once("gd-images.min.php");
?>

resizeImage(file, width, height, [newFile, [forceResize, [quality]]]);

Can resize an image in PHP.

File: The address to the file you wish to resize. eg. “../storage/my-image.jpg”

Width: The max width (or new width) for the image to be resized to. eg. 125

Height: The max height (or new height) for the image to be resized to. eg. 125

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

ForceResize: (optional, default:false) If set to true will force the image to resize (in ratio) to the new height. eg. true

Quality: (optional, default:90) The quality of the image being exported. Integer between 0-100, 100 being the best quality. eg. 80

<?php
require_once("gd-images.min.php");
// Resize Example
resizeImage("../storage/my-image.jpg", 125, 125, "../storage/my-new-image.jpg", true, 75);
?>

rotateImage(file, Angle, [newFile]);

Can rotate an image to any angle in PHP.

File: The address to the file you wish to rotate. eg. “../storage/my-image.jpg”

Angle: The angle you would like to rotate the image to. Integer between 0-360. eg. 90

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

<?php
require_once("gd-images.min.php");
// Rotate Example
rotateImage("../storage/my-image.jpg", 180, "../storage/my-new-image.jpg");
?>

cropImage(file, X1, Y1, X2, Y2, [width, [height, [newFile]]]);

Can crop a portion of an image, then resize that portion to a specified width/height in PHP.

File: The address to the file you wish to crop. eg. “../storage/my-image.jpg”

X1: The X co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

Y1: The Y co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

X2: The X co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Y2: The Y co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Width: (optional, default:cropWidth) The width you’d like the cropped image to be. If not set it will default to the width of the area being cropped. Integer. eg. 50

Height: (optional, default:cropHeight) The height you’d like the cropped image to be. If not set it will default to the height of the area being cropped. Integer. eg. 50

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

<?php
require_once("gd-images.min.php");
// Crop Example
rotateImage("../storage/my-image.jpg", 10, 10, 100, 100, 50, 50, "../storage/my-new-image.jpg");
?>

Notes

• Requires the PHP GD extension installed to work (comes with most hosting set-ups)
• Supports JPEG, PNG & GIF files.

The beta currently supports the following browsers:

• Google Chrome
• Safari (4+)
• Internet Explorer with Chrome Frame installed

If you’re using one of these browsers, jump on to the YouTube HTML 5 beta page to opt-in and start trying out the Flash-free video player.

http://www.youtube.com/html5

Instead of re-writing all the new features and speed improvements jump on the official release site for more details:

http://jquery14.com/day-01/jquery-14

Be sure to read the backwards incompatibilities at the bottom just to make sure nothing will break when you upgrade.

I’ll post a review once I’ve had a chance to put it through it’s paces properly.

If there are articles that you really like you can tell the world by clicking the “like” button much like Facebook, or you can share the article on Twitter or Facebook, with the click of a button. Many new features are planned and should be rolled out in the coming months. If you have any ideas on how to improve Web Resauce then please feel free to let me know by commenting this post.

But definitely check out Web Resauce and let me know your thoughts.

The Problems

a) Your background won’t fill the screen even though you’ve set the color in the body via CSS as per below:

Background doesn't fill the screen

b) Can’t get a div or other element to stretch 100% of the browser window.

The Solution

It’s quite simple, in your CSS put height: 100%; in both the html and body as follows:

html {
  height: 100%;
}

body {
  height: 100%;
  ........
}

Why does it occur?

The reasons these problems occur is because most browsers don’t automatically render the page/body to 100% of the browser windows height.  This in turn means that when the background is rendered on the body or the height is set to 100% it will only fill 100% of whatever the body is. This is why setting the html and body’s height to 100% will fix the issue.

It has been a long time since I had last considered using an alternative browser to Safari. But when I got my hands on Google Chrome for Mac – My browser world was shaken.

Appearance

My grudge about Chrome on Windows was the ugly blue colour they chose. I love blue, but I don’t want a blue browser, that just doesn’t make sense. Thankfully the Mac version does away with the ugly blue and introduces the beautiful Mac chrome they all we love so very much. Although not the prettiest style, the tabs work very well sitting on top of the address bar as attempted by Apple in the Safari 4 Beta. The only difference is Chrome has enough space to drag the window separately to the tabs – Apple attempted to have all as one, which failed miserably. The address bar, bookmarks and navigation buttons aren’t anywhere near as nice as Safari and Firefox 3, but Google aren’t exactly known for their brilliant design skills. Google Chrome also has themes so if you don’t like the look, just change it.

Speed

Wow. They’re not lying when they say Google Chrome is the fastest browser ever. It is noticeably faster in all aspects, even compared to Safari. Pages load lightning quick and the javascript speed is brilliant. New tabs open virtually instantly and moving tabs around is a breeze. CPU usage is amazingly low which means it won’t hog your computers resources.

Crash Test

Well Chrome does crash a fair bit due to it being in Alpha. But the good thing about it is it’s crash handling. As each tab in Chrome is processed separately, meaning if a tab crashes the rest of the browser will continue to run fine. This is brilliant, now just fix the amount that the tabs are crashing…

Developer Features

As Google Chrome is based on webkit, you get the same developer inspector as in Safari. Anyone who has used Safari’s web inspector will know it is very comprehensive and can easily pin point any problems with your site, javascript or loading. I find it’s much better than Firebug in Firefox. The alpha version however does not allow you to view cookies yet which is a bit of an issue, but this will be introduced before the Beta launch.

Plug-ins

Google Chrome for Mac does not currently support plug-ins, but the plugins I want to talk about are the common plugins that come with the browser, Flash, Silverlight and Quicktime. 1 word, useless. Flash crashes at least once a day, usually more. Silverlight doesn’t even work – not a terrible thing, who uses it anyway? Quicktime barely works, and a lot of the time won’t work at all. This is a big problem for the browser, although it is forgiven as it’s just in Alpha.

Comparison

As I said earlier Google Chrome is a mash of Safari and Firefox. If you took Safari – improve it slightly. Add in things such as the ability to force new windows into tabs automatically (one feature that has been lacking in Safari for sometime), add themes etc. Then take that out of the blender, rework the way tabs are handled and processed, rework the way downloads are handled so you don’t end up with 50 windows open among other things, Google is a clear winner, especially in the Mac market.

Conclusion

Google, why have we had to wait so long for a Mac version, and a version that looks like it’s  a good 6-12 months from Beta? Your browser nothing short of what I’ve always wanted in a browser, yet I can’t really use it every day as it’s too buggy and is missing some crucial features. Most companies these days have caught on to the whole launch Mac + Windows software together, why have you not? I’m not alone on this one, just ask Google co-founder Sergey Brin.

At the FOWA London 2009 Alex Hunter did a very interesting talk on marketing that is a must see for anyone in the web industry. In his talk he covers things such as putting a face to your company and becoming a person which I covered previously in my recent article about social media marketing on the small business hub. He also talks about being real, putting in the effort to make your venture work and how the world has changed from the old way of doing business. Take the time to sit down and watch it, it just might change your world.

Warning: Contains material that may offend some viewers, but probably not you so don’t worry about it…

I’m currently working on many of these things as I rebrand one of the companies I started as well as my new venture Super Domains.

If you need a further kick in the pants to convince you to get serious about your business – watch the below video also from FOWA London 2009 where Gary Vaynerchuk tell you about how it is time to put the time into your business, stop talking, and start doing.

Well all major browser developers are on board INCLUDING Microsoft. This is great news, and it’s good to see Microsoft beginning to show support for these standards and putting in the effort to get IE6 + 7 users to upgrade to version 8. Thank you Microsoft!

Instead of me rambling on about what’s coming and what’s currently supported, I’ll show you a video from FOWA London 2009 of Bruce Lawson from Opera talking about HTML 5 and demoing on various browsers.

So many of the HTML 5 features are out and running in some browsers. However, the fact is until the modern browser uptake is greater we’d just be needing to code 2 sets of scripts, one for old and one for new. So at least for the next few years there is not a huge advantage in jumping onboard the HTML 5 train.

Useful Links:

• http://html5doctor.com/
• http://html5demos.com/

Apple.com

One of today’s most inspirational sites was very different 10 years ago. They still kept their site very simple back then.

Google.com

You’re witnessing what was the birth of one of today’s biggest corporations. Founded by Larry Page and Sergey Brin, Google officially went live in November 1999, 10 year birthday celebration? The founders invested $25,000 from credit cards to get the site going (along with a grant from the Stanford University Library), probably the best $25,000 of the banks money ever spent.

Microsoft.com

It’s a bit concerning that Microsoft’s download center site still looks very similar to their site 10 years ago.

Yahoo.com

It’s hard to believe that 10 years ago people were using something other than Google to search the web.

Amazon.com

Founded by Jeff Bezos in 1995, Amazon saw fast growth online being named by Time magazine as one of it’s 10 best sites of 1996. By 1999 Amazon had 8 automated warehouses, each costing $50,000,000… Ouch. No wonder Amazon didn’t post it’s first full-year profit until 2003.

Cnet.com

One of the web’s premiere destinations for anything tech, cnet has managed to stay a popular destination for it’s visitors by evolving with the web to give users what they want.

Ask.com

Ask Jeeves was a popular destination to get your questions answered on the web. Today you don’t get to Ask Jeeves, the name was later shortened to just Ask.

AOL.com

Once a monster Internet Service Provider, AOL had over 30 million subscribers. Today AOL has been on the decline since 2002 after merging with Time Warner and now has less than 6 million subscribers.

Adobe.com

One of the worlds leading software companies, many elements of their 1999 site are still used in modern website design.

IGN.com

Still a popular site for gamers IGN has been around for quite some time, here’s what it looked like in 1999.

Sources:

• Website Screenshots from: Way Back Machine.
• Wikipedia
• 50 great e-businesses and the minds behind them, Random House Australia 2007.