Archive for October, 2010

CS5 Updates to Style Rendering Toolbar

In Dreamweaver CS5, the Design View Style Rendering Toolbar was given a couple new features.

Note that the Style Rendering Toolbar is not displayed by default, so you may need to turn it on using the View > Toolbars menu.

Text Size

These are buttons to quickly adjust the font size on the page. This is a temporary adjustment to emulate font zooming as done in browsers so you can quickly see how this may affect the layout of your page.

Increase, reset, and decrease text size buttons

  • Increase Text Size (by 15%)
  • Reset Text Size to original size
  • Decrease Text Size (by 15%)

Pseudo-class Rendering

These radio buttons are used to temporarily change the filtering of CSS pseudo-class styles in your page. By default, browsers display the :link styles and hide all of the other pseudo-class styles until a certain action takes place. This is a temporary change in the way styles are cascaded so you can quickly see how the other pseudo class styles are rendered in your page.

Pseudo class buttons

  • :l – :link
  • :v – :visited
  • :h – :hover
  • :a – :active
  • :f – :focus

Notice that it’s not possible to hover over more than 1 link at a time, so this feature can cause your page to render in a state that can never be seen in a browser. This is just for doing a quick, temporary check of how styles are rendered, not to represent valid link states in your page.

All of the Style Rendering Toolbar functionality is also available through the View > Style Rendering menu.

Adobe announces the HTML5 Video Player widget

HTML5 has received a tremendous amount of buzz, much of it driven by the potential for plugin-free video. However, the limited browser support for the HTML5 <video> tag has forced web designers to scramble for a solution that would work across platforms as well as browsers.  To help customers overcome these challenges, Adobe has released an easy-to-use, totally CSS-customizable solution that shifts gracefully from the HTML5 <video> tag to the Flash Player when the tag is not supported. The shift takes place regardless of the screen—from phone to monitor to TV.

The HTML5 Video Player widget, now available through the Adobe Widget Browser, works with or without Dreamweaver CS5. Code generated from the widget plays video in the best possible player for the requested platform using a range of video codecs. Based on the Kaltura open source library, the HTML5 Video Player widget is fully cross-browser compatible with support for Internet Explorer, Firefox, Safari, Chrome, and Opera. Moreover, the player is completely customizable with industry standard CSS techniques.

You can run the Adobe Widget Browser directly from within Dreamweaver and, once you’ve set it up, insert the generated code and files for the HTML5 Video Player widget with point-and-click simplicity. But if you’re not a Dreamweaver user (shame on you), you can also download the Widget Browser independently. (You’ll need to install Adobe AIR first.)

If you’re new to the Widget Browser, you can get up to speed quickly with this video from Lynda.com.