Tilt is a new Firefox extension allowing you to better visualize the layers and elements on your website.  Give it a try and let me know what you think.

Fake is a handy Mac app to automate things you do on the web.

What is HTML?

Wikipedia defines HTML as “the basic building-blocks of webpages” so it only makes sense that each new version will include new features to improve web browsing and web development. Think of HTML as instructions for what to display within your browser, the blueprint for your page. In its infancy HTML was used to layout pages as well as help define how your content appeared (bolded, italicized, form elements, adding images, bullets, numbered lists, breaks, tables etc). Today HTML still has the same functionality that it did when it was first created but CSS (Cascading Style Sheets) are replacing HTML for better control in laying out pages and dynamic languages like PHP, Java, .Net, Ruby and more use HTML to display content. So if HTML is the blueprint, who builds the page? The answer is the browser but unfortunately not every browser reads the blueprint the same. The result is pages that function and look differently than the author intended.

HTML 5 and Web Video

One of the best improvements with HTML 5 is its ability to play video. Previously HTML alone was not able to display video so solutions such as Real Player, Flash, and Quicktime have been filling the gap. To play HTML 5 video you need a modern browser which is a problem for those of us dependent on an IT department within businesses and enterprises. For instance I’m sure many of your companies are still on Windows XP and Internet Explorer 6 (both released in 2001).

To play a video with HTML you will need to use one of the following modern browsers:

• IE 9.0+
• Firefox 3.5+
• Safari 3.0+
• Chrome 3.0+
• Opera 1.5+
• iPhone 1.0+
• Android 2.0+

Not to make things even more confusing but even when you have a modern browser like the ones listed above, it doesn’t mean your HTML 5 video will display. There are 3 main video codecs which are ogg/theora, H.264, and WebM. The matrix below does a very nice job laying out which codec each browser supports. A codec is software which compresses and decompresses audio and video. Video in its nature can be large so playing it over the Internet in the past proved difficult. Therefore codecs were created to compress audio and video so they could be streamed from a web server more efficiently. The chart below shows the three main video codecs as well as which are compatible for each browser.

(Source)

• Ogg/Theora: an open source standard without any patents.
• H.264: the most popular video codec to date which is used by Blu-ray and Internet video streaming sites like YouTube, Vimeo, YouTube, and more.
• WebM: an audio and video standard being sponsored by Google.

If you want to use HTML 5 to display a video on your site, the following code will be compatible with all modern browsers:

Blame the CPU

You may have heard flash requires more processing power (CPU consumption). The more recent versions of the flash player require significantly less of your CPU and there are lots of benchmarks now showing HTML 5 and flash require about the same amount of processing power.

Growing up (like I ever did) one of the things I considered pursuing is architecture.  I took a drafting class in high school and liked it a lot and have always dreamed of designing my own home (some day).  The folks over at design-milk.com have a fantastic architectural section that I have been a fan of for some time.  I save almost everything I find interesting and useful so when I saw the architecture section of their site I instantly fell in love.  The only thing I didn’t fall in love with is the ability to see their entire post.  You have to view a post, it only loads half the page, and then click to get the entire post, click back, click the next post, and repeat that process for as many times as you want to keep viewing their content.  As you can see I’ve been a fan for a while now and have been collecting URLs for over a year to refer to.  If you love architecture, you are going to love the pages below but be warned you will lose at least an hour from your life as a result.

Fiercewhenroused.com is a domain name I’ve had for over a year now and it is my new primary domain on one of the two servers I have web content on.  I think I heard the term “fierce when roused” from Tim Ferriss on one of the podcasts/vidcasts I was watching and thought it was an awesome term and thus domain name.  I also thought that term fit my personality pretty well, extremely mild mannered until I need to defend myself and then watch out!  You mess with the bull…you get the horns!  At some point I have some plans to do something with the domain but for now it is what I use to surface a lot of my miscellaneous sites and files.

Hope you enjoy this site aggregator…

http://fiercewhenroused.com/webDesign/scripts/sitesScroll/homeDesign1.html

http://fiercewhenroused.com/webDesign/scripts/sitesScroll/homeDesign2.html

http://fiercewhenroused.com/webDesign/scripts/sitesScroll/homeDesign4.html

http://fiercewhenroused.com/webDesign/scripts/sitesScroll/homeDesign5.html

http://fiercewhenroused.com/webDesign/scripts/sitesScroll/homeDesign6.html

Stanley Hainsworth has been creative director at Nike, Lego, and Starbucks—all brands that have become iconic through good design. He just finished designing the new Gatorade bottle, too. Hainsworth clearly has a remarkable eye for style, but he insists that the key to creating a brand that attracts fans, that people love, is telling the company’s story.

Hainsworth says that companies like Apple have a persona. “You could describe what Apple is as a person, because of the personality they’ve created,” he explains. “So when we work with tech startups, the first thing we have to figure out is their story—what sets them apart in the marketplace.”

Now at the helm of Tether, his own design studio and retail space in Seattle, Hainsworth keeps looking for new challenges. “When I left Starbucks, people thought I’d want to work someplace really hip, like Diesel or Apple. I told them I wanted to work with Microsoft and Wal-Mart—two great American brands that have never told their story well. They both have incredible stories, if you think about the startups that they were at the time—it’s unbelievable. Bill Gates, what he went through, and his story: it’s never been told well. They’ve never used it to their advantage. They’ve become a product company with no soul.”

“Great companies read your soul,” says Hainsworth. “They give you something you didn’t even know that you needed.”

More info: Tether web site: http://www.tetherinc.com/

Web development in Linux is sometimes a little difficult since it lacks native support for Adobe’s Creative Suite.  I do have Macromedia’s MX suite installed from 2004 since it works fine with Wine/Linux.  I like Bluefish which works on Windows and Linux but it lacks a good FTP client.   This morning I just found Komodo which has a nice visual editor interface because you do your code editing in the top frame and can preview the output in the bottom frame (and update it instantly by pressing cntrl +s).

Adobe announced the upcoming release of CS5 with the ability to preorder it today.  Look for downloadable trials in the next thirty days.  Besides the killer new PhotoShop features Dreamweaver now has WordPress integration.  See the full video of the announcement.

Source: http://sixrevisions.com/infographs/firefox-statistics/

Click the image above for a larger view.

Here is a great list of essential web development tools.

• Why does my Feedburner subscriber count fluctuate so much?
• Are people unsubscribing and subscribing as much as my Feedburner counter says?
• I notice your Feedburner counter goes up and down each day – why?
• My RSS Subscriber Counter Goes Down Every Weekend – Why?

For the answer read this post.

If you design websites, Mockingbird is a website which allows you to quickly create and share very nice looking wireframes.

A new version of WordPress was released and here is a video highlighting the new features.

If I am brain storming a website design I use this image to get me started.  I print it out and sketch out what I envision the page to look like.  If you want to download it you can do so here.  It is a fun way to get the juices flowing as there is something about a blank browser window that inspires you to fill it up as opposed to a blank piece of paper.

If you have a WordPress site you should definitely check this feature out if you are on WordPress.com or the plugin if you are hosting the site yourself.

Hint of what the <i>tag does</i>.

Need a web designer for a website?  I just found haystack.com which lets you see examples of work from companies and freelance designers as well as how much their projects cost to develop.  You can also find web designers in your area.  For example check out web designers in San Francisco.

Source: http://sixrevisions.com/web-development/the-history-of-web-browsers/

Facebook recently purchased FriendFeed and as a result released Tornado, a real-time web framework which powered FriendFeed.  They decided to release the code as an open source project which I was happy about as you can see in the post above.  Upon sending the link to Scott he thought he was quite the funny man with his little note on a demo page.  :)

When Ajax techniques became popular, developers faced a new problem: how can we debug Ajax requests and responses efficiently for complex web applications? If using a debugger was hard enough with the RESTful model, triggering an Ajax-specific request is a pain and a bit more difficult; dumping logs and information pertaining to those Ajax operations had to be done using JSON or XML.

FirePHP is an add-on for an add-on: it extends the popular in-browser web development tool called Firebug with an API for PHP web application developers. FirePHP is free and easily attainable via the Mozilla Add-Ons section on the official Mozilla site. The official FirePHP site can be found via this web address: www.firephp.org. Christoph Dorn is the person responsible for creating FirePHP.