Currently ActionScript 3.0 is the internal programming language of Flash, Flex and Adobe AIR. This object oriented language is more adherent to the ECMA-262 standard which many other languages (i.e. JavaScript) follow.

Students will learn the basics of the core language of ActionScript 3.0, how it is used within the timeline, interact with objects (movieclips) on the stage and library, develop simple animations with just ActionScript and understand the importance and how to create preloaders for your movies.

The class is only $30 and students need either Adobe Flash CS4 or CS3.

Topics covered:

Week 1: Trace statement, comments, variables, loops, functions and object basics.
Week 2: Manipulating movie clip properties
Week 3: Events: overview, targeting, propagating, timeline control methods
Week 4: More events: frame and keyboard events; timer events
Week 5: Loading external assets (images and movies); Display list explained
Week 6: Working with preloaders and sound

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

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register

SQL stands for Structured Query Language. SQL is a standard language that was designed to query and manage data in relational database management systems (RDBMS). An RDBMS is a database management system that is used today in every type of desktop or web-based application. Microsoft provides T-SQL (Transact SQL) as a dialect of, or extension to, SQL in Microsoft SQL Server, its RDBMS

Microsoft SQL Server is one of the most popular RDBMS used today and a solid understanding of T-SQL is critical if you want to have a successful career in Microsoft application development (desktop or web).

The class is only $30 and there are no other materials or software needed to purchase.

Topics covered:

Week 1: Setting up SQL Server 2008 Express & Management Studio
Week 2: SELECT statements; Predicates and Operators, Case Expressions
Week 3: Joins: Cross, Outer and Inner
Week 4: Subqueries
Week 5: Data Modification: Inserting, Updating, Deleting and Merging
Week 6: Programmable Objects: Variables, Routines and Functions

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

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register

If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.

Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.

The class will be teaching not only how to use the many functions and properties of API, but practical examples you can use right away.

The class is only $30 and there are no other materials or software needed to purchase.

Topics covered:

Week 1: jQuery Overview; using $(), how selectors work
Week 2: Using filters, traversing the document, statement chaining
Week 3: Manipulating page content, working with CSS content
Week 4: Events: bind() and unbind(), helper functions, event object
Week 5: UI Library: Widgets, Interaction and Effects
Week 6: jQuery Project: Adding jQuery to an existing website

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

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register.

Ajax (Asynchronous JavaScript and XML) isn’t a technology but rather a grouping of technologies. Ajax uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response.

Ajax lets you execute a server-side method through a JavaScript call, without requiring a browser refresh.

The class is only $30 and there are no other materials or software needed to purchase.

Topics covered:

Week 1: Ajax overview; partial rendering; Ajax Extension controls; Script Manager
Week 2: Update Panel; Handing client errors; Update Progress
Week 3: AJAX Control Toolkit
Week 4: JavaScript libraries: jQuery
Week 5: Timer, Web Services and JSON Overview
Week 6: AJAX ASP.NET Controls: Telerik

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

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register.

Once there is an understanding of the AJAX engine the focus can be on the actual response and page display; this is where the real power lies. Since rewriting the engine for each project is tedious and time consuming, an object-oriented solution can be very useful. This kind of engine can be reused for all of your AJAX projects and scaled to meet different projects’ needs.

An object-oriented AJAX engine will also help you separate your interface code from your request data, which will enable you to reuse this engine in multiple projects. The AJAX engine is not difficult to construct once you understand the syntax for creating custom JavaScript objects. The first step is to create a constructor function, which will be the access point to the object.

function Ajax() {
	this.toString = function() {return "Ajax"; }
}

This function will become the custom object and will therefore include all of the properties and functions that a standard AJAX engine has.

Here is an example of the engine in its entirely:

