HTML and Beyond! - Understanding MX

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Macromedia's MX Vision

XHTML, ASP, JSP, ColdFusion, PHP, ASP.NET, XML, SOAP, Web Services - Tom Arah guides you through the MX jungle.

Trial downloads/special offers from Macromedia

For print-oriented designers, the arrival of the Web was a mixed blessing. The near universal, near-free and near-instant access provided an unbeatable new publishing medium but suddenly, instead of working in a familiar, wysiwyg DTP environment, designers were expected to be working in Notepad with an HTML reference book by their side. This was more like programming than design!

Salvation came in the form of Dreamweaver which offered a visual page layout approach that designers could relate to. Crucially though it never attempted to hide the underlying HTML and, over time, even the most code-phobic designers found that they were picking up HTML as they went along. In fact, thanks to features like colour-coding, tag references and a split view, designers soon found that they could achieve more, and more quickly, working directly with the page code. As we got used to it, directly controlling the early HTML's basic tags and attributes became completely natural.

Traditionally designers work directly to produce the end user HTML.

Over time of course HTML has developed, most obviously through the move to CSS-based (Cascading Style Sheet) formatting and layout, and the bar has been raised for the designer. And, although they might not think of it as programming, most have entered the real world of Web scripting, enabling the page to become an interactive medium. This probably began simply enough with an HTML form connected to a prewritten CGI script, or a simple Fireworks-created rollover or Dreamweaver pop-up menu handled through pre-written JavaScript behaviours. More advanced users will have taken things further investigating the way that a little customised JavaScript and CSS handling can bring a page to life through DHTML (Dynamic HTML) animation.

Producing an all-singing all-dancing DHTML-based page might seem like a long way from those first faltering steps with Notepad but in fact the underlying authoring model has remained remarkably constant. Look at your browser's Source View of any page out there on the Web and you'll see the HTML/JavaScript necessary to produce the viewable content - it's the same code that you see and work on in Dreamweaver's code view. In other words there's no difference between the HTML code on the average designer's hard disk and the code that produces the page in the end user's browser. The Web server is just used as storage, a neutral middleman between the designer and the end user

It's undoubtedly a beautifully simple system and, when you look at the diversity of the Web, there's no doubt that it's also amazingly successful. But now it looks as if it's all about to change! The average designer reading about the new release of Dreamweaver MX is probably feeling bewildered. HTML hardly gets a look in as instead the talk is all about XHTML, ASP, JSP, PHP, ColdFusion, ASP.NET, SOAP, XML and Web Services. What do they all mean and what on earth is happening?

The first point to make is that the traditional HTML coding model is certainly not dead. In fact Dreamweaver MX offers a number of new features designed to put HTML coding even more at the centre of Web design. The focus of MX is on tagging and with the new Choose Tag command you can inspect and select any HTML tag and then step through the new Tag Editor to set all attributes. Alternatively, if you are working directly in the Code Window, new Code Hints prompt you with possible options as you type. Enter "<font color ", for example, and a dropdown appears in which you can visually select a colour and the correct hexadecimal code will automatically be entered for you.

Dreamweaver MX offers even more code-centred power.

HTML certainly isn't dead, but it is changing rapidly and Dreamweaver MX recognizes as much. Direct HTML-based formatting, such as the <font> tag above, is now deprecated in favour of CSS styling. Accordingly the CSS Styles palette has been redesigned to make it much easier both to edit and apply styles. Even better, there is a new CSS Mode for Dreamweaver's text Property Inspector which only shows CSS-based options so that you don't inadvertently add unwanted direct HTML formatting.

CSS styling, especially when based on an external style sheet, has a number of immediate advantages in terms of consistency, maintainability and flexibility, but it has another important role. Moving all direct formatting away from HTML and towards CSS is a crucial step in the next stage of HTML - its planned demise. The current W3C-endorsed HTML 4.01 standard is intended to be the last. Instead the future lies with XHTML (eXtensible HTML). Essentially XHTML is an XML-compliant and so more rigorous version of HTML 4. In practice the changes are relatively minor - strict closing and nesting of tags - but the added rigour enables tighter and more reliable design control while at the same time enabling smaller and faster browsers. In other words predictable results across all Web-compatible devices - the designer's dream!

Of course it's essential to know where HTML is going and to plan for the future, but don't panic. For the average designer, there's little to be gained from moving to XHTML coding right now as the formatting and browser support will need to develop considerably before the designer's dream becomes a reality. And in any case Dreamweaver MX does everything it can to make the transition painless. In fact to create an XHTML page all you need to do is select the Make Page XHTML Compatible option from the File>New command (this can be set as the default). You can also convert existing pages with the File>Convert command.

Dreamweaver MX makes it simple to create XHTML-compatible pages.

In one way XHTML does presage the death of HTML but it's really better seen as just another evolution. But Dreamweaver MX also sees the introduction of a whole host of new coding languages that do move directly away from the traditional direct authoring HTML model. Underneath the HTML section in Dreamweaver's new File>New dialog is a section entitled Dynamic Pages and it's here that you are faced with a whole host of new choices - four ASP variations, two ColdFusion options, JSP and PHP. So what are they exactly, and what do they offer?

Of course to those high-end developers who invested in Drumbeat and then UltraDev some of these, ASP in particular, will be familiar faces but to the vast majority of designers they are completely new. Or rather most users will have regularly come across pages with the ASP, CFM, JSP and PHP extensions but only as they surfed the bigger sites on the Web, such as online shops and booking agencies, where the site tends to be the business. If you've ever taken a look at the Source code of these pages though all you see is typical directly-authored HTML. So what is different about these pages apart from their extensions - and what qualifies them to be called "dynamic"?

The difference is that the pages' dynamic quality isn't "client-side", that is in the end user's browser as it is with DHTML's JavaScript, but rather "server-side". What makes these pages dynamic is that they were each created on-the-fly by the server. ASP (Microsoft's Active Server Pages), JSP (the Java-based Java Server Pages), ColdFusion (Macromedia's recently bought up cross-platform alternative) and PHP (the open source affiliated PHP Hypertext Processor) are all server-side scripting languages. When the end user requests the page, the server sees the file extension and knows that it must process the embedded scripts before serving up the results as HTML to the browser.

With dynamic pages, the developer writes a script to turn a database query into the end user HTML.

So what can you do with server-side scripting? The difference compared to the fixed HTML model is that you can build in serious intelligence and serious customization to your pages. A typical starting example might be an ASP page with embedded JavaScript or VBScript that picks up the time from the server and then welcomes the visitor with a "good morning" or "good afternoon" (OK it's not time-adjusted for the user but you get the idea). That's a fairly trivial example but others, such as changing content based on the browser or checking zip codes or converting between currencies, might be essential to a successful business transaction. Suddenly, with intelligent processing, the site is no longer a static collection of pages but a "web application".

Currently much the biggest advantage of server-side scripting is advanced content control. With special commands for querying data held in databases, whole pages of data can be built up on-the-fly (and cached for speed). For enterprise level sites this is the only serious way to keep some sort of control and maintainability on the huge amounts of data that they make available.

Programmatic database querying might sound like the average designer's nightmare and in the past such server-side scripting was definitely cordoned off as a high-end developers' niche. With Dreamweaver MX however it moves centre stage. The UltraDev functionality isn't just bundled, it's completely integrated. To begin with, the new Site Setup wizard makes it relatively straightforward to set up a local testing server (especially as a developer's version of the ColdFusion MX Server software is included) so that you can view end results locally.

It's not just the initial set-up that MX makes simple. Dreamweaver MX offers a dedicated Application panel for its script-based pages. Using the Databases tab you create a connection to your database, with the Bindings tab you set up dataset queries to pull out the desired information to include on the page and with the Server Behaviours tab you can apply pre-supplied scripts to control and navigate through the data. Essentially you create an active template that the server will then populate. And with Live Data view you can design your layouts while viewing actual data.

Even better, as you build up your dynamic page template, all the behind-the-scenes programming code is automatically added to your HTML and available and editable in the Code View window. In effect you can pick up the server coding capabilities as you go along just as you did in the early days with HTML. And if you need to move beyond Dreamweaver's built-in behaviours, working directly with server code is almost identical to working with HTML as Dreamweaver MX includes the same code colouring, code hinting and tag reference features for each of its supported server technologies. And for ASP and ColdFusion there are even dedicated Tag Editors.

Dreamweaver MX fully supports server-side technologies.

Dreamweaver MX does everything it can to make the shift from static HTML to dynamic ASP, JSP, ColdFusion and PHP as easy as possible, but no doubt many designers are still thinking there's nothing in it for them. Let's admit it - designers' brains work differently to programmers and database developers. And while it obviously makes sense for enterprise-level sites and eCommerce sites to get designers and programmers working together, dynamic pages still only make up a small proportion of the sites out there.

Such a view though is very short-sighted. The number of ASP, ColdFusion, JSP and PHP pages out there might be tiny compared to the billions of HTML pages - but the traffic they handle is huge. Ultimately end users want fresh, customized, relevant and active content and server-side technology is the best way of delivering that experience. And while you might not currently think about your site content in terms of data shifting, there can't be a web designer in the world who hasn't wished for tighter central control with more flexibility and maintainability - exactly the advantages that database handling offers.

More to the point it's important to realize that the Web as a whole is changing and server-side technology with it. Again Microsoft is leading the way with its next generation ASP - ASP.NET. This extends ASP with features such as the dedicated DataGrid and DataList controls to provide enhanced database handling. In many ways though ASP.NET is best seen as an entirely new technology. This is immediately clear from the File>New dialog - where ASP settled for JavaScript and VBScript, ASP.NET now enables Visual Basic and even C# to run natively on the server.

Dreamweaver MX also supports ASP.NET.

Again I can feel the average designer feeling queasy. JavaScript was bad enough but C#! Hang on in there however, and it will soon become apparent why Microsoft is betting the company on .NET and how everyone including the standalone script-phobic designer will benefit. Before we get there however, things get even hairier. One of the advantages of more powerful programming languages is that they are object-oriented. What this means in practice is that rather than starting from scratch for each new job, sections of code can be encapsulated as reusable components. In other words you no longer have to reinvent the wheel.

That's a big advantage in itself, but what makes .NET revolutionary is that it enables the interconnection and interaction between these self-contained components over the web, turning those separate wheels into interacting cogs. And it's all very simple (if you're a programmer that is). In fact the underlying technology, SOAP, that underpins it actually stands for Simple Object Access Protocol. Essentially it boils down to a way of swapping XML data over the Web in a standard format that any module can understand, process and pass on.

And because SOAP is an open standard this means it isn't tied to ASP.NET but can be handled by other server side platforms such as ColdFusion and JSP. Suddenly rather than isolated proprietary islands each server is able to talk to others and the whole Web can become active. The potential is clearly enormous especially for business where the operator out in the field can enter details into their web device to automatically set in motion a whole cascade of separate web-based processes - making the order, ordering new inventory, billing and so on.

But what does it offer the average designer? Well to begin with, it's important to recognize that the Web is evolving. Over time it looks like the dominant metaphor is likely to change from browsing largely static pages to interacting with dynamic applications (this is even more strongly the case with Flash MX's live data interaction with ColdFusion servers). It's also clear that XML handling is moving centre stage.

So is it time to start learning C#? Thankfully not. For the average designer the real benefit of the .NET framework is that it enables programmers to use SOAP to make their components available to everyone as a Web Service. In fact converting a ColdFusion component into a universally accessible Web Service apparently involves the programmer adding just three words of code. The end result is that even standalone, code-phobic designers can take advantage of the work of the best programmers from around world.

And Dreamweaver MX makes the process of implementing the Web Service as simple as possible for the designer. If you're producing an ASP.NET or ColdFusion page and have an open link to the web you can use the new Components panel to connect to and open any XML-based WSDL (Web Service Description Language) file. Dreamweaver then takes care of the difficult business of producing the Web Service Proxy and simply presents the service's methods and properties ready to be dragged and dropped onto the page. After some minimal code customization, that's the Web Service up and running.

The potential uses of Web Services are almost unlimited.

The even better news is that seriously useful Web Services are already appearing and thanks to the use of yet another XML-based technology, UDDI (Universal Discovery Description and Integration) are easy to locate. So what sort of things can you do? If you visit a site like http://www.salcentral.com you'll see that current examples include staples such as user authentication, credit card validation and purchasing services but also less obvious functionality such as providing graphical fonts, maps, relevant content, relevant ecommerce links, translation and "a random lyrical phrase from one of the world's best singer/songwriters, Neil Finn"! The sky really is the limit and the full range of future applications is currently unimaginable.

Ultimately all these disparate acronyms and technologies - XHTML, ASP, JSP, ColdFusion, PHP, ASP.NET, XML, SOAP and Web Services - combine to mean just one thing: the high-end Web is preparing to move onto a new level. Under traditional HTML the underlying model was of a web of separate static pages loosely connected by hypertext links. Extending beyond HTML, the Web will be built as a true network of shared and distributed functionality and content. It's a radical paradigm shift and a lot for the designer to come to terms with. Macromedia's great achievement with MX (which incidentally and thankfully doesn't stand for anything) is that it supports all these competing and complementary solutions and introduces them as a seamless evolution of existing practice

Tom Arah

July 2002


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.