JavaScript Workshop

AJAX 101 – part 1

Frank Stepanski — Sun, 21 Jun 2009 18:43:01 +0000

AJAX, an acronym for Asynchronous JavaScript and XML, is a group of technologies combines to accomplish powerful new forms of the web interactions. It’s composed of JavaScript, the XMLHTTPRequest object and XML, JSON, (X)HTML or even plain text.

Asynchronous means that you can make an HTTP request to a server and continue to process other data while waiting for the server’s response. For example, you can make requests to a server-side script to retrieve data from a database as XML, send data to a server-side script to be stored in a database or simple load a static XML file to populate pages of your web site without ever refreshing the page.

Behind the scenes data transfers are accomplished through the XMLHTTPRequest object, which is the heart of the AJAX engine, as it’s used to exchange data asynchronously with a server-side language, XML or other text format. It combines with the DOM (Document Object Model) to display the AJAX response data as (X)HTML and CSS.

The DOM is a language-independent interface that makes common web page elements accessible through scripting languages. This is extremely useful when working with dynamic data, such as an AJAX response, because it can be parsed by JavsScript and added to page elements on the fly without a browser refresh.

In 1999, Microsoft brought the XMLHTTPRequest object to the web with the release of IE 5.0 as an ActiveX object that was available through JavaScript and VBScript. Since its creation, Mozilla and Apple and Opera have included it in their browsers as well (as a native object).

AJAX is a valuable connection between the interface and backend logic, enabling the backend to be robust and powerful with a simpler, yet intuitive interface that provides as on demand feedback to users. It also provides ways to exchange data with server-side languages and to store it in databases without disconnecting the user from the application, such as standard applications do when refreshing the browser window.

The AJAX Engine

The standard AJAX engine is based on the technologies that make up the acronym: the asynchronous functionality sends requests to a server, which are a type of two-way time delayed communication, enabling data to respond when it’s ready; JavaScript, which creates the object and makes the request and XML, could actually be XML, JSON (JavaScript Object Notation) or any other text format that the server returns as a response to the request.

The data that is returned could be a static file that’s updated by hand or can be a server-side script that returns database data in XML, JSON or another text format.

The standard AJAX engine is fairly simple and easy to learn, especially with prior knowledge of JavaScript and XML. The easiest way to create the AJAX engine is by adding a separate JavaScript file to your project and pointing to it from your (X)HTML.

This file will include all the methods (or functions) that make up this request. Here is how you make the request from your (X)HTML page.

<title> Introduction to Ajax </title>
<script type="text/javascript" src="js/request.js"></script>
</head>
 
<body onload="javascript :makeRequest (‘path to…/filename’);">
<div id= "body"></div>
</body>

Notice that we’re pointing to the JavaScript source, called request.js in the script tag. This file will include the AJAX code.

When the page loads, you need to pass the path of the file that you’re requesting to a method that handles the request. This method, named makeRequest, will receive the path to the requested file and create the XMLHTTPRequest object:

if (window.XMLHttpRequest)
{
        // IE7, IE8, Mozilla, Safari, etc.
	request = new XMLHttpRequest () ;
}
else if (window.ActiveXObject)
{
        // IE 6 and previous
	try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
}
 
sendRequest (url) ;
 
}

Internet Explorer 6 and before use the ActiveX object, while the more current Internet Explorer versions 7 and 8, as well as Firefox, Opera, and Safari all use the XMLHttpRequest object.

The URL parameter is the path that we passed to the method when the page loaded, this parameter is passed to the sendRequest method to complete the request:

function sendRequest (ur) {
 
	request.obreadystatechange = onResponse;
	request.open ("GET", url, true);
	request.send(null);
}

The sendRequest method uses the request object that was created in the previous method and triggers three additional method calls which are intrinsic to the request object. The first is the onreadystatechange, which sets the callback method that we’ll create to handle the response of the request.

The second is the open method, which included the HTTP request method, the URL or path to the file that we want to request and a Boolean (a true/false value) defining whethr the call is asynchronous, with true meaning asynchronous.

Lastly, the send method takes additional parameters that can be sent as a query string to a server-side script.

Once the request has been made and the server returns a response, we need to check the readyState of the object to determine if the response has been completely loaded. The readyState included four states: zero is Uninitialised, one is Loading, two is Loaded, three is Interactive and four is Complete.

When the response is fully loaded the HTTP status code will equal 200, which means that the response data can then be accessed successfully. Below is an example of the checkReadyState method, which handles the different states:

function checkReadyState (obj) {
 
if (obj.readyState == 0) {
     // uninitialized
}
if (obj.readyState == 1) {
     // loading
}
if (obj.readyState == 2) {
     // loaded
}
if (obj.readyState == 3) {
     // interactive
}
if (obj.readyState == 4) {
     // complete
}
if (obj.status == 200) {
     // successfully loaded return true:
}
else
{
     return "There was a problem retrieving the XML.";
}

As you can see, this method handles all the ready states and has the ability to display a custom message for each state. Once the state equals four, meaning that it has been fully loaded, the request status is checked. If it equals 200, the object has been successfully loaded and we can return to tell the response handler to process the data. If no custom error message is displayed.

This example only displays one message for all errors, but there are many HTTP states available, which are outlined by the World Wide Web Consortium and can be found on its web site (www.w3c.org).

Once the response data has been successfully loaded it’s ready to be parsed. There are two intrinsic methods for retrieving the response data, called ‘responseText’ and ‘response XML’. The responseText method handles all text formats and can be used as a way to debug the response data. Here’s an example for loading HTML data:

<b> This is the header </b><br/>
This is the body

This is a simple sample, but it shows that the HTML tags can be used in the response file and that they’ll render properly in requests. Using responseText to retrieve the data is as easy as using the following syntax in the callback method that we set in the (X)HTML page:

function onResponse () {
 
if (checkReadyState(request)) {
 
     document.getElementById('body').innerHTML = request.responseText;
}
else
{
     document.getElementById('body').innerHTML = checkReadyState(request) ;
}

This method displays the data or error message as a HTML tag. This works well when displaying plain text or (X)HTML, but if the request is JSON we need to evaluate the response and parse its properties. Here’s an example of the JSON data format:

{’header’ : ‘This is the header’, ‘body’: ‘This is the body’ }

The data is separated into two sections, the name and the value, by a colon. Additional data is separated by commas into new name/value pairs. Now that we know what the JSON format looks like, this is how we parse it as a response:

function onResponse () {
 
if(checkReadyState(request)) {
 
     eval("var response = (" +request.responseText+")");
     document.getElementByID(‘body’).innerHTML = "
" + response.header + "
"
 
     response.body;
}

The first thing to do when we receive the JSON data is evaluate and give it a name, this creates a JavaScript object from the data by the name that we gave it. Once we have the object created, we can call the properties of the object by name. for example, response.header gives us the value of the header.

The responseText is useful for all text formats, but when we want to parse XML we need to use the reponseXML method, which returns an XML object from XML response data. This object can be accessed by first targeting its root element with the following code:

var response = request.responseXML.documentElement;

Once the root has been targeted properly the elements in the XML can be targeted by name and displayed in the page:

var header = response.getElementByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

The standard AJAX engine is simple to create once you understand the different parts of the process. The only downfall is that you can have different versions of the request in multiple projects and this can become a hassle.

An object-oriented solution helps to avoid issues regarding redundant code, and will provide a more powerful engine. This will be dicussed in part 2 of this post.

Database Web Development with ASP.NET Class

Frank Stepanski — Thu, 11 Jun 2009 02:31:29 +0000

I created a third ASP.NET online class called Database Web Development with ASP.NET at LVS Online.com.

This 6-week class will focus on how you can interact with databases such as SQL Server, MySQL and Microsoft Access using ASP.NET and C#. I start with the very basics on explaining how to use data source controls and objects in ADO.NET (Connection, Command, DataReader and DataSet) to retrieve, update and delete records in a database.

The great thing about ASP.NET is that you can work with almost any data source and are not limited to a Microsoft based technology. I provide a sample database in three separate versions (SQL Server, MySQL and Microsoft Access) and explain how SQL (Structure Query Language) statements are used to interact with your data.

The class is only $25 and there are no other materials or software needed.

Topics Covered:

Week 1: Database Overview (SQL Server, MySQL, Microsoft Access)
Week 2: Using SqlDataSource; SELECT statement and filtering data
Week 3: ADO.NET Review; Connection, Command and DataReader objects
Week 4: Updating and Inserting data (using data controls and ADO.NET objects)
Week 5: Databinding Techniques with GridView and DetailsView controls
Week 6: Understanding Stored Procedures (SQL Server and MySQL)
Extra: Concurrency issues and Transaction benefits

To give you an idea of how each lesson looks, here is the first lesson (.pdf).

Creating Even Faster Websites Podcast

Frank Stepanski — Tue, 19 May 2009 20:04:00 +0000

Steve Souders is the author of High Performance Web Sites and the creator of YSlow, the Firebug extension gave a presentation at SXSW09 about how to speed up website performance.

Steve, now working at Google, discussed the next set of best practices he’s developed, including advanced techniques for loading JavaScript, where not to place inline scripts, and the importance of using multiple domains to improve web performance.

Here are his presentation notes (.pdf) as well.

Understanding WordPress: Top Ten SEO Tips

Frank Stepanski — Thu, 07 May 2009 01:51:41 +0000

Some great tips I found on SEO:

http://www.understandingwordpress.com/blog/top-ten-search-engine-optimization-tips.html

Understanding WordPress Class

Frank Stepanski — Fri, 24 Apr 2009 14:05:19 +0000

I am teaching an online class to help students learn how to install, setup, monetize and customize a WordPress blog. This six week class will guide you step-by-step through all aspects of WordPress development.

This class is offered through this website only and I will email students a new lesson each week. Each lesson will be between 8-15 pages in length and have an assignment(s) that the student can work on if they desire.

Week 1 – Getting Started

Blogging Basics
Types of blogs
Manual installation on a web server

Week 2 – Administration

Understanding the Dashboard
Setting up user accounts
Elements of a Post
Managing Posts, Categories and tags
Adding an About page
Adding your links

Week 3 – Site Design: Themes

How to find and install new themes
The basics components and files of a theme
How to use widgets
Quick PHP Overview
Review of basics template tags

Week 4 – Adding Functionality

What is a Plugin?
How to find and install plugins
Popular and useful plugins

Week 5 – Marketing

Adding Analytics and RSS Feeds
SEO Optimization
Integrating social media sites
How to monetize your blog

Week 6 – Themes: ‘Under the Hood’

Blog design considerations
Dissecting how a theme works
Creating a basic theme from scratch

Class Requirements

The only requirement for the class is that you have a environment that includes Apache, PHP and MySQL. This can be obtained either by having a webhost webhost (I use GoDaddy) or using a prebuilt installation on your local Windows PC using WAMP Server or XAMPP.

Class Website

I have created a seperate website http://www.understandingwordpress.com for this class for which I will post additional material as well as answer students questions that can be viewed by everyone.

Sample Lesson

Here is the first lesson (.pdf) for you to look over and give you an idea of how topics will be covered.

Cost

The cost of the class will be $25 and will be payable to me via PayPal. Once I receive payment, within 48 hours (normally sooner), I will email you giving you details about the class and when the class will start.

Interview with Lorelle VanFossen

Frank Stepanski — Tue, 14 Apr 2009 07:44:22 +0000

Lorelle VanFossen is considered one of top experts on blogging and WordPress in the world and can be regularly seen keynoting at large blogger conferences such as WordCamp and SOBcon.

Lorelle was kind enough to give me some of her time to answer a few questions on blogging, analytics and the WordPress community.

JW: For people who do not know you, would you mind giving a brief introduction of what you do and how blogging affects your life?

Lorelle VanFossen: I blog. I write technical and editorial articles on blogging, travel, web analytics, blogging, WordPress, blogging, and more WordPress, and some life and more travel.

I have several blogs and write for magazines, ezines, and other blogs, podcasts and even video blogs. I speak, teach, and present workshops on blogging, social media, WordPress, and web technology, as well as travel and writing, all over the world. I’m also a consultant for a variety of clients on social media and blogging, helping them to integrate social media marketing cultures into their businesses.

I’m also a major WordCamp fan and if I can get into a WordCamp anywhere in the world, whether as an attending fan, keynote, or presenter, I’m there – as much as I can be. Matt Mullenweg and I were in a race for most frequent flier miles. Last year, I finally lost to my friend.

I adore the WordPress Community. WordPress users want to work with WordPress users. They are the best people and I love working with them. Their needs are constantly in my mind when I write on Lorelle on WordPress or the Blog Herald WordPress News.

Blogging is my life. It’s a platform for me to have my say and teach others about having their say.

JW: You’ve been blogging for over 10 years now, what made you first start?

Lorelle VanFossen: There was no first start. Since the 1970s and 80s, I’ve been involved in the development of the web in all its forms. I had one of the first (and now oldest) websites in the world and its evolution to “blog” was just part of the process. For me, there has been no beginning or end. It’s part of the evolution of technology and publishing.

JW: What helps you generate ideas on what to post about?

Lorelle VanFossen: Everything. Anything can be a blog post. From a walk in the woods to a visit with a friend to a business meeting, conference, radio news item, book I’m reading…it doesn’t matter. Anything and everything can be written about and inspiration has no rules. It comes when it comes and if you are paying attention, your muse will guide you accordingly.

The issue for me is not to come up with the ideas but to find the time to write all the ideas down, then finding more time to actually turn a few of those into publishable content.

JW: Do you still track the analytics of your blog?

Lorelle VanFossen: No. Lately, this makes people laugh. I work with Woopra, the first live, real-time web analytics program, and it’s all about tracking the stats. But Woopra isn’t about tracking the numbers as much as the individuals.

Woopra changes the whole dynamics of web statistics. It’s not about the numbers. I don’t care about the numbers. I could have 5 visitors or 5,000. I don’t care. It’s what they take away from my site that matters. If I impact one person, my work is a success. If I can change the lives of a few more, I’ve overwhelmed and humbled.

It’s the personal touch that makes web analytics special with Woopra. Woopra turns those numbers into faces. Instead of tracking visitor 45398, I’m tracking Fred Smith or Alice Anderson through my blog. If they are using Gravatars, I see their face or avatar in Woopra. I now have a name and face to go with the stats. I’m learning about what they enjoy reading, what they are searching for, what answers they want, and what they come back for. They become friends and acquaintances. I’m like a restaurateur, chatting up my customers to find out what they really want to eat in my restaurant. That’s what I want to put on my menu, making them want to come back for more.

We’re still in the early days of web analytics, and I fear that so many are taking the profiling path. I’m a huge fan of what Woopra is doing with analytics and stats, to track the individual not the numbers, and thrilled to be a part of something I think is going to change the face of the web.

JW: What changes do you see in the future of blogging?

Lorelle VanFossen: As I said, I believe that services like Woopra are going to change much of our experience on the web. The web is breaking down barriers in so many ways – we are still in diapers.

I see blogs becoming the focal point again in online communication. While services like Twitter and other social networks are growing quickly, there is only so much you can share within a 140 character limit. Sound bites. The world of relationships isn’t possible in 140 characters or less. But it’s a start.

A blog is becoming a business card and resume for many people. It is the center of their online experience, and many are returning to it, understanding that they need a place to showcase themselves and their thoughts and experiences. A referral point. People come from YouTube, social media services, networking groups, blog comments, and all over the web to find out who you are and what you do, and why should they trust what you say and do.

I see social networking expanding, but the blog returning to the center of people’s world as they integrate all their spheres of influence back into the core.

I also see that features like what BuddyPress has to offer, integrating social network features into a blog, will change the blogging experience. The ability for people to group themselves within a blog by interests is fascinating – and distracting. It will be interesting to watch the evolution.

JW: How do you keep readers interested?

Lorelle VanFossen: Give them what they want and more. Not more as in anything and everything or over the top sensationalism, but give them more than they want in bits and pieces so they will stay interested and enthused.

Over all, give them something to tell others about. Water cooler stories do much better than staid, home work exercises in writing.

JW: With your busy schedule how do you schedule time to blog on a consistent basis?

Lorelle VanFossen: I thrive on future posts in WordPress. I work when I can and work ahead as much as possible.

Many bloggers are what I call Weekend Bloggers. They save up their time all week to pound out 1-7 posts on the weekend to release throughout the week, making them look like they are blogging every day. Sometimes I will do that or do 14 – 21 posts ahead, always finding something to write about.

Yet, it depends. A single blog post can take me a few minutes or weeks or months to finish. I keep an Idea/Drafts file with all my blog story ideas. I go through them frequently to see if a story is ready to publish, or what needs more work. It’s an ongoing process.

I think of blogging much like magazine publishing. It involves contributions from a lot of folks, from photographers to writers. The editor has to work with all the different contributors to plan and schedule the content for every issue. Some get pushed to the front due to their timeliness, and others get pushed back for later issues. The only difference between a blog and a magazine is that I’m the editor, publisher, photographer, writer, editorial manager, etc.

A while ago, I started a series called Blog Struggles about the real life of a blogger and the hard work that goes into blogging. It’s gotten an amazing response and resonated with so many. They loved that we’re finally talking about the elephant in the room that bloggers have to deal with but few talk about.

Blogging is my job, but it is also a part of my life. I work it in. When I’m traveling and working on not creating content for my blogs, I will actually go through withdrawal. Writing is my passion and I love working on stories to share with people. Luckily, it’s my job, too.

JW: Do you think it is an easy transition for a writer to be a blogger?

Lorelle VanFossen: Easy? To move from what kind of writer to writing blogs? That’s too open a question.

For technical writers moving to a technical blog, there is little transition. For creative or fiction writers, also not a big transition. It all depends upon the skill and training of the writer and what their goals are with their blog.

A few key things a writer needs to know about writing online are:

Keywords: You must use words people search for in order to be found.
NO Pronouns: Stop using it, he, she, those, these, and other pronouns.
Shorter Paragraphs Increase Readability: Keep paragraphs short and break up multiple point paragraphs.
One Point Per Post: Keep your content to one point per post if possible.
Short versus Long Posts: If the writing is good, long posts will work. Don’t believe the myth that short posts are best. It depends upon the quality of writing and the points that need to be made.
It’s About Conversation: Writing for the web can be an ongoing conversation rather than a thesis, if you want interaction.
Write Linkable Content: If it ain’t worth linking to, consider not writing it. Make people want to talk and link to your content.

JW: You have such great passion in your posts and about your industry, what advice do you have in novice bloggers?

Lorelle VanFossen: Blog your passion, or don’t blog.

Don’t blog about what everyone else is blogging about. There are enough blogs about blogging, WordPress, celebrities…unless you can bring something special to the game, don’t blog.

JW: I hear you have a talent for snow sculptures? What have you done lately?

Lorelle VanFossen: I do indeed enjoy snow sculptures. A couple years ago I did a guitar, and I’ve done dinosaurs, reptiles, rats, people, dogs, cats, castles, and all kinds of things out of the beautiful but ethereal white stuff.

Unfortunately, a sledding accident this year ripped my shoulder, so sculpting was out for me during one of the best snow seasons in the Pacific Northwestern United States. My friend, Ed Morita of Baker’s Hours, the first person with a permanent WordPress tattoo, sent me a beautiful huge picture of a Chinese dragon he carved out of 30 pounds of chocolate to make up for my downtime. He’s inspiring me to consider trying chocolate carving for a longer lasting (and not so cold) creative experience.

Next year…I have a great list of ideas for sculptures inspired by the beautiful nature and wildlife we have here in Oregon, where we just moved and have made our new home base.

JW: Thank you so much for your time.

Lorelle VanFossen: And thank you for your support of the WordPress Community.

JavaScript: The Basics Class

Frank Stepanski — Mon, 13 Apr 2009 16:36:22 +0000

I created a beginner JavaScript class called JavaScript: The Basics at LVS Online.com.

This 6-week class will teach the students the basics of programming in general as well as the core concepts of using JavaScript. This will also prepare students to take my intermediate JavaScript class. JavaScript’s popularity is still on the rise and this is a great way to get some experience on programming and understand what cool things you can do with this language.

The class is only $25 and there are no other materials or software needed.

Topics Covered:

Week 1: Components of JavaScript and ECMAScript
Week 2: Data types, Arrays, and Conditional Statements: If..else, and switch
Week 3: Writing Loops, Functions and Understanding Variable Scope
Week 4: JavaScript Native Objects: Math, Date, Array and String
Week 5: Browser Objects (Location, Screen, Forms, Images) and DOM Overview
Week 6: Script Review and Common Troubleshooting

To give you an idea of how each lesson looks, here is the first lesson (.pdf).

Interview with Christian Heilmann

Frank Stepanski — Sun, 15 Mar 2009 20:24:37 +0000

Christian Heilmann is an author of books such as Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional and Web Development Solutions: Ajax, APIs, Libraries, and Hosted Services Made Easy, speaks all around world as an International Developer Evangelist for Yahoo!, and is an all around Web guru.

Christian was nice enough to give me some of his time to answer questions about the future of the web, accessibility, conferences and of course JavaScript.

JW: You recently wrote an article on ThinkVitamin on how you have seen the changes in web development. Do you think that the web community will soon become stagnant because the hype of Web 2.0 has died down?

Christian Heilmann: Actually no, I think there is now more of a need for good developers than ever. The hype in Web 2.0 resulted in a lot of products that needed to go out to the market yesterday and not in the four month they really need to be good products. Now that the rush and the silly money is ebbing down developers will have less illusions of grandeur and have to do a better job in producing products that work, are sustainable and maintainable and bring a longer-term revenue stream.

This means working more professionally and thinking about what we do rather than creating the next rounded corner, gradient and vowel dropping one month wonder.

Of course less will be produced, but that is totally fine by me. I’d rather see 4 new good products than 30 that die soon after being a TechCrunch article.

JW: Do you have any tips for developers on how to communicate better to management the importance of quality code as opposed to just getting it to work?

Christian Heilmann: Keep detailed reports on how much time had to be spent fixing issues caused by code shortcuts and “fix it now and we make it work later” decisions. Show examples of how other companies managed to release products faster and better by sticking to best practices and a defined code standard.

Ask why it is totally needed to follow defined processes in HR and PR but on the other hand everything in development should be played by ear.

I have set up a Wiki on the subject matter quite a while ago that has some good examples: http://icant.co.uk/webstandardsforbusiness.

In any case you catch more flies with honey than with vinegar. Good code and clever development practices are first and foremost a safeguard for yourself and should be something you do to protect your own sanity. Best practices being ordered from top-down are never likely to work out but instead are more likely to cause unhappiness in the development team.

JW: Late last year you organized a much needed workshop/conference called Scripting Enabled, which helped join web developers and users with disabilities better understand the importance of web accessibility. Could you give us a quick review of how well it did?

Christian Heilmann: I am still amazed as to how smoothly the conference went given the ridiculous amount of real time and money I invested in it. I guess it is another sign that having a good network of people who are as excited as you are about a certain topic is the most important thing in making anything a success.

We had great speakers giving real hands-on information of how different disabilities affect the way you access the web and what barriers they face and we had a lot of developers on the second day working with this information to build interfaces that work around these issues.

Several new products started on the event and first and foremost I managed to bridge the gap between accessibility fans and developers a lot more than most of the other conferences did. All the slides are available, all the things that were built are described on a wiki and I am now releasing the videos bit by bit with transcriptions.

Right now I am working on an upcoming accessibility section for the Yahoo Developer Network and we’ll publish a lot of the information gathered and videos there soon.

What I am a bit disappointed is that not many people take on the idea – anybody can do an own scripting enabled and I’ll be happy to promote them for it but so far there was only a second one in the US. I think it is quite a step for people to say “I can do this”.

JW: What do you think are the main reasons that web developers do not put more emphasis on development for accessibility?

Christian Heilmann: I guess the biggest part is that accessibility is just not an integral part of the product roadmap. Most of the time developers get a design and have to implement it. Whilst we develop in agile ways the design process in most companies is still very much “make it pretty then send it to the developers”. Real accessibility comes from an open, iterative approach across the board that starts with user centered design rather than fixed interfaces.

Another reason is that there is a terribly large amount of myths and bad examples of accessibility out on the web. Instead of embracing the idea of accessibility – which includes a lot of flexibility – a lot of developers just want a quick solution to be able to say they’ve done something.

This is to a large degree the fault of the accessibility community itself – feedback is hard to get and if you get it a lot of truisms and old school thinking is coming back to you. Personally I am very worried about the gap between where web development is right now and where a lot of accessibility advocates consider it to still be.

There is an amazing amount of open source solutions for assistive technology and Firefox has a lot of great extensions. Yet most of the time you ask for testing with screen readers you will hear tales of woe of how expensive these are and how hard it is to install them and that is why we should all support really outdated versions running on Windows 2000 and IE6.

The biggest issue however is bad time planning – most of the time we are already behind on the delivery of our products which would make accessibility a luxury item. This is also caused by developers being overly optimistic about their own delivery skills – we are very much likely to under-estimate delivery times as we are such awesome developers who can do everything in 5 lines and 2 regular expressions.

You won’t find yourself able to rush a plumber into delivering a four hour job in one hour, but it is easy to do that with a developer. We also are happy to get more developers to release a product faster. This is not going to happen as with more developers you also add more collaboration overhead. Nine people can’t make a baby in a month.

JW: Has the recent version of the YUI library (ver 2.6) focused enough on web accessibly in your opinion?

Christian Heilmann: The groundwork is there and all YUI components can be built using progressive enhancement. There are ARIA plugins available for the newer components, and this is where YUI3 is headed. It was a bit of a job to get all the things working and make sure we get the components up to current accessibility standards but I have to say I am very happy with where this is going.

Todd Kloots and Victor Tsaran are doing a sterling job with the 3.0 components and the need to re-write YUI for new Yahoo dependencies (the new homepage) kept the team very busy. I don’t know any other library other than Dojo (which is a framework not a library) that does as good a job.

JW: What are some web developers that really inspire you?

Christian Heilmann: Ouh, a lot. I think one of the best all-round amazing guys I know is Simon Wilison, then there is “Mr Pragmatic CSS” Dan Cederholm. John Resig puts quite a stake in the ground when it comes to moving ahead in JavaScript technology and release numbers, Scott Schiller pushes the envelope when it comes to interesting interfaces and multimedia functionality in JavaScript, Aral Balkan is a good channel into the Flash/Flex world, Gez Lemon and Steve Faulkner do great accessibility work… to name just a few.

Right now I get most inspired by people I work with who are not known names but release a lot of cool stuff to the outside world, and do my best to egg them on to get out more into the speaking and publishing world. Examples for those guys are Dirk Ginader, Marco van Hylckama-Vlieg, Rajat Pandit, Neil Crosby, Ian Pouncey and of course ex colleagues Ed Eliot, Stuart Colville, Lawrence Carvalho and and and…

Frankly there are not many developers out there who have their eyes open that don’t inspire me.

JW: Can you describe some of your duties as an International Developer Evangelist at Yahoo?

Christian Heilmann: My job is mainly being a translator. I talk to the outside world about our products and other people’s products ours work well with or are in competition with. I talk internally about what I heard in the outside world what people want and what they struggle with. I train new developers and give tech talks in the different offices around the globe about things coming down the pipeline that will be of relevance soon and in general keep up with the market.

I’ve asked for this role as I found myself getting a lot of offers to speak at conferences, write articles and blog posts (and give interviews) and I didn’t have the time to do so. Now it is my job and I can bring good stuff to people I tried to reach for years.

I’ve been developing for a long time and proved my worth. I’d rather give more junior developers the chance to not have to make the same mistakes I had to go through but deliver better products instead.

That is why I am there to listen to their issues and find ways to explain new products internally and externally. A lot of bad code is being developed in companies because people don’t know how to talk to each other and people that should collaborate are oblivious that the others exist. I am here to fill this gap.

Right now I am doing a lot of work talking to other companies about what worked well for Yahoo in terms of building APIs, allowing developers access to our data and how to foster innovation in the company. It is thrilling to see how many companies are out there that could give us amazing data to play with but are not doing it because of easy to solve technical problems.

JW: Many of your presentations focus on script maintainability. Over the years do you believe that developers have made more of concerted effort in improving this?

Christian Heilmann: I think we are on a good way of doing that. Far from concentrating on it as it is a lot more interesting to write yet another speed comparison of different libraries and to try to persuade each other what the best way of writing a loop is but I see good work being done. Especially when it comes to build scripts and processes we could do with a lot more collaboration and release information but the problem is in a lot of cases that this is information that is company specific.

JW: I heard that you do not own a television? Is this still true and how do you watch Top Gear (my favorite show)?

Christian Heilmann: That is still true, as I just explained in another letter to the TV Licensing people who are very much confused about this. To answer the Top Gear question, I don’t as I don’t have a car either (would be pointless living in zone 2 in London). I’ve seen a few episodes on planes and in the gym on the bicycle but that is about it.

I liked what I saw but it doesn’t beat Big Bang Theory by a long shot

JW: Thank you so much for your time.

Christian Heilmann: Thank you for being interested in what I do and say and challenging me with some interesting questions. I am better in answering them live, but I hope I managed to get something good out there. Keep playing, the web is yours!

PHP Style Switcher

Frank Stepanski — Thu, 12 Feb 2009 05:00:45 +0000

A while ago, I wrote a post on how to create a JavaScript Style Switcher, but recently I found the need to create a PHP based one. There are many ways to do this in PHP using sessions, arrays, cookies, etc. I created one that only takes a few lines of code and is super easy to implement.

This PHP Style Switcher can be done in two easy steps.

Step One: Setting styles

The first step is to create a new file on your server named switcher.php and paste the following code into it:


/* expire in 1 year */
setcookie("sitestyle", $_GET['set'], time()+31536000);
header("Location: $HTTP_REFERER");
?>

When it’s queried, this file will write a cookie for the user detailing which site style to use. The cookie is set to expire in one year, and then the script sends the user back to the referring page. All of this happens behind the scenes, so the user will never really “see” switcher.php in action.

Telling switcher.php which site style to use is an equally simple matter. You can query it using conventional HREF links in text, images, or even flash

<a href="switcher.php?set=red">change to RED style!</a>

Step Two: Detecting styles

<link rel="stylesheet" type="text/css" media="screen"
title="User Defined Style"' href="
(!$_COOKIE["sitestyle"]) 
?'default':$_COOKIE["sitestyle"] 
?>.css" />

This tiny script detects which style is in the user’s cookies and prints out the result. If the user doesn’t have cookies enabled, or just hasn’t chosen a site style for themselves yet, the script will default to “default.css”.

So there you have it. A cross-browser, backwards-compatible, forwards-compatible, standards-compliant style sheet switcher in just five lines of code. It’s fast, straightforward, and universally accessible because there’s no processing done on the client side.

Here is the code (.zip) as well for you to review.

Intermediate Web Development with ASP.NET Class

Frank Stepanski — Sun, 18 Jan 2009 04:28:44 +0000

I created a second ASP.NET online class called Intermediate Web Development with ASP.NET at LVS Online.com.

This 6-week class will continue from my first ASP.NET class and focus more on ‘real-world’ ASP.NET programming topics. Since the first class focused on getting you up to speed on how ASP.NET works and the C# programming language, this intermediate class lets you take those skills in developing ASP.NET web sites.

The class is only $25 and there are no other materials or software needed.

Topics Covered:

Week 1: Master Page Basics
Week 2: Creating an ASP.NET Website from and HTML/CSS Design
Week 3: View State, Query String, Cookies, and Session State
Week 4: OOP: Building Your Own Objects
Week 5: Creating Your Own Controls: User Controls
Week 6: Error Handling
Extra: Website Navigation: Building a SiteMap

To give you an idea of how each lesson looks, here is the first lesson (.pdf).

XML with ActionScript 3.0 Basics

Frank Stepanski — Tue, 30 Dec 2008 03:15:06 +0000

On a previous post I talked about the basics of XML so I thought I’d show some examples of how to incorporate XML with Flash.

Since XML is primarily used to store and transfer data, it makes for a nice flexible way to store data that Flash applications can use. Since it’s external to your SWF file, it can be easily updated. So whether your Flash application pulls in data for a News Reader or a Slide Show or Music Juke Box, any change will be dynamic and ready to go.

These examples use ActionScript 3.0, which allows for easier manipulation of XML data compared to previous versions of AS. I broke up the three examples into three parts so you can see the evolution of each example and can follow it better with a gradual change in the AS code (saved as Flash CS3).

Lots more AS 3.0 examples can be found in: My Intro to ActionScript Class.

News Reader

In this Flash example (like the other two as well), I show you how to pull information into Flash and parse the information needed into an text field, dynamically loop through the XML file, and add HTML and CSS styling to the text field.

Here is the finished version and the source files (.zip).

Slide Show

There are so many Flash slide shows on the web and most use an XML file to store the image properties (url, title, description, etc) of each. This way updating is separate from the re-publishing the FLA and anyone can do it.

This application not only uses the XMLList object, but the UILoader component and the Timer class (rotate image every 3 seconds).

note: You could create a custom loader for the loading of the images by either using the Progress Bar component or creating your own.

In AS 3.0, a simple pre-loader would look something like this:

loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loaderInfo.addEventListener(Event.COMPLETE, onComplete);
 
function onProgress(e:ProgressEvent):void
{
     var loaded:Number = e.target.bytesLoaded;
     var total:Number = e.target.bytesTotal;
     var pct:Number = loaded/total;
     loader_mc.scaleX = pct;
     loaded_txt.text = "Loading... "; 
     loaded_txt += (Math.round(pct * 100)) + "%";
}
 
function onComplete(e:Event):void
{
    // show something
}

Here is the finished version and the source files (.zip).

Music Juke Box

Finally another use of XML would be to create a song Juke Box to play different MP3 files. This project uses previous techniques of the first two projects plus the Sound and SoundChannel class.

This project focuses a little more on programming since how to load and parse and XML file have been already covered in the first two projects so it’s a nice finishing project on how to create a simple Flash application.

Here is the finished version and the source files (.zip).

note: If you want a more robust example of a Music Juke Box (pause, volume slider, etc), then take a look at this example and source code (.zip) created by Craig Campbell.

New Features in Flash CS4

Frank Stepanski — Thu, 18 Dec 2008 18:48:39 +0000

With the recent release of Flash CS4, I’d thought I’d cover some of the highlights of the new features.

Interface
The user interface has been overhauled to match all of the adobe creative suite tools. It may take some users a little while to get used to it, but it seems to be for the better.

Tweening Engine
The timeline’s tweening engine now supports object-based animation with motion tweening. What this means is that you do not have to create a new keyframe, modify your symbol then create the motion tween (”Create Classic Tween”).

All you have to do now is create your symbol and then add a motion tween to that object. The containing layer becomes a “tween layer” which has a unique layer icon and ending keyframe (diamond). The motion tween includes a motion guide giving you full control of the animation itself (even with the free transform tool).

Motion Editor
The Motion Editor gives you a graph of all the properties of your object (symbol). This allows for a great overview of your animation properties (rotation, easing, etc) and allows for fine-tune control. A neat feature is the added options of Easing for each of the animation properties.

Motion Preset
You can save any of your animations as a “Motion Preset” and can use many of the predefined Default Preset animations on any object (can be used like a library of animations).

3D Support
3D support is now available and allows animators to create cool 3D effects with two new tools in the toolbox: 3D Rotation Tool and 3D Translation Tool. The 3D Translation Tool allows moving an object (symbol) in the x, y and z axis.

Bones – kinematics
The new “Bones” feature is a new tool in the toolbox (Bone) that allows you to create animated objects that behave like a skeleton. So you can have many symbols that together follow the same “bone structure”. A neat use for this would also be applying a bone structure to a solid shape which would give it a cool shape tween effect. This would be almost impossible to do in previous versions of Flash.

Adobe Media Encoder
Adobe changed the name of the Flash Video Encoder to Adobe media Encoder because it is capable of encoding a lot of different types of files. You can still import video files like you normally did in Flash (Import -> Import Video) and go through that wizard to convert it to FLV/F4V formats.

The encoder gives you options for the type of codec, bitrate, frame rate, batch encoding, etc. Check oout this video to learn more.

Project Panel
The new Project Panel (acquired from gskinner.com) allows developers to easily create new .fla and .as (class) files. Class files can now have fully customizable starter code created for them as well.

Check out this video showing many of the new features of Flash CS4 and the official Flash CS4 documentation (.pdf) from Adobe.

Free CSS Book

Frank Stepanski — Thu, 11 Dec 2008 01:05:37 +0000

Last month, Sitepoint.com was giving away its great CSS book: The Art & Science of CSS in PDF format. It covers topics such as headings, images, backgrounds, navigation, forms, rounded corners, and tables.

Here is a copy (.pdf) if you didn’t get yours.

10 Ways to Speed Web Page Download Time

Frank Stepanski — Thu, 27 Nov 2008 06:42:11 +0000

We all want or pages to load as fast as possible. But when we develop our site, time constraints may prevent us from properly designing it for speed. Here are a few tips that should help:

1. Lay out your pages with CSS, not tables
2. Don’t use images to display text
3. Call up decorative images through CSS
4. Use contextual selectors
5. Use shorthand CSS properties
6. Minimize white space, line returns and comment tags
7. Use relative call-ups
8. Remove unnecessary META tags and META content
9. Put CSS and JavaScript into external documents
10. Use / at the end of directory links

For a more detailed explanantion read over this article (.pdf).

The Seven Deadly Sins of Landing Page Usability

Frank Stepanski — Sun, 16 Nov 2008 06:05:52 +0000

There are seven serious usability mistakes that most corporate websites commit. Interestly, these common errors are often products of sound principles that Web designers mistakenly apply:

1. Too Much Introductory Text on Your Landing Page
The worst kind of filler copy usually starts with, “Welcome to our site”, click on the blah, blah, etc. Telling people what to do on your site futile. The user will go where he or she feels like. People generally read very little on a website. Instead, users scan the page, picking out words that are relevant to them.

2. Not Showing What Your Site Offers to Users
Many sites are horrible at explicitly stating what they offer and how their services or products differ from those of their key competitors. Keep in mind that users will only spend a few seconds to scan teh site for what they need.

3. Using Gratuitous Animation and Graphics on a Site
The dirty secret among site owners is that they love to see cool animation and graphics, even though these don’t contain real content.

4. Not Showing Usrs Where They Have Been on Your Site
Knowing what pages have been visited is a basic function that all navigational designs should support. Flash sites are notorious for this basic omission. Only one-third of corporate sites use link color to show users at a glance where they have been. Without this basic browser function, the result is navigational confusion and users re-visiting the same page twice.

5. Not Telling Users What the Site Does on its Landing Page
One of the most popular links on a website is hte “About Us” link. Most people click to find out what the company does or what the site is all about. It’s popular because the tag lines and advertising copy are so generic and content-free that users have to work hard to find out who you are or what you sell.

6. Using a Heading to Label a Search Area
Sites that label a “Search” area with an information field, followed by a “Go!” button waste space with extraneous labeling. Like most search engines, your site’s internal search should have as few elements as possible to communicate its function.

7. Making a Home Page Link on the Home Page
You should never have a link that points to the current page. If the user clicks it, he or she wastes time and begins to question whether they really are on the home page or not. Disable or highlight the link of the page the user is currently on to avoid confusion.

Color Theory and Web Design

Frank Stepanski — Mon, 20 Oct 2008 08:57:05 +0000

Color theroy is a set of principles that enables the creation of harmonious color combinations via the comprehension of color relationships. Making things more complicated is the fact that color theory doesn’t take tints, tones and shades into account, instead it concerns itself solely with the base hues themselves.

There are significant psychological aspects to color; it’s a cultural signifier and can even affect mood. Much of this works on an entirely subconscious level. Marketing and design decisions have long been influenced by the psychology of color. Color schemes are picked for their subconscious significance or for positive associations with the intended audience.

At the most basic level, colors can be categorized by their attributes. Red-based colors are warm, while blues are cool. The use of neutral colors such as black, greys and whites, as well as some browns and beiges with the chosen palette limited to accent colors, can help to calm down a design, bringing greater harmony to the palette.

Color Wheels

A key tool in color theory is the color wheel. The color wheel is a visual representation of the color spectrum wrapped onto a circular device. One of the earliest accurate wheels was devised by Goethe in the 19th century, building on the work of Issac Newton. Newton’s earlier version didn’t take into account the idea of complementary symmetry.

The purpose of the color wheel is deceptively simple — harmonious color combinations consist of any two colors opposite of each other on the color wheel, any three colors eqally spaced around the wheel in a triangle, or any four colors that form a rectangle. Despite sounding rather rarefield, the color wheel is actually a very useful design device.

For a start, it brings sound scientific principles to something that might otherwise be an incomprehensible and fashion-led veil of confusion. When using a color wheel, it’s worth looking beyond simple complementary colors. A design based solely on complementary colors will surely work, but it will also be high-contrast, vibrant, jazzy and perhaps a bit harsh. Depending on the design, such a color scheme could be very strong or it could be overwhelming.

A color scheme based on analogous colors, meanwhile, is much more likely to feel relaxed and harmonised, although it could be lacking in contrast.

The color model used in displays such as CRT and LCD montors or televisions is RGB, which stands for red, green and blue. As displays create images from light emissions rather than pigment, colors are created by addition. Combining one of the three additive primary colors emitted from the light source, with another in equal amounts, produces an additive secondary color: cyan, magenta or yellow.

In practice, this means each pixel can be lit in a combination of red, green and blue light, creating a maximum of 16,777,216 colors. A typical human eye can distinguish between 10 milion distinct colors.

Color on the web

Back in the dark days of the early web, it was common to have a monitor with an 8-bit screen depth, meaning there was a maximum usable palette of 256 colors. Still worse, Macs and Windows machines had slightly different color models, resulting in a maximum usable palette of 216 colors — 216 common to both platforms. That was known as the ‘web safe’ palette.

Thankfully, today’s machines routinely offer millions of colors, so the web safe palette can be safely ignored, but that doesn’t necessarily mean you always should.

There are times, however, when other people’s screens may not show subtleties. Gamma, and even the kinds of monitor (LCD or CRT) people are using, cannot be controlled. If you’re being too subtle, you may lose it on LCDs.

On top of this, there’s the issue of the mobile web. Many mobile devices such as PDAs and mobile phones may have lower bit depth than PCs or Macs, though an increasing amount can display at least 16-bits per pixel, allowing for thousands of colors.

Color-blindness

One of the main things to be aware of is people with color-blindness and color deficiencies.

In fact, one in 10 males are estimated to suffer from some form of color-blindness, primarily deuteranomaly, a form of red-green color-blindness. As red-green color-blindness is a gender-related deficiency linked to the X chromosome, it’s much less common in women as it requires the deficiency to be present in both X chromosomes.

Resources

Here are some great articles (.pdf) by Linda Goin about color:

Color Schemes part 1
Color Schemes part 2: Triad, Tetrad, and the Perception of Depth
Color Perceptions
Color Usage: Color Schemes and Themes

Bookmark your Webpage?

Frank Stepanski — Mon, 06 Oct 2008 07:51:13 +0000

I’m not a fan of creating a script that only works in one browser or differently in other browser(s). I had to create a link on a website for work that made a URL their home page. This annoying task proved difficult as there wasn’t much good information online and it seems only IE allows this. The Firefox browser will only allow you to make a web page a ‘favorite’.

So I found the code to make it work on both IE and Firefox (will not work on any other browser), as well as improving its ‘unobtrusiveness’. As you can see from the code, I only display the link if the browser is either Internet Explorer or Firefox otherwise the link text is blank.

The ‘Browser.Detect’ object is from a script from the JavaScript guru himself, PPK which detects what browser the visitor is using. Browser detection isn’t used as much today as it once was but it is still needed on some occasions.

Internet Explorer

Firefox

function browserBoomkark(id) {
 
var link = document.getElementById(id);
 
switch (BrowserDetect.browser) {
 
     case 'Explorer':
 
          link.innerHTML = 'Set to Home Page';	
          link.style.cursor = 'pointer';
          link.onclick = function () {
               this.style.behavior='url(#default#homepage)';
               this.setHomePage('URL');
          }
 
      break;
 
      case 'Firefox': // only supports making page a favorite
 
           link.innerHTML = 'Set to Favorite';
           link.style.cursor = 'pointer';
           link.onclick = function () {
 
                window.sidebar.addPanel('label', 'URL', "");
           }
 
           break;
 
      default:
 
           // nothing is displayed for other browsers
      }
}

Test the page yourself to test it out and download the code (.zip).

John Resig Interview at Boagworld Podcast

Frank Stepanski — Tue, 23 Sep 2008 13:51:14 +0000

In a recent Boagworld podcast, Paul Boag interviews John Resig, creator of jQuery. Boagworld is a weekly podcast show that talks about topics for people who design, develop and run websites.

In this snipet of the full weekly podcast, Paul asks John questions such as: when is it appropriate to use a JavaScript library; do people need to learn JavaScript before using a library, do libraries hide too much, what are some pros and cons of choosing a library, and much more.

Feel free to listen to all Boagworld’s podcasts or learn and talk to other fellow designers in their forum.

Unravel the SQL and Database Mysteries

Frank Stepanski — Fri, 05 Sep 2008 09:10:07 +0000

Understanding how databases work and learning basic SQL (Structured Query Language) techniques is crucial for any type of web development that requires you to store your data in a database. No matter what DBMS you use for your own website (SQL Server, MySQL, Oracle, etc.), the basics of design and retrieving data are the same.

Here is a great e-book (.pdf) covering all the topics to get you started.

Topics Covered:

Database Design
Normalisation
Simple SQL Queries
Database Performance Tuning
SQL Server Stored Procedures
SQL: Cross Joins, UNION, Case Expressions, Paging and Duplicates
Working with Strings

Why and Which of JavaScript Libraries Podcast

Frank Stepanski — Thu, 14 Aug 2008 03:39:05 +0000

John Resig, creator of jQuery and author of Pro JavaScript Techniques, spoke at @Media 2008 in London about the different types of JavaScript libraries such as Prototype, jQuery, Yahoo! UI, and Dojo and why should one be used. John compares how each library can help the developer with DOM, Events, Animations, Ajax as well as interface widgets.

Here are the presentation slides (.pdf) he used for his talk.