function Ajax() {
 
     this.toString = function() {return "Ajax"; }
 
     this.makeRequest =  function (_method, _url, _callbackMethod_)
	{
	     this.request = (window.XMLHttpRequest)? new
XMLHttpRequest(): new ActiveXObject ("MSXML2.XMLHTTP");
	     this.request.onreadystatechange = _callbackMethod;
	     this.request.open(_method, _url, true);
	     this.request.send(_url);
	}
 
	this.checkReadyState = function (_id, _1, _2, _3)
	{
	     swtich(this.request.readyState)
	     {
	           case1:
                            document.getElementById(_id_.innerHTML = _1;
                            break;
                   case2:
                            document.getElementById(_id_.innerHTML = _2;
                            break;
                   case3:
                            document.getElementById(_id_.innerHTML = _3;
                            break;                 
                   case4:
                            return this.request.status;
	      }
        }
}

But in comparison, the main differences between this and the standard AJAX engine is the syntax in which it’s written, the way in which it is used and the speed with which it executes larger amounts of data. The following code is an example of how to use the AJAX object:

var ajax = new Ajax();
ajax.makeRequest('GET', url, true);

Another major change is the response handling, which gives us more control over the loading message and changes targeting of the AJAX engine’s methods. Here is an example of the entire request.js file for the XML request that we used in the standard engine using the new object-oriented engine:

var ajax = new Ajax();
function onResponse()
{
      if (ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
	{
	     var response = ajax.request.responseXML.documentElement;
             var header = response.getElementsByTagName('header')[0].firstChild.data;
     	     var header = response.getElementsByTagName('copy')[0].firstchild.data;
 
  	     document.GetElementById('body').innerHTML = "<b> + header + "</b><br/>" + copy;
	}
}

The code is cleaner and the separation is much easier to understand. Although the standard AJAX engine works fine for making requests, it can become cumbersome to maintain. With the object-oriented engine we can begin to add more power to our applications.

The magazine has some great information on topics such as Ajax, code optimization, mashups, jQuery, web application testing, event handling, EXT JS, OOP, and much more. Its unique content, focusing on mainly JavaScript related topics, keeps me continously learning new things in the JavaScript world. Talented developers write different articles each month so content is always new and comes from different perspectives.

The monthly issues (.pdf) are only $4.99 or you can purchase a years subscription as well. It definitely is worth the small investment if you are a JavaScript developer or interested in learning more intermediate to advanced JavaScript topics.

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 = "<br>" + response.header + "</b><br/>"
 
     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.

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 $30 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).

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register.

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.

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

Checkout http://www.understandingwordpress.com for more information and additional resources on WordPress.

Introduction to WordPress: ($25) Six lessons guiding you step-by-step through all of the basic aspects of WordPress development.

• Manual installation of WordPress software on a remote web server.
• Understanding the Dashboard interface
• Installing different themes to change your blog design.
• How to use plugins to extend the functionality
• How to market and monetize your blog
• SEO tips and tricks
• Review of WordPress template tags
• Learn the basics of PHP syntax.
• Creating a basic theme from scratch (including example files).
• Code review of basic theme (line by line).

View the complete first lesson (.pdf) to give you an idea of how topics are covered.

Intermediate WordPress: ($5) One lesson on how to setup and install a local ‘development’ blog on your home computer.

Once you creating your online blog, you will probably want to continue ‘tweaking’ it (themes, plugins, pages, etc.). Professional designers and developers always have a local environment to develop and test before it goes ‘live’. WordPress is no different.

• Easily install Apache, PHP, and MySQL on any Windows PC (or Mac)
• Setup a local installation of WordPress as your local ‘development’ blog site

Intermediate WordPress: ($15) Three lessons showing you how to create a theme from scratch.

• Blog design considerations
• Development of a 3-column HTML/CSS theme mockup
• Explanation and use of various WordPress template tags
• Breaking up mockup to various template files
• Understanding template files for use with static pages
• Creation of a Magazine format WordPress theme
• Debugging and troubleshooting best practices
• All files (JPG, HTML, CSS, PHP) included

View a partial third lesson (.pdf) to give you an idea of how topics are covered.

Intermediate WordPress: ($5) One lesson on learning more useful plugins that can be used with your blog.

• Speed up your blog’s performance
• Help you get more traffic
• Give better search results
• Display multiple posts more efficiently
• Add a forum to your site

When Do the Courses Start?

You can start the class anytime you want since after you sign up, I will send you all the materials for class (lessons in PDF format). When you have any questions about the material you can just send me an email.

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.

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 JavaScript: Unobtrusive Programming 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 $30 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).

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register.

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!

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:

<?php
/* 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="<?php echo 
(!$_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.

This 6-week class will continue from my Beginning Web Development with 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 $30 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).

When Does Class Start?

The class runs five times a year for six weeks in January, March, May, August and October. To learn more view the course description page and contact me to find out the exact date on when you can register.

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).

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.

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.

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

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).