Explore the Premium Content

Design and Accessibility: Part XI

Accessibility: Colour-blindness Issues II

In the previous design and accessibility article, Linda explained colour-blindness, including the genetics issue that explains why more men than women suffer from colour deficiencies in their vision. She talked about the four different and most common types of inherited red-green colour-blindness, and used examples to demonstrate how the Web appears to those individuals. In this article, she explores other forms of colour deficiencies, including more inherited colour-blind conditions, more rare colour conditions, and problems created by aging and disease. As in the previous article, Linda offers visual samples on how the Web appears to these individuals. Additionally, she examines what other designers suggest in order to compensate for colour-blindness, and why their suggestions seem too extreme.

Read More

CSS: It’s Not Just For Screens Any More

Dreamweaver, and in particular, the new Version 8, is nothing short of a CSS wonder.  Many of us who are “mostly application” in mindset stuck up our noses that there wasn’t more for the application side in the new release, but I, for one, am learning to appreciate some of the CSS improvements that Macromedia has made in the new version. 

In my E-Book, I talked about the new Style Rendering toolbar and the ability it gives the developer to toggle between screen views for various audiences. 

In this article, I would like to expand on the Style Rendering toolbar and show you how to create a site that is for more than just the web audience.  I have created a simple unstyled page that is a home page for a fictional candy store and have attached that unstyled page and the images used in a zip to this article.  Our task here will be to create the CSS for that example from scratch.. three times.  First, we will create the “screen” stylesheet that the average web user will view in their browser.  Then we will create a stylesheet for the user who wants to print a page that is more print friendly than the screen view.  And finally, we will create a style sheet to render the same content for the handheld device.  Mobile is one of the fastest growing areas for the content developer.  It’s about that we paid this arena of business some serious attention! 

Read More

Building a Data-Driven Navigation Menu

Navigation menus are the forefront of just about any website, whether the site is a dynamic database driven application or simply a personal homepage. They lead and direct your user around the pages of your site and provide the basis for your usability experience. A site that is difficult to navigate is a site that will not be popular with your users.

When working with ASP.NET you have a lot of extra flexibility when working with a navigation menu. In most development languages, your menu needs to be copied/pasted onto all of your pages, or at the very least you had to use include statements to place the menu at the top of every page. This process is very redundant and cumbersome.

ASP.NET offers the ability to create user controls, which are custom chunks of HTML and code-behind server logic which can be dragged/dropped onto any .aspx Web form in your application, making the development of a component such as a navigation menu quite easy, and very reusable.

In addition to a custom user control, you can add in your own server logic to extend the menu control even further and allow it to be data-driven from a database of your choice. This way your menu is rendered on-the-fly dynamically from records read from a database table which can be modified in real time.

In this tutorial we will build a sample application to demonstrate this powerful technique. We will build a custom user control to house our navigation menu which can be dropped onto any page in our application. And we will implement functionality to make our user control database driven from an Access .mdb database, rendering menu items and submenu items dynamically.

Note: This tutorial requires Visual Studio .NET and if you wish to change/customize the database provided you will also need Microsoft Access.

Read More

Design and Accessibility: Part X

In the previous design and accessibility article, Linda shared how a viewer’s user agent processes forms, and why some processors are better than others from accessibility and usability standpoints. In this article, she moves from behind the Web page to the front, where the colour-blind user might face some problems with Web images. What are these problems, and how can Web designers and/or developers address these issues in their work? Linda first explains colour-blindness and then focuses on red-green colour-blindness in this article – the most common form of inherited colour-blindness. She explains why more men exhibit colour-blindness than women, and she offers examples of how normal viewers and red-green colourblind viewers see the flickr Website. Finally, Linda brings some solutions to the table for Web designers who might want to address this issue.

Read More

Creating a slide show with Flex 2.0 Beta 2

In the previous article, I introduced you to the Flex 2.0 Beta and showed you how to create a very simple calculator application using Flex Builder. As you’ll recall, Flex allows you to build Rich Internet Applications without using Flash software. Flex uses an XML vocabulary called MXML to describe interfaces that you can then wire up with ActionScript. Flex 2.0 Beta 2 works with ActionScript 3.0.

