Explore the Premium Content

Spry Presentation

Creating even a simple online presentations can be challenging and frustrating, especially if you aren’t a web design “guru”. If Flash is not your cup of tea and Power Point is out of question you may want to consider Dreamweaver CS3 with its new “coolest toy” –Spry.

In this article we will work with two Spry features: Spry widgets (Spry Tabbed Panels to be more specific) and Spry Effects to build a simple online presentation. We will use the first one to create the presentation interface and then, after adding some content, we will take advantage of Spry Effects to add some “sizzle” to each “slide”.

Search Your Site with JavaScript, XML and CSS part Three

In part two of this series we ended up with having a small box residing at the side of the screen into which search terms could be entered. If results were found, we displayed another small box below the original box that contained links to the pages in which the search term was found. While this was an adequate display of the results, that's all it was – adequate. We can improve the functionality and usability of the search engine by changing it so that the results are displayed on a page of their own. This article will focus on the steps required in order to achieve this.

Working with the Spry Menu Bar Control

It's time to get familiar with one of the major new features of Dreamweaver – Spry.  This is the name given to the new AJAX framework in Dreamweaver CS3 which enables you to drag a series of useful predefined controls directly on to the page.  One of these controls is the Spry Menu Bar and this tutorial is going to look at how to use it for best effect and how to use another of the Spry controls – the Spry XML Data Set – in conjunction with it to produce a dynamic and attractive navigation menu quickly and easily.

Need to create all kind of great web site navigation menus? Cascading Drop down Menus, Mega Menus, Popup or Context Menus. Menus that have great display animations, are CSS based and fully cross browser compatible, which makes them search engine friendly?

Then you need the Universal CSS Navigation Menu

Spry Chat Part Two

This article is the second and the final one in the series on building online chat application using Dreamweaver CS3 Spry framework. While Part One was all about Spry and building the interface foundation this time around we will concentrate on making the interface a little more attractive, as well as developing the server-side functionality required to send and receive chat messages. Finally we will set up appropriate file permissions to make sure our application can read and write the information to/from a file on the server.

PHP is used for all back-end operations in our chat application (without any database functionality involved).

Working with the YUI Calendar Control

In a recent article, I looked at making one the Yahoo! User Interface (YUI) utilities work for you in the form of a news scroller.  In this article, I'm going to explore the functions of the of the library's controls – the Calendar control. The utilities provide different types of functionality, which you are free to implement in whatever way you want. The controls are slightly different, consisting of a set of predefined objects that enable user input and should be used pretty much as they are. They are still highly configurable however and you have a broad range of options when adding them to your pages.

Spry Chat Part One

I think many would agree that the most exciting news about Dreamweaver CS 3 is the cool Spry framework.  If you don’t know what that is then here is my quick definition:
Spry is a framework for building basic AJAX functionality in Dreamweaver.

If you want to learn more about the concept I would suggest referring to Dreamweaver Help (that is if you own Dreamweaver CS 3), which I won’t be citing here, or visiting Adobe web site.

This two-part series is designed as a hands-on tutorial in which you will build a chat application utilizing Spry Data and Validation features.

Leveraging the YUI; A Functional News Scroller Part Two

In part one of this tutorial, we looked at getting the basics of the scroller in working order. We've created our XML data source and extracted the relevant information from it and displayed it on the page. In this part, we're going to refine it initially by making it actually look like a news scroller. We'll then add some additional features that make it pause scrolling when the mouse pointer rolls over a news item, and deal with the issue of linking to or displaying the full story information in some way.

Leveraging the YUI – A Functional News Scroller Part One(updated)

Most of you will probably already know what the Yahoo! UI Library (YUI) is and what it can do, but for those of you that don't I'll give it a brief introduction.  The YUI is an extensive collection of utilities and controls, written in JavaScript, that you can use to build rich, interactive and attractive web applications.   The scripts make heavy use of AJAX and DOM scripting, and are supported across a range of browsers making them ideal for use in many design situations.

The YUI can be downloaded from Yahoo and used free of charge for personal or commercial websites.  There is a wealth of resources and documentation for them on the Yahoo Developer Network site http://developer.yahoo.com/yui/#support so it's well worth having a look there.  Additionally, Yahoo also provides a service whereby you don't download the files yourself, but instead reference minimal versions of the files on Yahoo's servers.  This way, Yahoo will serve the files for you.

Using MooTools to Fix a Cluttered Layout

Simple is in.  Clean is cool.  And amidst the increasing number of home brew web designers, the issue of a simple, clean layout isn’t just in and cool it is important.  Whether these designers admit it or not, clean websites make money and increase usability for the user.  The examples are limitless:  Google, Blogger, CSSBeauty, 456 Berea St, YouTube, Joomla, Flickr, and my personal favourites: BaseCamp, MezzoBlue, TextLinkAds, RubyOnRails, and MooTools.

Yahoo! Ajax Toolkit: Autocomplete

Some time ago good folks at Yahoo! have put together a whole toolkit of UI components called “UI Library” and made it available to the developer’s community for free.
In this article we will take a look at one of the tools from this great collection – the AutoComplete component.

Since you are reading this it would be safe for me to assume that you know what AutoComplete is. That’s right, it’s the handy dropdown populated with automatic suggestions that appears when you start typing in a text field.

If you are a savvy developer (and even if you aren’t) you can go right ahead and download the toolkit, install it, read the documentation, look at the examples and finally set it up to work with your application.

Check also DMXzone's own Ajax AutoComplete Dreamweaver extension to get field auto completion right out of the box! 

Video Streaming with an AJAX Video Gallery Part Three

Welcome to part three of the video streaming tutorial.  In part two we got the JavaScript file including the main AJAX function written and working, and added some CSS to position our player selection buttons and logo's.  This part of the tutorial is going to finish the tutorial with some more CSS to style the AJAX-generated buttons, write the server-side ASP code that returns the list of available files in the chosen format and add a function that plays another video when its button is clicked.  We'll begin with the ASP code.

A Little ASP

As wonderful as our AJAX is, it won’t do anything without the data returned from the server and in order to generate that data, we need some script to run on the server.  ASP provides exactly the functionality we require and can happily run on the server and pass the required data back to the AJAX function.  One simple function in our ASP file will do everything we need.  In a text editor, begin by opening the ASP file and setting the variables the function will need:

Video Streaming with an AJAX Video Gallery Part Two

In part one of this series, we created an initial HTML page and some associated CSS that allowed visitors to our site to select a video clip to watch.  We also created three additional pages (one for each clip) that provided a method of selecting which format the visitor  wanted to watch the video in, giving a choice of either; Windows Media Player, Apple Quicktime or Real Player.  In this part we're first going to look at the CSS needed to layout each of the individual video clip pages, and the JavaScript required to show the embedded player of the visitors choice, before moving on to look at a way of using AJAX to generate a list of other video clips in the same format and display a method for viewing these additional videos.

Some Additional CSS

Open up the videocontent.css file in your favourite plain text editor and add the following selectors to layout the section of the page in which the visitor selects the video format they want to watch the video in.  If you remember, when we coded the HTML, the class and id attributes were already defined.  The buttons used to select the desired player, and the logo's linking to download sites for each of the players are held in a containing div element, and then in a columnar layout.  The container div should be styled as follows using a pretty standard ID selector: