Chance to beta test Dreamweaver

If you’re frustrated with the way Dreamweaver works, have ideas about how to improve it, or simply want to help test future versions, now’s your chance. Alejandro Gutierrez, who took over as Dreamweaver product manager a couple of months ago, is inviting applications to join the Dreamweaver prerelease (beta) team. You can find details of how to apply in the Adobe Dreamweaver Team Blog.

Alejandro’s blog post contains a link to an application form that asks for details of your experience. Judging from the questions, it looks as though he’s particularly interested in people that create responsive web designs or design for mobile. I won’t link directly to the application form because I’m not sure how long this offer will remain open. Update: Applications are now closed, but you can still express an interest.

Joining a beta team has both rewards and drawbacks. The main reward is getting early access to the next version of a program, and the opportunity to influence how it works. But it’s far from being a free ride. You have to install new versions of the program on a regular basis—and that means uninstalling the previous build (although you can keep your current version of Dreamweaver on the same machine). You’re also working with incomplete features, and part of your job is to spot bugs and report them in detail. Most frustrating of all is that you’re sworn to secrecy. You can’t even reveal the fact that you’re part of the team. But you do get the opportunity to communicate directly with the engineers.

I don’t know how many people Alejandro is looking for, but if you fancy the challenge of testing the next version of Dreamweaver, head on over to the Dreamweaver blog, and apply. The application period closed on 28 November, but you can contact Alejandro by email to make a late application. See his blog post for details.

Posted in Dreamweaver | 1 Comment

Fireworks CSS Properties panel gets gradient wrong

Adobe Fireworks CS6 has a very useful CSS Properties panel that automatically generates the CSS from a selected object. It even lets you choose which browsers you want to target with CSS3 properties that might still need browser-specific prefixes. Unfortunately, it generates the wrong value for the standard linear-gradient() function. It gets the browser-specific versions right, but whoever coded the panel fell into the trap of believing that all was necessary was to use the same value for the standard, unprefixed function. With many CSS properties, that works, but not with linear-gradient().

The reason lies in the way gradients were first implemented by browsers. It was decided to use the polar coordinate system, in which 0° points right and degree values increase counterclockwise, as shown in the following figure.

Polar coordinate system

This is different from the standard way of measuring angles adopted by the W3C, which follows compass bearings. In other words, 0° points straight up, and degree values increase clockwise, as shown in the next figure.

Standard degree system in CSS

Because the starting point is different, and the angles are measured in the opposite direction, the only common angle is 45deg.

The following <div> elements demonstrate the problem. The gradient should transition vertically from green at the top to orange at the bottom. If your browser supports the standard, unprefixed version of linear-gradient(), the gradient in the <div> on the left will run from right to left. The gradient on the right should look correct in all browsers that support CSS3 gradients.

To work out the correct angle for the standard, unprefixed linear-gradient() function, you need to remember that the value generated by Fireworks CS6 starts at the right, and goes counterclockwise. So 90deg needs to be changed to 0deg, and -90deg becomes 180deg.

I’m told that Adobe is aware of this bug, and that it’s scheduled to be fixed. But with Firefox 16 and IE 10 now supporting the unprefixed version of linear-gradient(), you need to edit your styles right away because the gradients will be going in the wrong direction.

Posted in CSS | 1 Comment

Source code for Beginning CSS3

Many apologies to anyone who’s been looking in vain for the source code for Beginning CSS3. The files were supplied to Apress several weeks before the book was published, but apparently there was some internal problem that prevented them being uploaded to the URL listed in the book. I’m told that they should be there in the next day or so. You can also download them from here (2MB zip file).

Posted in Books, CSS | 3 Comments

Dreamweaver Update: HTML5 Goodness, but Forms Suffer

Adobe has fulfilled its promise to Creative Cloud subscribers by releasing an exclusive update to Dreamweaver CS6. If you have a subscription to the Creative Cloud and haven’t yet installed the update, you can get it by going to the Help menu and selecting Updates. I like a lot of the new features, most of which improve support for HTML5 elements. But I don’t like the changes made to the way form elements are created.

What’s happened is that the Input Tag Accessibility Attributes dialog box has been removed, so the input element is inserted on its own without creating a label. Adobe’s rationale for doing so is to simplify the workflow by reducing the number of dialog boxes that appear. In one sense, this is a laudable idea, but the handling of labels for input elements has been poorly thought out. The Input Tag Accessibility Attributes dialog box prompted you to add an ID and label to the element before it was created. As a result, Dreamweaver inserted something like this:

<label for="firstname">First Name: </label><input id="firstname" type="text" name="firstname">