In this article, I’m going to show you how to create a photo slide show application with Flex. The slide show will display photos, one-by-one, using a fade-in effect. The photo filenames come from an external XML document. While building this application, you’ll have a chance to learn about the ActionScript 3.0 language. It will also cover the new approach to working with XML - E4X.

Specifically, if you work through this article, you’ll learn how to:

  • Create an interface in Flex Builder
  • Load an external XML document into an XML object
  • Navigate the XML object to extract information
  • Add styling to a Flex application
  • Add a fade-in effect

You will only be able to complete this tutorial if you have downloaded and installed the Flex framework and SDK from http://labs.macromedia.com/flexproductline/. That means you’ll need to be using Windows with Flash Player 8.5 installed. I’m not going to go through the setup of Flex—you can find that in the previous article.

Let’s make a start!

Read More

ASP.NET Image Gallery, Uploader & Thumbnailer Part 2

Welcome to part 2 of our demonstration image gallery creator, image uploader and thumbnailer application built in ASP.NET. As we’ve seen so far, we’ve been able to provide thumbnailing and image sharpening methods using built in objects that are part of the .NET framework.

To summarize, in part 1 we created an ASP.NET application called ImgThumbail and setup a folder structure for uploading images to the web server. We then added an ImageUtil class which can receive HttpPostedFile objects and create thumbnails for the images returning the binary content which can be written to the file system. We also implemented a method which uses a math algorithm to sharpen the image.

In part 2, we’ll continue building upon our application by developing the user interface and putting our ImageUtil class into action. We’ll build a web page which allows a user to upload an image to the web server, and then display those images dynamically in an HTML table constructed on-the-fly through code.

Once again Visual Studio.NET is required for this part of the tutorial, and both VB.NET and C# code samples will be provided.

Read More

ASP.NET Image Gallery, Uploader & Thumbnailer Part 1

Working with images is a requirement of many applications, from business software to simple personal web pages. There are hundreds of different implementations of this feature, some good, others not so good. When using images in ASP.NET applications you have the added benefit of making things a little easier on yourself by using a more object oriented approach so that you can create components that you can reuse in other applications.

Depending on the requirements of your images module it may be necessary to look towards third party components. There is literally hundreds of ASP.NET third party controls which deal with imaging, image uploading and image manipulation. Before you implement a costly third party component it’s important to understand what you can and cannot do with the existing .NET framework.

The purpose of this article is to show 3 basic imaging techniques you can implement in your applications which all make use of the existing .NET framework classes. These three techniques are: uploading, thumbnailing, and dynamic display (gallery).

For this article we’ll build a simple demonstration ASP.NET application where you can upload an image into a specific folder on the web server, have that image automatically thumbnailed on the fly, and then have the image thumbnails rendered into an HTML dynamically. These are the basic building blocks of most applications utilizing images.

Note: Visual Studio.NET is required for this tutorial. Both VB.NET and C# code examples will be provided

Read More

Design and Accessibility: Part IX

Accessible Form Problems and Solutions II

In the previous design and accessibility article, Linda dissected how accessible and usable forms can be designed for Websites in the HTML and/or XHTML document. In this article, Linda sharpens the difference between Web designers and Web developers, as designers may not always understand the scripting and processing that enables forms to function. To help in this regard, Linda shares how forms are processed by the viewer’s user agent, and why some processors are better than others. She then discusses why the W3C and the PAS-78 (U.K.’s new Publicly Available Specification) currently maintain negative perspectives about developers who use JavaScript applications and – similarly – about designers and clients who insist upon using these applications. To address this negativity, Linda provides fall-back solutions for designers and/or developers who want to continue to use JavaScript as a stand-alone application or as an addition to other technologies like AJAX in their Websites.

Read More

Building Rich Text Editor. Part I

Introduction

The new wave of buzz-word technologies has shaken the web community once again “splashing” old-timers and newbies alike with their share of hype and confusion.
There is no surprise in the fact that some of the cool “new” ideas will turn up as nothing but marketing fluff. History repeats itself: once again the “mummies” are being “re-painted”, re-labeled, and resold as something brand-new and out of this World.

At the same time some of the “re-invented” technologies, which have been previously used just occasionally have now been re-evaluated and put to work by many developers.

