Video Streaming with an AJAX Video Gallery Part One

There's no denying that multimedia content enriches websites in both fun and business environments; just look at the recent success of sites like Youtube for example.  Video-enabled websites draw in visitors and help to ensure repeat-visits and an eager consumer base.  Streamed content can improve almost any website; you may have a small blog that your friends use to keep up with your day-to-day activities.  You could stream small videos of a recent snow-boarding trip to your friends without them having to download lots of data.  At the other end of the scale, you may own a DVD rental website.  Providing short trailers of the DVDs means that members don’t have to leave your site (and potentially forget to return) to watch a movie trailer and decide whether or not they want to rent the DVD.  The list of uses is endless, and the benefits are many so maybe it's time to video enable your site.

This tutorial will be the first in a series of articles, with this part discussing a mixed bag of technologies; in previous articles I've focused on three to four complimentary languages, such as HTML, JavaScript and CSS, with occasional XML drop-ins as and when required.  With the subject of streaming media, and AJAX however, there is a lot more that needs to be considered, such as encoding your video files for streaming, delivery of your media, the server-side script that interacts with the web page via AJAX as well as all of the associated HTML, CSS and JavaScript.  What I intend to do is walk through the process of enabling streaming media from scratch, looking at everything I need to do along the way to achieve it.  Some things will be looked at in less detail than others and not everything will be applicable to everybody.

Free Video on how to build a CMS with Advanced HTML Editor 2

Richard shows you how to use Advanced HTML Editor 2 to add and edit articles on your website. You can add your own text, images and markup editing your website has never been this easy!

Get the extension

Web 2.0 issues and workarounds

This article is the last in our series on Web 2.0 applications. If you’ve been reading the earlier articles, you’ll realise that Web 2.0 is a major new approach to building Web applications that mimic the responsiveness of desktop applications. Throughout the series, I’ve focused on Ajax-style applications and Flash/Flex rich internet applications.

In this article, I want to finish the series by looking at some of the issues that arise when developers start working with Web 2.0 applications. I’d also like to present solutions, where possible, to each of these issues.

There aren’t any resources to download with this article as we won’t be working through any examples. Rather, the article discusses some of the issues applying in the Web 2.0 approach. In particular, I want to cover the following issues:

• Bookmarking
• Use of the back button
• Search engine indexing
• Reliance on JavaScript
• Reliance on the Flash Player plug-in
• Reliance on XSLT

Some of these issues arise because of the way Web applications use a “single page” application model. Others arise because of Web 2.0’s heavy reliance on client-side scripting and plug-ins. Whatever their source, these issues have been addressed fully on a range of Web sites. Rather than reproduce the content from these Web sites, I’m going to provide a summary of the issue with some general observations. Then I’ll point you to some of the useful resources I’ve found to deal with them.

I’ll start with a look at issues relating to bookmarking a position within a Web 2.0 application.

Ajax Frameworks, Toolkits and Libraries

Using a Web 2.0 approach to building applications like Ajax can create many advantages. Users get to work with more responsive Web applications that are closer to desktop applications than their Web 1.0 counterparts. Users don’t have to wait around for pages to load and everyone’s happy.

Or are they? The advantages of Ajax come with some costs. The Ajax approach relies heavily on JavaScript so developers of these applications need to have strong skills in this area. Developers can be caught out with some very onerous scripting duties. Ensuring that Ajax-style applications work in all major current browsers can be a big task, especially as one of the main components of Ajax, the XMLHttpRequest object, is implemented in two different ways. Add to that a need to support or fail gracefully in older browsers and you’ve given many developers a giant sized headache!

One solution to these cross-browser scripting problems is to use an existing Ajax framework, toolkit or script library. These frameworks hide the code and provide great cross-browser solutions. Some of the commercial products even provide a full development environment.

In this article, I want to cover some of the most popular browser frameworks and script libraries that are available. I won’t cover the frameworks that link to specific server-side technologies or the article would end up being very long indeed!

I also want to walk you through a simple example of how one library, Sarissa, can make scripting a little easier. As with the other Ajax examples that I’ve worked through, you’ll need to run this example through a Web server. On my Windows XP machine, I’ll use IIS (Internet Information Systems) but you could use any other Web server. I tested this example in IE 6 and Firefox 1.5.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Basic Ajax for Beginners in ASP.NET 1.1

When the .NET framework first emerged a few years ago it was a monumental upgrade in technology for developers, especially those working with current ASP web technology. With a plethora of new features, a true object oriented framework and revolutionary development methodologies developers could create robust applications in a short amount of time in comparison to other available technologies.

Over time, as with any technology, some of the shortcomings of the .NET framework were exposed and it was once again time for change. With the release of the .NET framework 2.0 web development has once again undergone a radical change. Most cutting edge web development today is focused on AJAX and client side functionality in order to create a more desktop like user experience from the web browser.

With some of the costs involved in utilizing the latest technologies some developers are still using the .NET framework 2.0 predecessor: 1.1. Visual Studio is an expensive development tool that not all firms can afford to purchase and are therefore left a small step behind the current technologies.

Fortunately the .NET 1.1 framework is still highly utilized and supported. Because of this there are a lot of companies building support for Ajax style development using .NET 1.1. One such product is called MagicAjax which is an open source library that you can use in your ASP.NET 1.1 projects to implement Ajax functionality.

Ajax Case Study: Real Estate Listings – Part 3

Welcome to the final part of this three part series of articles that works through an Ajax application case study. In this case study, we’ve been building a simple application to display real estate listing using an Ajax approach. This style of application allows data to be refreshed in a Web page without reloading the entire page. In this article, you’ll see how we can completely change the page content without a reload.

In the second part of the article we:

• Loaded the XML and XSLT documents containing the list of properties for sale
• Created handler functions to process the loaded documents
• Applied the XSLT transformation in two different ways and displayed the transformed content
• Added a JavaScript function call to the stylesheet

In this article, we’ll finish off the application by:

• Understanding the new XML and XSLT files
• Displaying individual property details
• Adding a back link
• Adding dynamic sorting to the list

You need to have completed parts 1 and 2 of the series so that part 3 will make sense. As before, I’ve assumed you’ve got an understanding of XML and some of the basics of the Ajax approach.

Synchronous Randomization with JavaScript Arrays

The random number methods of Math object have been present in JavaScript for ever and have been put to good use time and time again in all manner of scenarios.  One thing that the random method can easily do is display a random image on, say, your homepage.  It may sound like a small thing but this randomization can be put to incredibly good use with just a little bit of planning and an easy bit of JavaScript.  This one-part article will discuss the use of a multidimensional array and a basic randomization script to create a section of a page that randomly displays a series of images, complete with synchronous roll-overs, links and captions.  This could be a useful addition to any site and provide a visual incentive for visitors to select products from a clearance or special offer section of your online store for example.  Best of all, the code is compact, minimal and entirely client-side so if you don't have full access to server-side script languages on your web-hosts server, you can still implement it.

A lot of people, especially those new to JavaScript coding, shy away from arrays thinking them complex and unnecessary.  For multidimensional arrays that fear is cubed.  But arrays of any kind are the cornerstones of many of the most useful applications of JavaScript, and have featured in one way or another in most of my previous articles.  In addition to a solitary text editor, you'll also need a stock of images to make the resulting page work.  I've included the images that I've used in this tutorial to save you the hassle of finding and formatting images of your own.  Feel free to use them in any context as they are free from copyright or royalty restrictions.

Google Maps

Introduction

Google API features many useful tools for web masters and web application developers alike.

One of them is Google Maps – an excellent framework provided by Google for free (presently Google Maps do not even include advertising – see Google API Terms of use).

In this article we will look at some examples of how this feature can be incorporated into your web pages.

Generating the API Key

To use Google Maps API, you have to generate a unique API key which would work only for the domain and the directory it has been generated for.

If you try to use this key on some other domain the map will not work and the page will display a JavaScript warning to let you know that the API key and the domain do not match.

This however should not be a problem since number of the API Keys is presently unlimited.
To generate your API Keys follow this link http://www.google.com/apis/maps/signup.html

Ajax Case Study: Real Estate Listings – Part 2

Welcome to the second of this three part series of articles. In this series, we’re working through a case study by building a simple Ajax-style application that manages real estate listings. The data for the application comes from a series of XML documents that are transformed with XSLT stylesheets. Users can sort the list of properties for sale and view the details of each listing.

Speedy Feed Reading With Ajax And Magpie

There are a lot of buzzwords on the lips of web designers/developers these days as certain technologies and concepts become popularized for the exceptional power, convenience, and flexibility they offer developers and users alike. Ajax and RSS have rapidly floated to the top of the trendy, buzzword list, and we’ll dive into them all simultaneously in this article as we build a scalable and speedy feed reader that uses Ajax to serve up RSS content from the sites of some web design rock stars. Our feed reader will easily scale to show as many or as few feeds as you like.

You can take a look at the finished version first to get an idea of what you are in for at http://aarronwalter.com/sandbox/ajax-rss/. The complete source code is available for download at http://aarronwalter.com/sandbox/ajax-rss/code.zip. 

A Quick Primer Before Getting Started

Before we get started, a little primer on some of these topics. By now you probably know that RSS, which stands for “Really Simple Syndication” in most circles, is a convenient way of syndicating content of all kinds from one site to another. It’s a standardized way of writing XML to encapsulated different content so it can be read by various applications on all sorts of platforms and devices. If you are interested in more details on RSS, swing by Wikipedia for an in depth explanation (http://en.wikipedia.org/wiki/RSS).

Ajax Case Study: Real Estate Listings 1

In previous articles, we’ve looked at aspects of Ajax-style applications. Using Ajax in Web applications allows you to build pages that don’t need to refresh when new data is loaded. Instead of the user clicking a button and waiting for the entire page to reload, they can continue to work while part of the page refreshes.

Simple AJAX accordion

In this article we will continue on the subject of AJAX interface widgets. Today’s topic will be a simple Accordion component – an interface element allowing user to collapse and expand portions of content (further referred to as “panels”) organized in a column-like layout. External content can be loaded dynamically as the container expands (the AJAX part).