Kevin Rose’s Internet video startup, Revision3.com, unveiled its new look today. The homepage has been simplified providing an immediate focus with a large feature box that rotates through different site promotions. Each show now has it’s own section which is easily accessible from the “Shows” drop down menu along the top of every page. Streaming video flash players on each episode page have been bumped up to 555×337 which really draws viewers in. Each show has a plethora of different subscription formats which are only a tab away from the recent episode list. The overall restructuring is a welcome improvement, but unfortunately it came at the expense of visual design.

The new color scheme is drab and bland with a “corporate” feeling that first comes to mind. I suppose this is to appeal to advertisers that Revision3 is trying to attract to buy ad inventory but it feels like something from early 2000. The old design (pictured below) felt slick and cutting edge just like the network itself. But the worst offender of this new look is the typography. For one, it is a light gray (hex code #666666) and could stand to be darker (like #333333) for increased contrast and thus increased readability. The line-height is also not set leaving lines scrunched together making it harder to read. In short, the new design is missing the final polish which used to set it apart from other media websites on the net.

Daniel Burka has been the lead designer on most of Kevin Rose’s web projects but it looks like he didn’t have a hand in the new Revision3.com. He must be too busy working on Digg and Pownce, two sites I really admire from a design perspective. Luckily I have no reason to visit the Revision3 site on a regular basis except to subscribe to new shows. I hope they take a second look at things and update the style to match the new functionality.

Four local area DC Developers (Doug, Gabe, Jason, and Min) got together and created two excellent Twitter mashups that were released this week.

Twittertale.com weeds out public tweets that have swear words and then highlights them on their school room inspired site. It also keeps track of the top 5 naughty words as well as the users who indulge in the most sailor talk. As of this posting, @bumblebunny looks to be an interesting person to follow. As an extra twist, I think the swear words should be censored with *’s leaving the audience to guess what swear words were being used.

Politweets.com takes the same concept from Twittertale but applied to U.S. Presidential candidates. The two major political parties are seperated out and the political candidates are ranked in the middle based on the number of mentions on Twitter. This is a neat way to extract data from such a large body of political commentary and the guys certainly nailed the design with a gorgeous yet simple layout.

I decided to contribute a tweet to both sites at the exact same time…

It’s hard to imagine being somewhere that locks down the web browser so much that you have to resort this nifty trick I read on DownloadSquad.com, but desperate times call for desperate measures. If you can’t reach the web through Internet Explorer due settings beyond your control and forgot your portable Firefox thumbdrive then simply open up the calculator or MS Paint and click “Help”. From there go to “Help Topics,” which will bring up a help window. Now all that is left is to right click on the title bar and select “Jump To URL.” Type in any web address you like, but make sure to include “http://” at the beginning and you should be good to go.

What you are basically looking at is a stripped-down, basic version of Internet Explorer which is built into Windows and used to display CHM files, or Microsoft Compiled HTML Help files. Sure there are no niceties like bookmarks or your comfy, cozy Firefox extensions, but if you need to check your e-mail or Twitter account and this is your only resort, you will put up with a little cruft in order to get your stuff. Besides there are back and forward buttons, what else do you need in a browser?

Google has impressive, interactive charts incorporated into many of their products. The best place to see them in action is Google Finance where stock prices are graphed over time allowing the user to zoom in or out, stretch or expand the selected view, and other fancy interactions. The result is a rich experience for viewing and manipulating data.

Today Google unveiled the public application programming interface to interact with their chart engine. While not as rich as Google Finance charts, this public charting tool is extremely flexible in
creating line charts, scatter plots, bar graphs, Venn diagrams, and even pie charts. Charts are generated by constructing a URL with various parameters, or options, to customize a chart dynamically. Making a URL request returns a PNG image which can be saved to disk or embedded on any web page. Some examples of the charts are shown below.

Documentation for charts can be found at http://code.google.com/apis/chart/ which provides a smattering of examples.

I am very excited by this release as there are a ton of different applications these could be used in. Using some simple JavaScript, you could take these charts a step further and create animated charts using various URLS with one incrementing data parameter. Kind of like this (JavaScript code borrowed from Chip Chapin).

I would like to see a user-friendly interface built on top of the API so those who are less developer inclined can make charts and graphs easily. It wouldn’t be too hard to make a simple JavaScript program to construct the URLs. I will try to crank something out tomorrow at work, because this is simply too cool to pass up.

There is nothing web geeks love more than strutting their thorough knowledge of the subject. Knowing every single HTML 4 element by heart or to have each and every CSS property on the tip of your tongue doesn’t really help you in every day web development; understanding and realizing when to use each is more important.

But all of that goes out the window when it comes to quizzes like How Many HTML Elements Can You Name in 5 Minutes? or How Many CSS Properties Can You Name in 7 Minutes?

Out of the 91 W3C approved HTML 4 elements I identified 44, or 48%, in 5 minutes.

With CSS properties I did a little worse. getting 42 out of a possible 122 in 7 minutes, or 34%. I won’t disclose the simple ones I missed to give you a fair test when you take it. Most of them no one uses anyways!

How many did you get?

The popular online web magazine, A List Apart, conducted a survey of web professionals in April 2007 via their website. This week they finally released the results in a massive, though well designed, 80+ page PDF.

Being the first major survey of the web industry, I, and many others I’m sure, was anxious to see how I stacked up. The survey focused on the core areas of classification (gender, ethnicity, location etc.), education, work and job titles, and money. There are too many findings to even begin listing here but the PDF does a great job at explaining their conclusions with many, many graphs. Speaking of data, A List Apart is giving away all of the anonymized raw data for people to dig through and reach their own conclusions.

I can’t wait to see the results from the next survey to compare the changes in the industry from this year.

Earlier this morning a friend sent me a link he found on Reddit that pointed to a very large security hole on the Adobe.com website. It has since been patched but I thought I would take some time to explain a little bit about how it worked and how it could have been exploited further. The problem was due to a lack of sanitizing a URL path passed as a query string from the Shockwave download page to a Perl script for back end processing.

A hacker could use this flaw to enter a local server path in the query string and get the server to spit back information about itself like file directories, usernames and passwords, and even important encryption keys. The following URL used to return a long string of what appears to be garbled text.

http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=
../../../../../../../../../usr/local/apache/conf/ssl.key/www.adobe.com.key%00

What was happening was the path goes up to the root level of the server (the series of ../’s) and then into the local apache configuration files. Here the private encryption key used to encrypt SSL traffic would be exposed.

Whenever you conduct a secure transaction over the web, like giving a website your credit card information for a purchase, the traffic gets encrypted so it cannot be intercepted between the server and your computer. This keeps your confidential information safe and prevents a third party from sniffing your traffic to see what you are sending or receiving. You can tell you are using a secure connection by the yellow lock icon used in most browsers and the https:// instead of http:// in your address bar.

For this connection to work the server needs to have two keys; a public key and a private key. The public key is sent to your computer which it uses to encrypt a random number to send back to the server. A private key is kept on the server which is the only key that can decrypt the random numbers sent from your computer. From this transaction, both parties can generate key material used in encrypting and decrypting data. When an attacker looks at traffic over an SSL connection it looks like completely random and garbled text with no discernable pattern to it. The server and client can easily decrypt the garbled text putting it back to the original plain text.

Releasing the private encryption key of a web server into the wild compromises security allowing a 3rd party to easily decrypt SSL traffic or impersonate the server to perform a phishing attack. Adobe’s security hole wouldn’t directly break anything right away but a malicious user could use the flaw to probe for other weak spots and conduct an attack on those. Such attacks could expose personal data or intercepting sensitive traffic.

When coding a web application it is a good idea to build in a sanitize function that will strip out any non-alphanumeric characters like backslashes and periods. This can be done easily with a regular expression like replace(/\W/ig,””) that is common to most any programming language. This regular expression would change this ../../../../../../../../../usr/local/apache/conf/ssl.key/www.adobe.com.key%00 to this usrlocalapacheconfsslkeywwwadobecomkey00 . For more help with regular expressions check out this great tool I found.

For more information about SSL and Public Key Cryptogaphy check out Security Now Episode #34 Public Key Cryptography and Episode #85 Intro to Web Code Injection.

UPDATE: The Register has a complete write up about the security leak.

Most web designs use a classic header, columns, and footer layout, so there is no point in slaving over the details of the basic structure when you are starting a new design from scratch. YAML Builder makes the process quick and easy with a simple WYSIWYG online tool to build out your starting point.

You start out with a basic three column layout and from there you can customize it to fit your specific needs. Choose the doc type (I prefer HTML 4.0 Strict), optional base elements, and the number of columns to start out with. You can specify the widths of various elements choosing between a static width or liquid layout and the source order of the columns. Finally, the fun can begin by adding specific elements like headings, paragraphs, and lists to complete your basic web page. It should be noted that adding the specific content is not as straight forward as I would have expected. You need to click on the ‘Add +’ toggle in the upper left corner of the element before you can drop in child elements. Throughout the whole process you can click the ‘Toggle View’ button to see a real time preview of the final rendered code. When you are all done click the ‘Get Code’ button and the builder will display the HTML code, the base CSS code, and even an Internet Explorer bug fix CSS in a slick modal pop up so you can be off to a great cross-browser start.

YAML (Yet Another Multicolumn Layout) is an open source CSS framework meant to get you up and coding quickly while reducing the tedious detail work associated with CSS design. Download Squad recently reviewed the Yahoo CSS Grid Builder tool which does a similar thing but is much less polished. The YAML builder also offers a greater flexibility with your design as well as using less code in the end.

If CSS has left you a bit dizzy in the head or you simply want a quick place to start, the YAML builder is the best place to go to.

Security fanatic and host of the #1 Tech Podcast (Security Now) Steve Gibson, built his own e-commerce system in assembly language. This came from a need and lack of a 3rd party product that offered the features Steve needed. What really intrigued me while listening to Steve on Security Now #109 was how accessible he made his e-commerce system.

The web was designed with a server-client model in mind. This means a server has no means for keeping state, or what information you have previously sent to it. A server spits out pages and has no means to keep track of who sent what. The classic model to solving this problem involved setting client-side cookies using JavaScript to write and read information specific to that user that can be sent back to the server. Steve is a firm believer that scripting is inheritly evil and didn’t want to rely on his potential customers having JavaScript enabled in order to complete a transaction. Instead, Steve came up with a pretty clever method of keeping track of customers as they go through the checkout process.

Steve’s system collects the basic info on the first page of the process and then sends it to the server for validation like does the provided e-mail address look like an e-mail address and is the credit card number properly entered. Steve then takes the customer to a second page where he asks to confirm their e-mail as well as gathering additional data. The trick to keeping track of the previous data entered without using cookies is the use of a hidden field which Steve fills with the previous data encrypted using a secret key on the server and then digitally signed using a cryptographic hash. The result is all of the users data that is essentially useless outside of the server which can then be sent back to Steve, decrypted, and used to fulfill the order.

Now this might sound a little fishy if it weren’t coming from Steve Gibson himself. But this is the guy who wrote the Ultra High Security Password Generator, which is guaranteed to never give the same password twice and is truly random.

I have always had this idea of creating my own e-commerce site to sell my photography and hearing Steve talk about designing and building his own e-commerce solution was really inspiring. You can listen to the 95 minute podcast or read the complete transcript over at GRC.com/securitynow.

With so many HTML elements at our coding disposal it can be a daunting task to make sure we are using the right ones for the right task. For example do you use the <abbr> tag for abbreviations? Or <del> for deleted text (If it’s deleted then why do you need to mark it up anyway?)

Keryx has the mother of all semantic-info tables. Details include which standard the element is a part of, block/inline/table display, semantic meaning, usability & accessibility, best practice, SEO notes, notable browser issues, and unstyled appearance. PDF and Open Office downloads are included so you can print it out for reference. Make sure you’ve got plenty of ink and paper as this reference stacks up to 11 pages. Well, maybe it isn’t that big of a deal, but it is nice to have close at hand when you are marking up a page.