It is mainly due to the improved browser support as well as affordable prices on high speed Internet and higher end machines that we can now dig out those “dusty old tricks” waiting on their shelves for the better times.

One of those “new technologies” is the designMode DHTML feature or MSHTML editor as it is called in IE. It has been implemented in Internet Explorer since version 5. Using this feature you can in no time build your own Rich Text editor creating an illusion of a desktop application being embedded into your web page.

Although the feature has been around for a few years it hasn’t been used as often as it could be for a very apparent reason: the lack of support by browsers other than Internet Explorer (PC only).

A year ago, or so, guys at Mozilla have decided that the feature was too sexy not to include in the new foxy Firefox, the version 1.0.2 has come out with the designMode built-in.

Things got even better when Opera 9 beta hit the market with the support for the feature. Although still buggy and in the beta, the chances are the new Opera will have the full designMode support.

This makes it “three”! There are still Safari (IMHO not a browser :-)) and Internet Explorer for Macintosh, but with the long-awaited departure of the latter in January 2006 and the great new Firefox for Mac, Safari is no longer a threat.
With the three major browsers now supporting the feature we can now safely put it into our toolbox.

In this series of articles we will use the designMode feature to build an online Rich Text editor.  We will heavily rely on CSS to mimic desktop application interface and at the end we will use AJAX to build the functionality for sending the created “document” as an email attachment, saving it to the server and to the hard drive.

Read More

DataBinding for Beginners in ASP.NET

DataBinding for Beginners in ASP.NET

When building any application, whether it’s ASP.NET web apps or WinForms desktop apps you will eventually come across the need to DataBind. DataBinding is the basic process of presenting dynamic data sources within a user interface component.

DataBinding isn’t limited to just interface components, but it is probably the most common occurrence you’ll encounter. Without DataBinding your web pages would only be able to display static data, or dynamic data populated programmatically.

DataBinding can take on numerous formats, from very simple to complex. The .NET framework also provides you with many possible DataBinding properties throughout the web control library to give you a lot of control and flexibility. Take for example a Label control, you can bind its foreground and background color properties. Although not a common requirement it shows binding can be more advanced than simple text values.

In this tutorial we’ll look at several basic examples of DataBinding on different controls available in ASP.NET. We’ll explore basic page property binding for a Label control, custom class property binding for a TextBox control, collection class binding for a DropDown control, and DataTable binding for a DataGrid control.

Note: Visual Studio .NET is required for this tutorial and both VB.NET and C# code examples will be provided

Read More

Design and Accessibility: Part VIII

Accessible Form Problems and Solutions

In the previous design and accessibility article, Linda illustrated various changes that she made to the Montrose Citizens for Responsible Growth test site to date. The alterations included changes to global structure within the WordPress PHP files and in the accompanying CSS file. In this article, Linda addresses the W3C’s accessibility guidelines for forms and how these guidelines work in some cases and are unnecessary in others. The solutions included in this article provide a means for developers to use dynamic scripts (like PHP and ASP) to make their sites more accessible. She also provides some back-up solutions for developers who want to stick with client-side applications which incorporate programs like AJAX.

Minimal Form Accessibility: W3C Standards and Inherent Problems

The minimal accessibility standards set for any Website HTML forms come from the granddaddy of all Web accessibility standards – the World Wide Web Consortium (W3C). In their instructions on how to create accessible forms, the W3C discusses six HTML form issues. I adjusted the order of the six directives so that they make more sense (at least to me!). Also please notice that the W3C examples were written for HTML documents only, and the first tip-off to this limitation is indicated by the use of capital letters in the tags. XHTML construction is formulated with all lower-case letters, and the W3C has addressed XHTML/DTD forms in their XHTML forms modules. However, I’ve also included some examples of how to modify the codes below to fit XHTML formats in this article.

Read More

Getting started with Flex 2.0 Beta 2

If you’ve worked with Flash, you have probably heard of Flex. So what is it and why do you need to know more? Flex allows you to create Rich Internet Applications without Flash. In Flex, you create applications using a standard set of XML tags from a language called MXML. The tags describe the interface and you can write ActionScript to wire up the components and make the application work.

Read More
Newer articles Older articles