FOSS v proprietary software: Website creation
Recent years have seen huge changes in internet use, and therefore in the challenges presented by modern website design. Software developers are consequently racing to catch up and provide website design, creation and management tools that address these changes.
The advent of cloud computing, eCommerce, Web 2.0, the growth of mobile apps and the introduction of HTML5 -- a standard that's still under development -- have all had a huge impact on web design and the tools to implement it. Not only do web developers now have to deal with browser interpretation issues, but they also have to build sites that smoothly adapt to a range of different form factors. Pages must present equally well on a smartphone or tablet screen, in either vertical or horizontal mode, as they do on a large, wide-screen, desktop display.
The entire business of website creation has changed and now encompasses a range of disciplines -- graphic design, web design, programming, system integration, audio editing and video editing, for example. Larger commercial web sites use Content Management Systems (CMS) such as Drupal and Joomla! along with a variety of programming tools and languages -- including PHP, Ruby on Rails and JavaScript -- to provide custom features.
In this context WYSIWYG web site authoring tools, such as the earlier versions of Adobe's Dreamweaver, might seem to be outmoded. In this feature we compare Dreamweaver -- once an application that dominated web site creation -- to a variety of open-source tools available for web design.
Dreamweaver's background
Dreamweaver began life in 1997 as a product of Macromedia, a companyacquired by Adobe in 2005. Version 1.0, a Mac-only application, was released by Macromedia in 1997. A Windows version followed in 1998, and the last Macromedia version appeared in September 2005. In 2007 Dreamweaver replaced GoLive 9 -- Adobe's WYSIWYG HTML editor of the time -- in the Creative Suite family, and HTML5 support was added to Dreamweaver in April 2011. The current version is Dreamweaver CS6 (a.k.a. Version 12.0) and runs on Microsoft Windows XP (SP2), Vista (SP1) and Windows 7. It is Cocoa-native optimised for better performance on Mac OS and runs on Apple Mac OS X 10.6 or 10.7.
A full boxed copy of Dreamweaver CS6 costs £301 (or £291 to download); upgrades cost £94.51 (£91.33) from CS5.5, or £190 (£184) from CS3-CS5, or it can be had on subscription for £14.29 per month. Dreamweaver CS6 is also available as part of the £1,509 Design/Web Premium and £2,223 Master Collection suites, and via a £39 per month Creative Cloud annual subscription (an introductory £22.23 per month offer is available for owners of CS3 or later products until 31 August). All prices quoted are excluding VAT.
Dreamweaver features
Dreamweaver CS6 with the Designer workspace and the page Split button selected to show the page design view on the right and the corresponding code view on the left
One of the most attractive things about Dreamweaver -- and perhaps the reason for its success -- is its ability to pair a WYSIWYG page view with the parallel code view. Originally Dreamweaver only supported HTML, providing all the functionality needed to build web pages by inserting tables, forms, links, images, text and so on from menu selections. The HTML code behind any page feature created in the page view was -- and still is -- automatically generated, but Dreamweaver also allows for direct code editing.
Since acquiring Dreamweaver seven years ago, Adobe has expanded both its code-editing abilities and its automated features. By adding multi-format site-building tools, Adobe has eliminated the need to write different versions of website code to handle different layouts or form factors. Several tools for previewing and testing Dreamweaver code provide the necessary debugging functions.
Dreamweaver is a powerful programmer's editor/IDE, with support for a wide variety of web-related languages. It's also a page-element-based design editor with automatic page code generation and preview tools. This dual personality makes it attractive to both programmers and web designers.
Dreamweaver workspaces and views
Adobe uses the concept of a workspace comprising several viewing and control panels in a number of its products. The visibility, size and position of these panels are user-adjustable, and particular configurations can even be named and saved. Adobe also provides a number of preset configurations, suited to particular tasks, which can be selected using the Views drop-down menu.
Dreamweaver's Views menu lets you select from a number of task-related Workspace presets
Further flexibility for each tabbed page is provided by four buttons -- Code, Split, Design and Live -- on the top left of each page below the page tab, that allow those views to be selected for individual pages.
Creating a new document and Fluid Grids
Selecting the Fluid Grid Layout in the New Document window shows the settings for multi-format layouts
There are various options when starting a new site design, but one of the most likely selections is a multi-format site design that will be readable on a range of device types. Adobe's Fluid Grid Layout greatly simplifies the setup for such a site: initially you can set grid columns appropriate to a device, with rows and divided rows in the grid defined by creating Div tags (div for division) as containers for page content. Div tag widths can be manipulated in the page view and will snap to the nearest column widths.
An introductory Fluid Grids video is available from Adobe TV.
CSS & animation with CSS3 Transitions
The Media Queries panel lets you specify different CSS files for different display formats; media queries, which can be site-wide or page-specific, are generated automatically when the default presets are selected
New in Dreamweaver CS6, support for CSS3 Transitions allows animations to be created without recourse to JavaScript. For example, CSS3 transitions can be used to create rules that automatically expand sections of a page whenever the mouse cursor hovers over them. An Adobe TV video is available that explains this in greater depth.
Editing styles directly in the page view results in Dreamweaver automatically generating an appropriate CSS file.
Dreamweaver and code editing
The Coder or Coder Plus views rearrange the Dreamweaver workspace for code writing and editing
All the code displays in Dreamweaver use colour highlights to show which portions of the code are HTML, CSS, JavaScript and so on -- an approach that makes it much easier to follow and debug code. During code editing Dreamweaver provides predictive suggestions as you type, so you don't have to thoroughly memorise all the required tags, attributes, functions and syntax. Rather than accurately type long property strings, you can type just a few letters and accept a suggestion, which saves time. Built-in error checking also makes coding a lot easier. The current version of Dreamweaver includes support for HTML5, CSS3, XML, ActionScript, ASP.Net C# & VB, JavaScript, JSP, PHP and ColdFusion.
Dreamweaver and page debugging
The Dreamweaver CS6 Multiscreen preview menu
The Multiscreen preview showing a web page rendered for the three main form factors -- Phone, Tablet and Desktop
The live view in Dreamweaver CS6 uses the latest WebKit open-source browser engine to render web pages as they might appear when read by a 'generic' browser. For more accurate 'real-world' views of a page, Adobe provides an online service called BrowserLab, which is integrated with Dreamweaver. Once signed in, web designers can check the appearance of their site designs in a range of browsers via a temporary upload to the BrowserLab servers.
Dreamweaver & mobile apps
For mobile-specific projects, Dreamweaver incorporates jQuery Mobile (which is built on top of the jQuery JavaScript framework) for rapid design and development of a mobile interface.
New in CS6 is the further integration of jQuery Mobile Themes and Swatches. This feature greatly automates creating the appearance of a new mobile application. See the Adobe TV video Enhanced jQuery Mobile Support for more information.
Dreamweaver CS6 also integrates use of another subscription cloud service, the PhoneGap:Build framework to translate HTML, CSS and JavaScript coding into native code apps for iOS or Android devices. Completed native mobile apps can be downloaded from PhoneGap onto the user's local PC (Dreamweaver must be running on an Apple Mac to run iOS apps in emulation, while Java DK and Android SDK must be installed to run Android apps in emulation); alternatively, they can be loaded direct to a developer's mobile phone simply by pointing its camera at an on-screen QR Code.
Dreamweaver's PhoneGap:Build service panel with Emulate, QR Code and Download buttons
PhoneGap is an open-source Apache Software Foundation project and has a number of industry contributors including Microsoft. Its original creator, Nitobi, was acquired by Adobe in October 2011.
Opening a new jQuery Mobile/PhoneGap document in Dreamweaver
Starting a new mobile app
The new mobile app switched to Live View
The new mobile app with a theme applied from the swatches panel
KompoZer: an open-source web authoring system
KompoZer is the free and open-source application that most closely resembles Adobe's Dreamweaver -- albeit the Dreamweaver of several generations back. It's a WYSIWYG, cross-platform, web authoring system based on earlier code from a web authoring system called Nvu, which in turn is based on Netscape Communicator.
The KompoZer workspace with the application menu bars along the top, site directory on the left and the page design view on the right
KompoZer with the Source tab selected to display the page source code
KompoZer superficially resembles Dreamweaver, offering WYSIWYG web page creation and editing. It supports HTML4, XHTML1, PHP, JavaScript and CSS (with a CSS editor) and is based on Gecko, the layout engine within Mozilla. It has no CMS integration or features to cope with different browser form factors, but it can be used as a CSS and code editor. It's a cross-platform application that runs on Linux, Windows and Mac operating systems.
The KompoZer CCS stylesheet editor
Pages can be previewed in a browser by setting up KompoZer (Edit / Preferences/Options / Applications) to open pages locally using a browser installed on the system. With the path set in Preferences, clicking the Browse button on the icon menu bar will open the browser and display the page that's currently open in KompoZer. Preferences for other external applications can also be set in the Applications panel.
Application options in KompoZer
KompoZer also has a View / Preview menu selection, which suppresses the red highlight cell framing to present a more browser-like view of a page.
Open-source CMS: Drupal, Joomla!, WordPress
Content Management Systems (CMS) allow publishers to create, organise and control publication assets in a database. Templates can be set up that allow editors to assemble assets into new website pages. When published, assets are assigned to appear at certain locations on a page, but complete pages are assembled dynamically only at the moment they are requested by a reader's browser. Different readers may see different versions of the page -- with for example different adverts -- and these may be location- and/or client-aware.
Once a CMS is set up, if standard or existing templates are used, users can start publishing pages in a matter of minutes. With most CMS, content creation and editing is separated from the design aspect of the pages. In Drupal, for example, page design is controlled by a Theme -- a folder of CSS files and PHP templates. Web designers and programmers use tools such as Dreamweaver to create and edit these CMS themes. There is a good article on using Dreamweaver to edit Drupal theme files on the Adobe developers website.
Commercial CMSs are available, but these are usually expensive and the web is currently dominated by open-source products such as Drupal, Joomla! and WordPress. Drupal is used by the US White House, for example, to publish its website.
The origins of the top three open-source CMS are surprisingly disparate, Drupal got started in 2000 as a messaging and news board for students at the University of Antwerp. Joomla! began in 2005 as a split from the Mambo web design project and 2003 saw the launch of WordPress as a typography enhancement program. It later developed into a blogging tool, which perhaps explains its high 'market share'. WordPress is now a full PHP- and MySQL-based CMS.
If you're considering using a CMS to manage your website, an interactive CMS comparison site called the The CMS Matrix (part of The Compare Stuff Network), will suggest suitable products based on users' requirements.
For a wealth of information specifically on open-source CMS, there is Opensource CMS. According to this site, WordPress currently has 55 percent of the open-source CMS 'market share', Joomla! 20 percent and Drupal 11 percent. These statistics are collected on an ongoing basis by a web analysis application called Wappalyser. According to the WordPress statistics web page, WordPress is used by over 72 million sites.
The Wappalyser analysis client can be locally installed on most browsers and, as browsing sites with Wappalyser installed shows, relatively few websites today are published using Dreamweaver.
Other open-source tools
Aptana Studio 3 and Bluefish are two well-known open-source web development applications.
Aptana
Aptana was aquired in January 2011 by Appcelerator, a California-based company that claims, with its cross-platform development framework Appcelerator Titanium, to provide "the leading platform for rapidly developing native mobile, desktop, and tablet applications using Web technologies".
The Aptana Studio 3 opening display
Aptana Studio web page preview
The free and open-source Aptana Studio 3 is based on the Eclipse development framework and can be used to build Ajax web applications. It integrates support for HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python, plus many more languages and standards all within the single environment, and is available for download from the Aptana website. Although it's a programming editor, it does have a Preview that provides a browser-style view of web pages.
Bluefish
Bluefish, currently at version 2.2.2, is an advanced open-source, GPL, programmers' text editor with many tools for the development of dynamic websites. It supports -- to name just a few -- HTML, XHTML, CSS, XML, PHP, C, C++, JavaScript, Java, Google Go, Vala, Ada, D, SQL, Perl, ColdFusion, JSP, Python, Ruby and shell. Bluefish is cross platform and runs on Linux, Solaris, Microsoft Windows and Mac operating systems.
The Bluefish code editor user interface
Bluefish gets around the WYSIWYG preview problem by simply linking to an external browser to view code as it will appear on a finished website.
Conclusion
The website design and maintenance requirements of large enterprises -- particularly those engaged in online commerce or publishing -- are very different from those of individuals or small businesses. Enterprises are likely to need a dynamic site with a large and growing database of assets managed via a CMS; individuals or small businesses, on the other hand, may only need a site comprising a few static pages to act as a contact point and shop window. Having said that, individuals running their own blogs can still take advantage of a fully-fledged CMS such as WordPress.
Much of the internet's infrastructure depends on open-source software such as Apache HTTP Server, which celebrated its 17th birthday in February 2012, and a great deal can be achieved using a variety of freely available open-source tools. However, Adobe's Dreamweaver has a lot to offer. It's relatively expensive, of course, and won't appeal to committed Linux users, but for those involved in a broad range of commercial web design tasks the investment should pay off quite quickly.
Adobe has made considerable efforts to keep Dreamweaver abreast of current web-design practice, and the latest CS6 release has some very clever productivity-boosting features. It does verge on the Swiss Army Knife of web tools, though, and hardcore programmers might prefer to use a code editor integrated with a particular development framework such as Eclipse.
Adobe continues to expand its portfolio with more web-centric applications. For example, the company owns and develops Business Catalyst, a company that provides a complete Software as a Service (SaaS) solution for building and managing a business website. Adobe purchased Business Catalyst in 2009 and its services are integrated into Dreamweaver. As mentioned ealier, Adobe also acquired PhoneGap creator Nitobi last year.
Finally, Adobe has recently launched Muse, an entry-level WYSIWYG web-authoring tool that allows graphic designers to develop websites without needing to dirty their hands with coding.