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.
Join us for an Ask a CS Pro session with David Powers on the hot topic of HTML5 and CSS3 in Dreamweaver CS5. David will present and take your questions live via chat.
THIS FRIDAY, September 24th.
Session begins at 11am Pacific Daylight Time.
Location: my.adobe.acrobat.com/askcspro. Guests will be allowed in the meeting room 10-15 min before session begins
Learn more about David Powers here:
Facebook invite here:
Note that the session will be recorded and posted to the Creative Suite Facebook page Notes section soon after the event under “Ask a CS Pro”.
In Dreamweaver, you can manually change the Code Coloring colors that are displayed in Code View in the Code Coloring Category of the Preferences dialog.
This is easy when you just want to tweak a few colors, but changing your entire coloring scheme to a dark background requires changing many different settings, which can be a lot of work.
Fortunately, I found the Dark Code Colorization for Dreamweaver extension written by Tom Sramek which does the work for you. Thank you for sharing, Tom.
The Dreamweaver team is happy to announce the release of 3 extensions this week!
We got feedback on a number of issues that we could solve via extensions, so we packaged them up.
First is the HTML5 pack for Dreamweaver CS3 and CS4. We released a version for CS5 only and we heard from users that they wanted it too. This extension contains the code hinting for:
- New HTML5 tags
- New attributes and values for existing tags.
- Many CSS3 features.
- Some -moz and -webkit CSS properties.
Multi-screen Preview, Media Queries and Starter Layouts were not included since they were not fully backwards compatible.
So hopefully this will help DW users get into all the new HTML5 goodies.
Second, some CS5 users were sad to see the Validator feature go away. We got a lot of requests for this feature, so we packaged up the files to reinstate it.
After installing, you will get the old File > Validate > Markup back in the menu and the Results panel.
Fair warning: We removed it because it wasn’t totally accurate, so check with the W3C before you go live. People like this feature to find bugs in product, before they get to W3C.
And lastly, DW CS4 users that are trying out the Widget Browser, and specifically the new Spry UI widgets are getting a warning about missing widget code. DW CS4 isn’t recognizing these new widgets as Spry widgets. So we made an extension with a new translator that recognizes the new widgets and suppresses the warning.
So we hope that these new extensions will solve some issues for users. Let us know if you have other things you would like to see. We read every e-mail that comes through the wish list and it is how we saw these issues come up, so let us know!
Dreamweaver Quality Engineering
Dreamweaver CS5 introduces the Inspect Mode in Live View. This can be turned on (among other ways) using:
View > Inspect
Once you are in Inspect mode, the element under the mouse in Live View is “inspected”. Box Model highlighting is displayed in Live View for the inspected element, the element is selected in Code View (both static and Live Code) and in the Tag Selector, and element details are displayed in all Panels that track selection (such as the CSS Panel Current Mode).
This allows you to move the mouse around the page to quickly discover the page structure. Click in the page to feeze the inspection (i.e. selection) on the current element. Click again to exit Inspect Mode.
This feature uses the Live View “hover” mechanism to determine the current element. This makes it impossible to inspect any container element where the container has no padding and has only 1 child, and the child element has no margins. There are no pixels over which you can hover the mouse to choose the container element for inspection.
To handle this case, simple keyboard navigation is provided using the left-arrow and right-arrow keys:
- In Inspect Mode, place mouse over any element.
- Without moving mouse, press left-arrow key to change inspection to parent element.
- You can keep navigating to the parent all the way up to the <body> element.
- Pressing right-arrow key returns inspection to previous child element. Once the mouse is moved to a different element, then the list of “previous” child elements are forgotten.
Give this a try and let me know how this works for you.
Adobe and Dreamweaver Community Expert David Powers takes us through some of the great new PHP code-hinting features in Dreamweaver CS5. When it comes to Dreamweaver and PHP, there is no better person to consult!
You can watch the video here.
This morning Adobe announced the new HTML5 pack for Dreamweaver CS5. The HTML5 pack is an extension that adds support for HTML5 and CSS3 in Dreamweaver. If you’ve been watching the technology news at all lately, then you’ll know that this sort of improvement marks a great advance for any Dreamweaver user working in this fast-changing world of smart phones and other handheld devices.
The HTML5 pack introduces great things like multiscreen preview (which lets you see what your web page will look like on phones, tablets, and desktop computers simultaneously), HTML5 and CSS3 code hinting, and even a few HTML5-compliant starter layouts to get you up and running with HTML5 layouts quickly.
There is an article by yours truly that provides an overview of the whole pack on the Dreamweaver Developer Center, and there’s a great video by the Dreamweaver team’s own Jorge Taylor that takes you through the steps of working with the HTML5 pack in Dreamweaver.
The HTML5 pack for Dreamweaver is available today on Adobe Labs.
Here’s cool trick that should help save you some time in Dreamweaver:
- In the Files Panel, use: right-click > New File to create a new document
- By default, you’ll get an HTML file named something like "untitled.html", and you’ll automatically be in Rename file mode.
- Change the file extension so it’s "untitled.css", and hit Enter to accept the new file name.
- Open the file and you’ll see that DW changed the contents so it’s the default CSS (not HTML) file!
So there’s no need to use the New Document dialog when you want to create a new document other than the default.
Note that this only works from the initial Rename mode. Also, this is not new for CS5, but I just re-remembered it today, so I thought I’d share.
The Dreamweaver product sometimes removes old features that are no longer used enough to justify their maintenance cost. If the feature can be still be provided as an Extension, the the DW Team tries to provide that code on an “as is” (i.e. unsupported) basis.
Start by looking in this folder to find some old Server Models:
Also, check the Dreamweaver Exchange:
Then search for the Feature name. For example, you can find the old table-based Starter Pages here:
Are there any other old features that you’d like to be able to install as an extension?