Now, what you get is just this:

<input id="textfield" name="textfield">

You need to change the name in the Property inspector, and then add the label manually. Changing the name in the Property inspector isn’t a problem, because you’re probably going to make other changes there. However, the Label icon is right at the bottom of the Insert panel, and it either wraps the input element in <label> tags (not ideal from the accessibility point of view), or it inserts an empty pair of tags and leaves the focus in Code view. I’ve discussed these problems with Adobe at length, and they agree that the workflow needs to be improved. It’s a real pity that they couldn’t do so before the update was released.

That complaint apart, what’s in this update?

If you’ve adopted HTML5 or are thinking of doing so, there’s a lot to like. Some of the old cruft has been removed from the Insert panel/bar to make room for HTML5 elements. HTML5 video and canvas get pride of place in the Common category. Frames and tables have been given the boot from the Layout category, which is now home to HTML5 semantic elements, such as <header>, <nav>, and <article>. There’s a new Media category that has options for Edge Animate compositions, and HTML5 video and audio, as well as Flash movies and video.

Close integration with Edge Animate makes inserting an animation a breeze. It’s a two-step process. First you zip up all the assets for the animation in Edge Animate by publishing it as an OAM file. Then you choose where you want to insert it in a page in Dreamweaver, and Dreamweaver imports everything and upacks it automatically into a dedicated folder. Inserting HTML5 video and audio is also quick and easy. As long as you use the same basic filename for all formats, Dreamweaver detects all of your source files when you select just one. For example, if you have files called myvideo.mp4, myvideo.webm, and myvideo.ogv, you need select only one of them, and Dreamweaver automatically creates <source> elements with the correct MIME types for all of them.

The big news for Mac users is that Dreamweaver now has a Live Search field at the top of the Files panel. This hooks into Spotlight, the native Mac search engine, to search for matching filenames and text within  files in the currently selected site. A pop-up panel displays the results, which are continually refined as you type the search value. The panel has separate sections for matching filenames and matches within text. Both sections display a maximum of 10 results, but you can access all matches within text by clicking Find All to open the Results panel. Live Search is exclusive to the Mac version of Dreamweaver. It’s not clear whether there are plans to develop a similar feature for Windows, because it relies on Spotlight.

Another bonus for Mac users—at least those who own a MacBook Pro with retina display—is that this version of Dreamweaver is optimized for high-pixel-density displays. As a result, icons and other features are displayed crisply.

There are several other enhancements in both Windows and Mac versions. One particularly useful one is the ability to drag and drop files from Windows Explorer or Mac Finder into the Files panel. And JavaScript developers will be delighted to know that you can debug your scripts by outputting console.log() to the Site Reports panel.

Overall, I think this is a good update for Dreamweaver, but I think it’s a pity it has been spoiled by the poor workflow in forms. I have created an hour-long video workshop explaining all the new features for video2brain. I’ll post details of when it’s available.

Posted in Dreamweaver | 4 Comments

Source files for PHP Solutions

Several people have written asking what has happened to the friends of ED website because they can’t find the source files for PHP Solutions, 2nd Edition. The site was merged with that of its parent company, Apress, a long time ago, and is no longer online.

The source files for PHP Solutions, 2nd Edition, are available from the book’s page on the merged site. I’ve put a notice to this effect on Amazon. It’s also prominently mentioned on the book’s updates and corrections page on this site. However, the information obviously hasn’t got through to everyone who needs it, so I’m posting it here with a subject line that will hopefully be picked up by search engines.

Posted in Books, MySQL, PHP | 44 Comments

My verdict on Dreamweaver CS6

Adobe has officially announced details of Creative Suite 6 (CS6) and the Creative Cloud. What’s particularly significant about this release is that it represents the last chance to skip one or two versions and still benefit from reduced upgrade pricing. Owners of CS3, CS4, CS5, and CS5.5 have until the end of December to upgrade to CS6. After that cut-off point, upgrade pricing will be available only to owners of the immediately preceding version. In other words, to upgrade to CS7 you’ll need to pay full price if you don’t own CS6.

Alternatively, you’ll have to switch to the Creative Cloud subscription service. The Creative Cloud has been very attractively priced, and it holds out the prospect of early updates and some nice bonus extras, such as Typekit fonts, but it has the disadvantage that once you stop paying, you can no longer use the software. I’ll leave it up to you to weigh up the pros and cons of the Creative Cloud. In this post, I’m going to concentrate on what’s new in Dreamweaver CS6 and what I think of it.

If I were to sum up this new version in a single word, I think that “evolutionary” is the most appropriate. The main focus is on CSS improvements, including:

The other main features are a complete overhaul of Dreamweaver’s FTP client, and integration with PhoneGap Build.

Video Training Courses

I have recorded two video training courses about Dreamweaver CS6. The first one is a New Features Workshop, which contains more than three hours of videos showing how to use all these new features. It should be available from video2brain later this week. The other video course is an in-depth treatment of web design and development with Dreamweaver CS6, aimed mainly at beginners and intermediate users. It will be published jointly by Adobe Press and video2brain sometime later. I’ll post more details when they’re available.

Web Font Management

The new Web Fonts Manager in Dreamweaver CS6 installs web fonts into your personal configuration folder, making them available in all your Dreamweaver sites. Installing a font is very simple. You just launch the Web Fonts Manager from the Modify menu, and click Add Font. In the dialog box that appears, click the folder icon to the right of one of the font fields, and select the font. Dreamweaver detects all formats of the font in the same folder, and automatically fills in all the remaining fields, as shown in the following screen shot.

Add Web Font dialog box

Installing a web font makes it available in Dreamweaver’s code hints and dialog boxes. You can also build custom font stacks that incorporate fonts that you have installed. When you select a web font in the CSS Styles panel or CSS Rule Definition dialog box, Dreamweaver copies the font files to a new folder in your site root, and creates a style sheet with the necessary @font-face rule. Web fonts aren’t rendered in Design view, but they’re fully supported in Live view.

My only reservation about the way that Dreamweaver handles web fonts is that it uses a separate style sheet for each @font-face rule. However, it’s easy enough to cut and paste the rules into the top of your main style sheet.

CSS Transitions

Dreamweaver CS6 makes it easy to create CSS transitions—simple animations that smooth the transition from one state to another, for example if you scale up an image when hovering over it. The quickest and simplest way is to use the new CSS Transitions panel, which creates both the transition properties and the styles for the end state in a single operation. The CSS Rule Definition dialog box supports the creation of more complex transitions, such as those triggered on a nested element. Both methods generate not only the standard properties, but also browser-specific prefixed versions. This is a great time-saver because you need browser-specific prefixes for Firefox, Internet Explorer, Opera, and WebKit-based browsers.

I like this feature a lot, but it seems odd that you need to use the CSS Rule Definition dialog box to create more advanced transitions. In my experience, advanced users rarely touch that dialog box. However, if a style rule already exists, you can just click the Edit Rule icon in the CSS Styles panel without having to go through the hassle of the New CSS Rule dialog box.

Multiple Classes

This is something that Dreamweaver users have been demanding for a long time—the ability to apply multiple classes to an element. Hallelujah, Adobe has finally listened. Just select the element in the Document window, and choose Apply Multiple Classes from the Class menu in the Property inspector to open the Multiclass Selection dialog box. This presents you with a list of all classes in your site, as shown in the following screen shot.

Multiclass Selection dialog box

Select the check box alongside each class that you want to apply to the element. If you haven’t already defined the class, you can add it to the space-separated list in the field at the bottom of the dialog box. A long overdue, but nevertheless very welcome improvement.

Fluid Grid Layout

This should be the star attraction of Dreamweaver CS6. In some respects, it’s stunning, but it feels like a work in progress rather than a polished feature. Inspired by Ethan Marcotte’s Responsive Web Design, this feature allows you to specify three fluid grids for mobile, tablet, and desktop layout. Each grid can have 2–24 columns, and you can specify how wide the grid should spread across the screen, as shown in the following screen shot.

New Fluid Grid Layout dialog

You then add fluid grid layout div elements to build the structure of your page in the mobile layout. Next comes the brilliant part—you can resize the elements and snap them to the grid, and move elements to sit alongside each other. All this is done in Design view or Live view, and Dreamweaver automatically calculates the width of elements and margins to four decimal places. The CSS uses percentage widths and floats, so it produces layouts that adapt to any screen size. It’s most definitely not a throwback to the bad old days of Dreamweaver’s Layout mode. The styles are constructed on the basis of “mobile first”, and work even in browsers that don’t understand media queries.

Where the Fluid Grid Layout feature falls down is in Dreamweaver’s inability to indicate which media query controls a particular style rule. Another problem is that it doesn’t support nesting elements to create more complex layouts. It’s to be hoped that these shortcomings will be addressed in an updater. One of the ideas behind the Creative Cloud subscription setup is that new features or improvements to existing ones can be added as soon as they’re ready without needing to wait for the next major release.

jQuery Mobile Theming

The integrated version of jQuery Mobile in Dreamweaver CS6 has been updated to the 1.0 stable version (not 1.1). There’s also a new jQuery Mobile Swatches panel that’s designed to make it easy to change the look of individual elements (see screen shot).

jQuery Mobile Swatches panel

Multichannel FTP

Let’s be honest. In the past, Dreamweaver’s FTP client was a dog. Not any more. It now supports multichannel transfers, and can even download at the same time as uploading. Orange arrows indicate items queued for transfer. When the transfer begins, the arrow turns green. And if you’re transferring a large item, hovering over the filename displays a tooltip of how much of the file has been transferred. With Dreamweaver CS5.5, it took more than 90 minutes to  upload a WordPress site on my internet connection. Now, it’s more than ten times faster.

The FTP error messages are also more meaningful. No one is likely to buy Dreamweaver CS6 for its FTP client alone, but this is a major improvement to the program.

PhoneGap Build Integration

The way that Dreamweaver CS6 supports building native apps for iOS, Android, and other mobile operating systems using HTML, CSS, JavaScript, and the PhoneGap framework has changed completely. It no longer installs the Android software development kit (SDK) and emulator. Nor can the Mac version hook directly into Xcode and the iOS simulator. Instead, there’s a new panel that uploads your files to PhoneGap Build, an online service that automatically packages applications for iOS, Android, webOS, Symbian, and BlackBerry. Using PhoneGap Build is much easier than working with a simulator, because the Dreamweaver panel displays a QR code that lets you load the app directly onto your testing device. However, you need to build the configuration file manually in XML, and there’s no longer any code hinting in Dreamweaver for PhoneGap plugins. So, although the integration of PhoneGap Build is a definite improvement, it feels as though the engineering team didn’t have time to polish some important details.

You can now build an app for iOS on either Mac or Windows, but in order to compile it, you need to create a valid signing key and upload it to PhoneGap Build. The signing key must be created on a Mac. You also need to register with Apple as an iOS developer and pay an annual fee.

Conclusion

I like the new features in Dreamweaver CS6, but I have to admit that they don’t have me jumping up and down with excitement. Maybe that’s because I felt CS5 and CS5.5 were such strong releases, and I was hoping for a similar performance this time. The Fluid Grid Layout and PhoneGap Build features had the potential to be outstanding, but fell slightly short of the mark. As a result, I’d give Dreamweaver CS6 only 7 or 8 out of 10. It’s good, but it could have been so much better.

In fairness to the Adobe engineering team, I understand that a huge amount of work was devoted to solving the long-standing problems with FTP and to converting the Mac version of Dreamweaver to run on Cocoa, the native application programming interface (API) for Mac OS X. The conversion to Cocoa should result in a more stable experience on a Mac, combined with the knowledge that Dreamweaver CS6 won’t suddenly stop working when Carbon is deprecated in Mac OS X 10.8 (Mountain Lion). However, the conversion work means that less time was available to develop or polish other features.

I’ve long felt that the idea of releasing more than a dozen complex programs according to a rigid timetable was impracticable. Photoshop, Illustrator, and Fireworks effectively sat out of the last upgrade cycle, which gave them 24 months to prepare for CS6. Dreamweaver hasn’t had that luxury. As a result, the Fluid Grid Layout and PhoneGap Build integration have some rough edges that could probably have been eliminated with more time. The message that I keep hearing from my contacts in Adobe is that moving to the Creative Cloud subscription model means that new features and improvements to individual programs can be released as soon as they’re ready. The problem is that to benefit from the updates, you need to switch to the subscription model. Anyone buying a perpetual licence will have to wait for the next full version to get the new features.

Getting new features as soon as they’re ready makes a lot of sense in the light of the speed at which the web is changing. What’s far from clear is how successful Adobe will be in persuading Creative Suite users to switch to the subscription model. It’s a big gamble for Adobe.

Posted in AJAX/JavaScript, CSS, Dreamweaver, Video | 66 Comments

Updater for Dreamweaver CS5.5

Adobe has released an updater for Dreamweaver CS5.5 that updates the version of jQuery Mobile to the stable 1.0 version. It also updates the jQuery Mobile starter pages. You can download it from the Dreamweaver updater page, and install it with the Extension Manager.

Posted in AJAX/JavaScript, Dreamweaver | 1 Comment

PhoneGap update for Dreamweaver CS5.5

Adobe has just released an extension for Dreamweaver CS5.5 that radically changes the way you create native apps using HTML, CSS, and JavaScript with the PhoneGap framework. Instead of using a local emulator for Android and iOS, it uploads your files to PhoneGap Build, an online service that automatically builds an app file for Android, iOS, webOS, Symbian, and Blackberry.

I haven’t had time to test the new extension in Dreamweaver CS5.5, but I have used PhoneGap Build on many occasions. It’s simple to use and seems to be very reliable.

You can grab hold of the PhoneGap Build extension for Dreamweaver CS5.5 and read how to use it on the Adobe website. To use the extension, you need to create an account on the  PhoneGap Build site. A basic account is free, but if you’re a serious developer, you’ll need to choose one of the paid-for accounts.

Note that the extension works only with Dreamweaver CS5.5. It won’t work with earlier versions of Dreamweaver.

[Update: 4 April 2012] Adobe has withdrawn the extension for “technical reasons”. From what I understand, there should be no problem using the extension if you have already installed it. As the Adobe blog says, “The functionality of the extension, which integrates PhoneGap Build with Dreamweaver, will be available in the upcoming version of Dreamweaver CS6.” Adobe has started releasing sneak previews of various CS6 features, as well as announcing that anyone buying CS5.5 now will qualify for a free upgrade. So, it can be safely assumed that CS6 is getting very close.

Posted in AJAX/JavaScript, CSS, Dreamweaver | 2 Comments

Learn PHP basics by video

My new video course, Introducing PHP, is now available from video2brain. It’s aimed at complete beginners, and assumes no prior knowledge of PHP or any other programming language. However, the course should also be useful as a refresher for anyone who has dabbled with PHP, but hasn’t quite “got it”.

As well as showing how to install a PHP development environment on both Mac and Windows, I explain all the basic structures in PHP. The course then brings everything together in a practical project, showing how to process an online form and send the data by email. To make the form both secure and user-friendly, I show how to validate user input and display error messages when the wrong type of date is input.

The videos follow the same philosophy that underpins my books—I teach you not only how to do something, but also why it’s done in a particular way.

The full cost of the course is $39.99, but you can get a 20% discount by using the code PHPD20 at the checkout (the discount code expired at the end of March). Alternatively, you can access the course as part of a video2brain subscription, which gives you access to more than 150 courses for as little as $14.99 a month.

Update [23 July 2012]: The 20% discount code PHPD20 has been extended until 30 September 2012. The course is available from video2brain.

Posted in PHP, Video | 9 Comments

Why I’m no longer a member of the London Dreamweaver Meetup

In November last year, I wrote about my hopes for the relaunch of the London Dreamweaver Meetup Group. I originally agreed to give a talk on 26 January about creating a simple jQuery Mobile site in Dreamweaver. The plan was to try to find a location reasonably close to central London, and I left matters in what I thought were the capable hands of the new organizer, Reynold Chung.

About a week before my planned talk, I was shocked to receive an email reminder from the Meetup website advertising the meeting as being about Balsamiq, jQTouch, QUnit, advertising, and the App Store. I immediately contacted Reynold and told him this bore no relationship to what I was planning to talk about. He said it didn’t matter. As an established author and Adobe Community Professional, I felt it did matter. People who had signed up for the meeting would be expecting me to talk about those subjects, something which I was not prepared to do—for the simple reason that most of them are out of my sphere of expertise. So, I decided to cancel. Reynold then bombarded me with a series of direct messages on Twitter. One did include an offer to change the description on the website, but I found his attitude aggressive, so decided to leave a 24-hour cooling off period.

The following day, I sent a lengthy email explaining why I had been offended, but saying I was still willing to give the previously arranged talk as long as a revised title and description were published. I know that Reynold received the email, because his account sent an automatic receipt. However, the only other response was an email from Meetup informing me that I had been removed from the group.

The way things have turned out is a pity. As I told Reynold and his predecessor, Nigel Muris, in November, I don’t have time to organize a Dreamweaver user group myself. But I am willing to share my knowledge either through formal presentations or troubleshooting sessions. I can also make arrangements with my publishers for free or discounted copies of my books.

Reynold has changed the name from The London Dreamweaver Meetup Group to The Adobe & Web Open Source London Meetup Group. However, the website still uses the Dreamweaver URL, and the group’s description refers frequently to Dreamweaver. At one point, it even uses the name, London Dreamweaver (Zero coding) Meetup Group. Anyone hoping to use the most recent version of Dreamweaver without a strong understanding of HTML, CSS, and JavaScript (or at least jQuery) is likely to be seriously disappointed.

In spite of using Adobe in the revised name, it’s not an official Adobe user group. I know that Reynold has applied for official recognition, but Adobe’s position is that the organizer must first show that it’s a viable user group. It hasn’t got off to an auspicious start.

Posted in Dreamweaver | 3 Comments