Rather than take a traditional page-design approach, we architected the database and interaction to be slim and exchangeable. First, the database was managed by use of two .NET-based Web Services written in C# that ingested via POST marking transaction success with 32-character IDs, output via XML and with multi-purpose edit functions using switches and variable inputs. Next, the authentication was built on a combination Basic and session-based approach using ASP – quick and efficient and easy to modularize should the system need to be moved to another platform. Finally, the front-end was built on a single HTML page with jQuery and jQuery UI to support the large number of Ajax exchanges and interactive features.

The result is a clean, easy to use, transportable DAM-CMS capable of complex transactions (multi-tiered, synchronous updates), hooks to a Silverlight-based rough cut editor from Southworks, and most of all, easy and quick to modify without affecting the production environment. By deploying a single jQuery-based controller separate from the parser and presentation components, new objects could be introduced to the interface based on a modifiable, dynamic XML document at login (or pushed in real-time, even after the user had logged in).

Some of the things we learned seem pretty silly but in fact were critical to the project completing in such a short amount of time.

First, segregate all the processes – by constructing the database, the web services, and the interface separate from each other, different developers could rapidly deploy all of it and mesh together quickly at stop-points each day. Chandler and I (with a big assist from Srini and Mio) were able to work independently and merge as he completed parts of the web service, or make changes as parts of the interface came together. Likewise, during testing, changes to the interface and sequence could be done in real-time and re-tested within minutes instead of having to go back to the drawing board. This was eased by the fact that issues could be easily attributable and divisible to interface or back-end, and handled separately.

Second, it’s the little things that make a difference. Providing small visual cues – update notifications at the top of the page that disappear, Ajax loader starburts, highlighted labels and input boxes – all give the user information, information that helps them get through difficult or tedious and complex processes (for example, in creating a VOD asset, a user had options that might require upwards of 50 different pieces of information – eliminating unnecessary components on the screen made it easier to get through).

Finally, architect it but be flexible. Changes happen, and while developers and project managers all try to keep scope creep from happening, we all know that in the real world, so does feature change. It is unrealistic to assume that projects will get started 6 months before the deadline. It is also unrealistic to assume that, in such a project with a short deadline, that you’ll remember to include everything. Likewise, it’s also unrealistic to assume that during the process you’ll realize that the planned interface will work – prototyping is great but it takes time and testing that you may not always have. Being able to be flexible by following a basic interface design, using modular builders (in jQuery UI or other framework) and XML-based instruction sets, and providing error catching systems in both the front-end as well as the web services makes the project continue to move, even when not all the parts are correct.

In the end, we had a lot of hiccups and it didn’t go as smoothly as we’d hoped but it did get done and delivered on-time. The client goes to training in 9 hours and there will likely be another round of changes, but that we were able to post a full-featured DAM CMS in such a short amount of time gives us new methods and targets for the future.

I have always told my students that the best way to get backup help is to go to the bookstore, site down, and read 10 pages out of each book on the topic, and find the one that “speaks” to them. A teacher’s recommended text, the school’s required textbook, it’s rare that student find them legible or helpful (I think my logic teacher went out of her way to find the most confusing book on Earth). Find the book that they understand and start working. Work every day. Work at least 15 minutes or 30 minutes every single day, doing the exercises over and over, changing little things, until the whole concept is solved.

But not every great book can be found at the store. Of course there are the online standard – w3schools.com for example – and the plethora of smaller resources. But it is always a treat to find an online resource that has both extensive resources and is also an easy, if not opinionated, read.

Such is “Eloquent Javascript,” authored by Marijin Haverbeke. I remember coming across it a few years ago but a posting on DownloadSquad reminded me of it. It is available in its entire text online (in HTML) as well as via downloadable PDF. As with most good resources, I recommend grabbing the PDF (and if you’re ambitious, a local copy of the HTML) before the perishability of Web documents steals it away.

While is why I am extremely proud of the evolution of the CMS that I designed and built for the Wimbledon Live player (see this post).

To understand the complexity behind designing the UX it’s important to understand the nature of the data and the critical effect of the workflow. First, video was being supplied from six sources, some to us using Saviant direct to our servers, some we pulled via FTP, and then of course the live streams (some HD and some SD). Then there were multiple parties…NBC (as the news reporter) needed editorial control over metadata, while iStream’s Managed Webcasting team needed to control the timeline over when items went to publication. My team, RnCS (Research & Creative Services) needed to insure that everything was tested before going live so we needed to throw the whole thing through a staging server before hitting a production server that then fed a cluster of edge servers on Akamai’s network.

So we structured it in several parts. First we put automated bots to determine when new assets had been dropped, specifically seeking out XML files that held the initial metadata, and dropped that into the CMS DB. Once there, the appropriate parties were notified by email (or in my case as PM, by SMS) – to update metadata, insert images, begin video transcoding, etc. Through the entire process, we designed screens to make it as easy as possible to follow the flow of assets, provide enough ability to each staff person so that overlaps in duties existed but that checkpoints assured data integrity throughout.

The grid above, for example shows the visual layout of the thumbnails that would appear in the cover-flow style playlist inside the player. Deep linking was provided so editorial users could create pointers on the MSNBC/NBCSports sites. Drag and drop allowed us to reorder objects to maximize the visibility of prominent players.

Each level of user had various modal windows to insert data. Even imagery was uploaded first to the staging, processed for size and then sent to production.

Because of the nature of edge servers, we also had to purge the cache after any update, so we provided a three-section grouping that allowed us to send the feed XMLs to production and clear the cache in one shot. And to make THAT process even easier, we built it so that it was accessibly by mobile phone so even if I was in transit, I could still update the CMS in a timely fashion.

Finally, the live streams had the ability to be toggled on and off so that the matrix of available feeds, particularly the Smooth HD stream, was optimized and prioritized. To be sure, there was still much room for improvement but given that the whole CMS was built in 6 days and now, five days into Wimbledon, has eased us into a steady, smooth workflow, speaks volumes for making it easy to use, intuitive (for example, the color designations on the player match the ones in the CMS, big text and extensive micro-transaction Ajax created an interactive environment), and overall a good experience.

Once installed, it adds an additional panel to the FireBug console labelled “Reference”. Check out the screen shot to see the changes and be sure to get all the details on SitePoint’s web site.

Forum Post: design or develop first?

Q: "just wondering if I should go about designing my site first before implementing any back end capabilities. i like to keep things organized and plan ahead. It would seem to make sense to create the static site first but i am somewhat unsure if I were to design first and end up redesigning to fit everything I plan on adding later, in terms of dynamic content."

R: "The approach you take probably depends on whether you are more of a designer or more a developer. A developer would tend to do the back end first without worrying too much about exactly how the page will look until after they know that it all functions properly. A designer would probably get the page looking exactly how they want and then worry about how to get it to function correctly. If you have separate people performing each of these tasks then all that needs to be done first is to define the interface between the two so that the two almost separate parts can be done separately in the knowledge that they will fit together once both are done."

Article: HTML or XHTML: Does It Really Matter? (excerpted, July 9, 2008 by James Edwards)

HTML was originally conceived as a semantic language, in which elements should describe only the meaning of their content, not the presentation. However, this good intention didn’t hold up very long.

In 1997, the HTML 4.0 specification was published, and although it continued to include presentational markup that had been instigated directly by vendors, it also began a push to clean up HTML, calling some markup “deprecated” and suggesting that it not be used.

XHTML 1.0 came along in 2000 as formalization of HTML 4 into XML. XML itself had been standardized in 1998 as a general specification for defining markup languages, and was a stricter and simpler offshoot of SGML, the Standard Generalized Markup Language from which HTML itself was originally derived.

XHTML is still worth using, because it’s a transitional standard that moves us towards a pure-XML Web. XML is inherently better than SGML, because it’s simpler and stricter, and much easier to parse (once you’ve understood its rules). I don’t know from where we’ve adopted the idea that we should be forgiving of markup errors, but I don’t share that view.

And some other choice reads:

• Custom Web Fonts: Pick Your Poison by Kevin Yank
• Fancy Form Design Using CSS by Cameron Adams
• 10 Tips for Being a Greener Web Designer by Matthew Magain

TIOBE Index, July 2008 by TIOBE bv

Position		Delta	Language	Ratings Jul 2008	Delta Jul 2007	Status
Jul 2008	Jul 2007
1	1		Java	21.345%	+0.33%	A
2	2		C	15.945%	-0.42%	A
3	3		C++	10.693%	+0.19%	A
4	4		(Visual) Basic	10.447%	+0.72%	A
5	5		PHP	9.525%	+0.87%	A
6	6		Perl	5.131%	-0.20%	A
7	8		Python	4.973%	+1.95%	A
8	7		C#	4.000%	+0.29%	A
9	9		JavaScript	2.757%	+0.24%	A
10	10		Ruby	2.735%	+0.64%	A

(For my students) In case you’re wondering why HTML is not included in this list, the definition used by the index is:

A language is considered a programming language if it is Turing complete. As a consequence, HTML and XML are not considered programming languages. This also holds for data query language SQL. SQL is not a programming language because it is, for instance, impossible to write an infinite loop in it. On the other hand, SQL extensions PL/SQL and Transact-SQL are programming languages. ASP and ASP.NET are also not programming languages because they make use of other languages such as JavaScript and VBScript or .NET compatible languages. The same is true for frameworks such as Ruby on Rails, ColdFusion, Cocoa, and technologies such as AJAX. Finally, we have also excluded assembly languages, although Turing complete, because they have a very different nature.

And finally, for those of you in my weekend classes…yes, it’s 2 hours after class and yes, I am still up.  Good night.

“Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.

So how does one create sexy stylesheets? What characteristics would your stylesheets have?

A few months ago, I had the opportunity to present on this very topic at Web Visions 2007 conference in Portland, Oregon. In preparing my presentation, I surveyed twelve people who work in web design and development. The results of this survey, combined with my own work experiences helped me to compile a list of essentials to remember when creating stylesheets.”

01. Keep CSS out of the markup.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.

It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets.

02. Semantics is not just a buzz word.

You know I have to bring it up; semantics are your best friend. Beyond choosing the most appropriate, meaningful elements to describe your content, make sure also that you’re choosing semantic class and ID attribute values. Besides being the “right thing to do,” it really does make your life easier (and it makes the lives of your fellow team members easier too– if you working as part of a team). Take a look at the following rule:

.l13k { color: #369; }

If you were new to the job, and you saw that in the CSS file, are you going to know right away what that class is for? Most likely not. This class name could be an abbreviation for something, but there’s no real way you can tell right off the bat. Alternatively, maybe you put it there, so you know what it means, right? Today. But will you know what it means three years from now?

Now, let’s take a look at this rule:

.left-blue { color: #369; }

You might immediately know what purpose this class selector serves as you know exactly where the left-side blue module appears. So it would appear that this works. Until along comes that redesign you have to build in a week, as I mentioned earlier. In the redesign, this module is now to be positioned on the right, and colored red. The class attribute values no longer makes any sense, so now you have to either change all your attribute values, or leave it as it is (which could lead to mass confusion).

It is always best to refrain from using colors (either the color name or its hex value) or width/height dimensions in your class attribute values. You should also avoid any attribute values that are presentational (such as “box”).Presentational attributes defeat the purpose of separating presentation from content.

Finally, let’s look at this more appropriately named rule:

.product-description { color: #369; }

Here you can see that the rule styles product descriptions, no matter how many times your design changes. Clarity is a beautiful, beautiful thing.

03. Take advantage of commenting.

Commenting your CSS files can be a great deal of help to you and others during development if you use comments in creative and meaningful ways. At the most basic level comments provide little reminders why a certain rule is used. But you can use comments to really help improve organization and efficiency.

Reminders and notes

The common approach for commenting, leaving reminders and notes for yourself and other developers can help avoid confusion later. Keep these brief and simple. For example:

/* Turn off borders for linked images */
img { border: 0; }

Time stamp and signature

Some designers and developers also note the date and time that the CSS file was last updated, along with their name or initials. This information can provide a quick indicator of who to contact, as well as how up-to-date the file is.

/* Sushimonster Typography Styles
   Updated: Thu 10.18.07 @ 5:15 p.m.
   Author:     Jina Bolton
   ----------------------------------------------------*/

Depending on the project, this can be a good idea, particularly if you are working on a team. Keep in mind that some organizations require leaving this type of information out (some companies prefer to keep names and dates out of files), so it is best to find out if there is a mandate on this sort of thing.

Organization

It’s a good idea to use comments to indicate the different sections within a CSS file. For example, if all header styles are grouped together, you can use a comment to section these styles off from the next section’s styles:

/* HEADER
   ----------------------------------------------------*/

I’ll go more into this a little later, when discussing “Separating style types.”

Comment flagging

If you have your CSS file organized into sections as I described above, comment flagging can also be useful to make it easier using FIND to skip down or up to the parts of the file you want to see. You can use a character (such as an equal sign [=]), along with a keyword (typically the name of the section, such as “HEADER”) to provide “anchors” in your CSS file:

/* =HEADER
   ----------------------------------------------------*/

This is particularly useful in long and complex stylesheets. You can read more about this at Stop Design.

Reference

A less common, but nonetheless useful approach is to use comments as reference guide. One example of this might be to include a color guide as you can see in Steve Smith’s CSS file:

/* COLORS
   Body Background:       #2F2C22
   Main Text:             #B3A576
   Links:                 #9C6D25
   Dark Brown Border:     #222019
   Green Headline:        #958944
*/

You should place this guide at the top of your CSS file to help you remember what color values you use throughout your site. Another example is of an index-like approach. Here you can define different sections so that you can jump down to them (perhaps by using comment flagging). Here’s one example:

/* GENERIC
   HEADER
   SIDEBAR
   FORMS
   TABLES
   FOOTER
*/

/* =GENERIC
   ----------------------------------------------------*/

04. Know when to use conditional comments or hacks.

There are many articles regarding the problem with hacks, and why Conditional Comments are a better way to handle Internet Explorer issues. Then there are articles that say otherwise. While I agree that Conditional Comments can be a much better solution than littering your CSS file with hacks, only recently have I come to realize there are instances where they are actually not the most appropriate solution.

Imagine that you want to set a minimum height for an element. The IE6 developers did not implement min-height, so you know that you can use height, which will be treated the same way. Does it make sense to create a whole new stylesheet, and inject it by way of Conditional Comments in your markup, when all you need is this one rule? Would it make better sense to keep the min-height and height rules together, and opt for a small “hack” within the same CSS file? In this case, I would consider it less efficient to use Conditional Comments.

Another thing to consider: if you have multiple places that your styles are located, using multiple CSS files and Conditional Comments can make your debugging process more difficult. Also, if you need to alter something (perhaps the min-height value in the above-mentioned scenario), you have to open more than one file to make this change. In many cases, this may not be such a big deal for you, but imagine if you have something defined in your main CSS file, and then redefined in 3 different IE stylesheets. That could turn out to be a hassle later down the road, especially if another developer making the edit doesn’t realize that these overrides exist.

If you do use Conditional Comments, I recommend leaving a comment in your main stylesheet letting you or a fellow developer know that an IE-specific rule exists. That way when you have to edit a height or something of that nature, you know that you have more than one file to open.

As always, if you do use hack, remember that browser updates can change what works later down the road, and the hack you use now may not work later versions.

05. Organizing selectors and declarations

Always, always keep your CSS clean and organized. I prefer organizing my selectors by style groups:

• reset styles
• typography styles
• layout styles (header, content, footer, etc.)
• module or widget styles
• etc.

Then, within each of those groups, I organize selectors by DOM hierarchy (working down the page, from the outside in):

• any parent styles (containing elements, working outside-in)
• block-level element styles (paragraphs, lists, etc.)
• inline element styles (links, abbreviations, etc.)
• etc.

Then within those, I work by element types:

• paragraphs
• blockquotes
• addresses
• lists
• forms
• tables
• etc.

Finally, I prefer to organize my CSS declarations by style type:

• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles

Some people like to organize declarations alphabetically. It doesn’t make sense to me, but it might make perfect sense to you. Whichever method you choose, stick with it, and be consistent.

06. Creating a framework

When it comes to developing CSS, If you find yourself doing the same things repeatedly, it is a good idea to consider creating a library or framework. A framework can be made up of a group of stylesheets that act as a foundation for your site, and help speed up your development time. Typical stylesheets you may find in your framework might include:

• screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
  • reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
  • typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
  • grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css – A print CSS file would include your styles you want to be used when the page is printed.

One example of a framework is the Blueprint framework put together by Olav Bjørkøy (which based itself off of work developed by authors including Jeff Croft and Eric Meyer). Another popular framework can be found at the Yahoo! User Interface Library. Many developers do feel that these pre-built frameworks contain markup and CSS that are a bit “bloated” and also that they contain presentational class attribute names.

NOTE: As I was writing this article in its draft stages, Jeff Croft released the post What’s not to love about CSS frameworks?, in which he mentions in the comments he was told that people think I am strongly against frameworks. I’m not sure where this came from, but as I stated in my response, I am not against CSS frameworks, and am very much for them.

For the best results, I recommend that you create your own framework that works best for you or your organization.

07. Balance readability and optimization.

Styles in formatting vary from developer to developer. Some developers use formatting styles that offer great readability, and then optimize the files (removing comments, spaces, tabs, carriage returns, etc.) before pushing the file live. This is a great technique and one I would recommend (done carefully). However, if you are somehow in a situation where you can’t really go through those steps, try to find a style that balances readability and optimization. Steve Smith has a great suggestion that offers a little bit of both.

Also, consider using hyphens instead of underscores. Microformats use hyphens as a standard separator, and certain older browsers have a hard time with them. You can read more about this at Underscores in class and ID Names.

08. Master your text editor.

Just as an artist has proper tools they know well, it’s important for a designer/developer to know the tools they use well. For CSS, that would be the editor you are using.

There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc. I’m not here to tell you which one to pick; they all have their pros and cons, and the right editor for you is up for you to decide. However, once you have decided on a text editor, make sure you learn everything you can about it. Find out what the shortcuts are, and learn all the tips and tricks you can.

Mastering your text editor is the best way to speed up your development time, and help you be more much more efficient when creating sexy stylesheets.

09. Use version control.

Smoother maintainability is also an important part of creating sexy stylesheets. This is where version control can be your best friend. It’s not only helpful for teams, but it can be a lifesaver even for the sole designer/developer.

Some applications have built-in mechanisms for source control. DreamWeaver uses a check-in/check-out system (that can help make sure that a developer doesn’t edit a file that is already currently being edited), as well as synching capabilities (which lets you sync and merge your local files with your remote files, or vice versa). This can be very handy, but are somewhat limited.

Subversion (SVN) or Concurrent Versions System (CVS) are great tools to use for more robust management, with additional options, like being able to revert, view changes (which is extremely helpful for teams — you can track who added/edited/removed code and when they did it), and resolving conflicts. There’s a great article by Jonathan Snook, called “Hosted Subversion” you can read for more information on how to set this up quickly and easily.

10. Create and maintain a style guide.

While in some cases, a style guide is an author’s guide with grammar rules and writing standards, it can also be used to outline standards for design, development, and content. A style guide is a great way to have a reference manual that can clarify rules on typography, grid, color, image sizes, etc.

When creating a style guide, it is a great idea to provide reference for the markup and CSS. This reference can be used as a handbook for the development team and future developers. It can include defined layouts, in which you can list the different layouts that can be used, and provide the associated markup and styles.

Finally, you can also leave steps for quality assurance for developers, (such as checking validation and accessibility) to ensure the highest quality.

Conclusion

Being an expert in CSS is so much more than having advanced CSS skills (i.e.: fully understanding the cascade, the box model, and how browsers work). I encourage you to think about ways you can constantly and consistently improve maintainability and efficiency. Think beyond what is designed in the comp, even if that is all that you have been provided. Make the CSS intelligent and plan for the future. Overall elegance in workflow is essential to master.

Most webmasters go totally “gaga” for top 10 rankings in Google. And for good reason, Google is the most dominant search engine on the net and will deliver the largest amount of traffíc.

More importantly, those same webmasters will also inform you, getting top 10 rankings in Google often means your site will prove profitable. Mainly because obtaining targeted traffíc is usually your first obstacle in creating a viable online business. In other words, if you get top ten listings in Google for good searchable keywords, it is almost impossible not to earn money.

How To Proceed?

First, you must know the rudimentary basics of how keywords work. Keywords and keyword phrases are the exact words someone types into a search engine to find what they’re looking for online. If you have a site on “dog training” then your goal is to get a top 10 ranking for the keywords “dog training”.

Now if no one searches for “dog training” it would be a useless keyword, you would get no traffíc no matter how perfectly your site is optimized for that keyword.

How Do You Know If A Keyword Is Good?

To find out, you have to do some keyword research on your particular keywords. Many professional online marketers use keyword research software like Brad Callen’s Keyword Elite. However, you can also use the keyword suggestion tools supplied by Google Adwords or Overture. Try here: http://www.digitalpoint.com/tools/suggestion/

Now if you chëck “dog training”, you will find it receives around 4,469 searches each day. That’s a lot of traffíc but you must realize that it may be too good, or rather too competitive for your purposes, especially if you have a new site.

Biggest Mistake When Choosing Keywords

The most common mistake most novice webmasters make is targeting keywords which are too competitive. You simply will not be able to compete or place for extremely competitive keywords. Well established sites and businesses with very deep pockets have the resources to completely dominate those keywords.

While it is not entirely futile nor a waste of time to concentrate your efforts on highly competitive keywords, you will have better success if you target low to medium competitive keywords.

Long Tail Keyword Marketing

Besides online marketers have discovered that longer keyword phrases are usually the most lucrative. These phrases deliver traffíc which is better targeted and more likely to convert into a sale. “Dog hunting training” which gets around 100 searches a day will be more targeted than the general term “dog training” and if you have a site devoted to training hunting dogs then this keyword phrase may convert better for you.

Always keep this “Long Tail” keyword strategy in the back of your mind as you implement the following steps to achieve your own Top 10 Rankings in Google.

1. Make A Master Keyword Líst
Your first step is to make a master líst of the keywords you wish to target. Obviously these should be closely related to the theme of your site. Chëck the keyword competition by seeing how many sites are listed in Google for that keyword. Webmasters should also chëck the Google PageRank of the sites that hold the top 10 positions. If all those sites are PR6 and above it may be hard to get ranked high for your keywords.

2. Choose Related Keywords
Once you have your master líst of keywords, find long tail related keywords to target. Again, chëck out the competition and daily searches made for each chosen keyword.

3. Use Quality Content For Your Keywords
Creating quality content should always be your main goal. Write for actual visitors who will see and read your content. First and foremost you must have good useful content that your visitors will use themselves and recommend to their friends or colleagues. Tie this quality content in with your chosen keywords. Use one keyword phrase per page.

4. Keyword In Domain Name, Title and URLs
Having your keyword in your domain name will score big points from search engines. Plus, each page of content should contain your keywords in the title & meta tags for that page. Most experts also suggest you have your keyword in the URL and use hyphens to separate your keywords. Although the author has gotten good results by using an underscore and htm in URLs.
Example: www.yoursite.com/your_keyword.htm

5. Do On Page Optimization
Keyword ratio is a much discussed topic by SEO experts and many suggest you should have your keyword in the H1 or headline title of your page. Sprinkle your keyword and variations of it throughout your page. Don’t over do it but make sure the robot/spiders will clearly discover what your page is about. Many webmasters make sure they include their main keyword in the first and last 25 words on their pages.

6. Use Traffíc Modules
One technique that works extremely well in Google is clustering a closely related topic or subject into a distinct separate section on your site. For example, if you have a marketing site, you could create a whole section on article marketing where you would have 50 to 100 keyworded pages all relating to your subject. Writing articles, formatting articles, submitting articles, article software… place a keyword linked menu on each page to connect all your pages together.

Keep in mind, your main objective is to supply quality information to your visitors. One reason Google may favor this type of structure is because they want quality content returned in their SERPs.

7. Try Article Marketing
Side Note: iStreamPlanet uses this tactic widely – the last article I posted (my shameless promotion) was a reprint of a press release that was released July 10th (2007). As of July 13th, the search term “istreamplanet silverlight” in Google yields 173 returns which pushed several pages past the PR6 mark into the elusive PR7 realm.Article marketing is writing short informative articles on keyword topics related to your sites. You then submit these helpful keyworded articles to ezine directories on the web. When your articles are picked up by related sites, you receive quality One-Way links. The higher the quality of your article, the more links you will receive.

Another ranking tactic to use: If you’re just starting out your site will probably have a low PR rank and you will find it hard to rank for even modest keywords. That’s why it’s useful to take advantage of the higher PageRank of the major ezine directories. Your keyworded articles on these high PR sites will get picked up by Google and displayed in the top 10 rankings. Now the displayed URL will be the article directory site but the links in the resource box will be pointing back to your site. Over time this article marketing technique will raise your own site’s rankings for those keywords. Simple but effective.

8. Anchor Text And One Way Links
Off page optimization is important in obtaining high rankings in Google. Getting quality One-Way links is very important. Anchor Text simply refers to “the underlined clicked on words” in your links. Most webmasters include their keywords in their anchor text as this tells the search engines exactly what the links are about.

9. Tags, Blogging And Web 2.0
Take advantage of Web 2.0 by using blogs, RSS feeds and the social bookmarking sites like Reddit and Digg. Try AddThis.com for a simple social bookmarking system. At the very least your site should have a blog and RSS feed attached to it as this is an effective way of boosting your keyword rankings.

Tags have become very important for getting higher rankings. Keep in mind, in free blogging software such as WordPress, categories will automatically be seen as tags. Blogger, which is owned by Google, now has a form where you put your keywords (tags) for each post you make.

10. PPC vs Organic Search
Of course, one of the fastest ways to get your links displayed on Google is to pay for them by using Google Adwords. Your ad and links will sit side by side with the organic link results. In Pay Per Clíck advertising you bid or pay so much per clíck for your keywords and you only pay when someone clicks your links. But smart marketers also know since you’re getting millíons of impressions advertising your products, acquiring name recognition and branding through PPC advertising can be a major side-benefit.

However, most webmasters would say that organic links (SERPS) will return better traffíc than paid links or advertising. In most cases, this may be true because Google’s organic rankings are becoming more respected and more trusted by users. They simply carry more weíght with surfers.

This makes it even more beneficial to obtain top 10 rankings for your keywords in Google. Depending on the competitiveness of your chosen keywords reaching the first page listing or even the favored number one spot is well within any webmaster’s reach. Just go for it. The rewards are well worth your efforts.

About The Author
The author is a full-time online marketer who contributes his high rankings in Google as the major source of his online income. For the latest web marketing tools try: MarketingToolGuide.com. For the latest Internet Marketing Strategies go to: BizwareMagic.com . Titus Hoskins. [This article may be freely distributed if this resource box stays attached.]

Here’s the scenario that we faced.  iStreamPlanet produces a software application that is run during live poker tournaments which places an overlay on top of the encoded video similar to poker tournaments you might see on TV.  The actual system uses an interface built in C++ that writes an XML file as it is updated, which in turn is read by a Flash component layer and then drawn into the video card (the result is something that looks like the image below).

For those of you who have been through any of the scripting classes, by now you should recognize that this needs a multi-dimensional array to work best.  Don’t be scared off by multi-dimensional arrays – think of them as just Excel spreadsheets.  So if you have a spreadsheet that looks something like this:

Then the your array would have been written as:

Download the materials here: Multi-Dimensional Array Sorting from XML Data in ActionScript (ZIP)

In the course of adding components to the application, we needed to output the current chip counts of each player and present them in order of most to least chips.  Of course, our XML ordering was based on the C# output which was not sorted and also contained string data where we needed to sort numerically.

First, we read the XML.  To do this you’ll need to open a socket:

Next, we created a function that broke up the data and put it into the array.

At this point we need to consider how to sort the data.  Remember that our original spec required that the output be sorted in descending chip count order.  But notice that the XML data that has symbols in it.  If you know a bit about programming, you’ll know that sorting is done based on the operating system preference.  In this case using a normal sort() function, Player 7 (Roosevelt) with $15,616 chips would be first…

While ActionScript does have conversion capabilities, the problem in this scenario is that the symbols will not allow conversion to a numeric.  So let’s create a function that will “convert” the formatted field into a number.

Using the conversion function (and note, you can use this function – albeit very simplistic – to do pretty much any type of string replacement), now we can finish off the original function.

Now test the movie (Ctrl+Enter) and check out the chip counts.

Incidentally, if you’re a poker buff, check out how this actually looks on screen by watching the World Series of Poker at http://www.worldseriesofpoker.com/

Web 2.0 ‘neglecting good design’ 
Hype about Web 2.0 is making web firms neglect the basics of good design, web usability guru Jakob Nielsen has said.  Read…

Web 2.0 Tutorials Roundup
…over 65 tutorials, references and related resources, which are supposed to help you to create graphics in Web 2.0-Look.  Read…

Royalty-Free Stock Images
Need I say more?  Add this to your favorites…

Some theory behind Mac OS X’s menubar
Interesting theory on Mac’s UI that has implications on web design even though we don’t really think about it much.  Follow the links to the stuff about Fitts’ Law as well.  Read…

HTML 5 Issues on the Table
Arguments about HTML 5 specifications about … yes, I said HTML 5.  Why they’re bothering is beyond me but I guess there is a place for everything.  As indicated by Chris Wilson of Microsoft (in more than a few words), look for what amounts to more bloat in MSIE (and probably every browser) as a result.  Read…

Recommended Book
If you plan to buy any book on Web Design, keep an eye out for this one … Principles of Beautiful Web Design by Jason Beaird … fantastic book that covers Garrett’s Skeleton and Surface planes in much more detail.

For  those of you with WordPress site(s) …
WordPress 2.2 has been released and I am in the process of upgrading Mobimeet to it.  WordPress and Automaticc indicate that there are some significant changes (for the better presumably) so you may want to look into it.  Of course, don’t fix what ain’t broke but there may be some nice tools in the new code…
WordPress 2.2 Upgrade
WordPress 2.2: Three Things Developers Will Like
10 Things You Should Know About WordPress 2.2

The parameters of the topics will be pretty broad so if there’s something that you’ve wanted to learn how to do, we’ll tackle it.  I want to hit up AJAX for at least Week’s 9, 10 and 11 so keep that in mind, though we can start earlier if you want to.  There will still be homework assignments.  Expected topics:

• Week 6: Dynamic Javascript and CSS interaction
• Week 7: Dynamic Javascript and CSS interaction
• Week 9: Introdiction to AJAX
• Week 10: Final Exam & AJAX with basic PHP 
• Week 11: AJAX and APIs

We will still have a final and now it will cover any ideas, thoughts, functions and concepts that we do in the class so missing a class will be detrimental to your academic health!  Hopefully from this we’ll get some serious practical work in place and dispense with the abstract.  Thoughts/comments?

1. No Author Biographies 
2. No Author Photo 
3. Nondescript Posting Titles 
4. Links Don’t Say Where They Go 
5. Classic Hits are Buried 
6. The Calendar is the Only Navigation 
7. Irregular Publishing Frequency 
8. Mixing Topics 
9. Forgetting That You Write for Your Future Boss 
10. Having a Domain Name Owned by a Weblog Service

Read the complete article here.

For 2007, the compilation includes:

1. Bad Search 
2. PDF Files for Online Reading 
3. Not Changing the Color of Visited Links 
4. Non-Scannable Text 
5. Fixed Font Size 
6. Page Titles With Low Search Engine Visibility 
7. Anything That Looks Like an Advertisement 
8. Violating Design Conventions 
9. Opening New Browser Windows 
10. Not Answering Users’ Questions

Supermarket 2.0 at Glumbert

First and foremost, the fact is that they are a hack – they are ostensibly Javascript code that provides a certain amount of information about a site to the public at large as well as search engines.  From the perspective of the way things are going on the web – decentralization of content provisioning (with blogs and YouTube and MySpace, the world is full of information being generated by the public), and the Web 2.0 move towards open API’s, badges are much like the problem of hot-linking we used to contend with in the old days.  Plus, since the search engines use this information, isn’t it moving us away from actual “linking” and just letting someone else control the traffic flow?  Second – add too many and you build serious congestion in your space as well as leave enormous footprints all over the place.  Both of these don’t even address some of the issues in this very well written article (Javascript Badges and Widgets Considered Harmful by Jeremy Zawodny) such as skinning, security and incompatibility.

I use badges mostly because at the moment I am using it as a testbed.  Otherwise I would probably avoid them and go back to the days of manual linking.  However, including a couple somewhere in your blog is probably a good idea if you’re trying to build visibility.  Now for the links:

• Javascript Badges and Widgets Considered Harmful
• Badged.net
• Digg.com
• Sphere.com (see my last post about Matt Mullenweg)
• Technorati
• del.icio.us

Have fun figuring it all out!

The bittersweet comes in the fact that now I won’t have to spend $15 a month for a paper-wasting glossy publication.  But even the indulgent side of me admits that there was something really nice about picking up the rag every month, complete with it’s 700MB CD of free utlities.

In any case, it will be interesting to see if the new envisionment of the magazine stays true to form – the mag has an huge following in the UK.  On a side note, what’s really interesting is that they kept the staff and the fact that they are pushing towards .NET while the staff is largely pro-Mac and anti-MSIE should produce some paradoxical articles.

And another side note – if you do happen to glance through this last issue – there’s a fantastic article on one of my heroes of recent, Matt Mullenweg.  Matt is currently the founder of Automaticc, which is the company that designs the architecture and consults for sphere.com.  He started as a writer for CNET and is the creator of (amongst other things) WordPress, bbpress, and Askimet (anti-spam tools for blogs).  Oh yea, and he’s only 23.  And he doesn’t write code.  Pretty phenomenal that a non-technical individual can produce some of the worlds most downloaded and used “software” (I’m talking about WordPress).  Do I hear “usability engineering” somewhere in there?

• the width of the box is limited to the size of the right-side images,
• there are occasional hiccups in the code that cause the lower left image to not reach the bottom corner, and
• it still requires manual imagery

So here’s another way you can consider tackling it.  OK, so we’re borrowing a piece of (LGPL) code from another developer but I have successfully implemented this approach in several places, including this site.

Visit curvycorners.net to download the components you’ll need.  After that it’s pretty simple.  The code itself is DHTML so it combines a nice piece of Javascript with your XHTML-based code.  Essentially it vectors the borders of your DIVs and rounds them out mathematically.

To begin, first add the script to your code:

Next, create the DIV container that you want to add the rounded corners to:

Finally, in the <HEAD> portion of your HTML, add the following:

What I really like about this nifty code snippet is that it is extremely flexible:

• turn the rounding on or off on a per-corner basis
• each corner can have its own radius
• anti-aliasing can be turned on or off
• you can round corners on multiple DIVs by ID or class

Download it, set it up and mess around with it.  One side note – there was a question at one point on how to implement a shadow for the box once you’d rounded it off.  THINK!  There’s two easy ways to do this – you can either script a second div that falls behind it offset by a few pixels, or you can use a shadow filter in your CSS.  Students in the upcoming IMD223 (Advanced Scripting) – we’ll be learning how to do this!

By the way, like most GPL and LGPL scripts, if you end up implementing it, do the right thing and donate to the cause – this type of social morality is what keeps good code out on the Internet and available for developers like us to use.

A good target to set your sights on is to get yourself certified by some authority.  There are tons of certifications we all know about – MCSE, MCSD, ZCE – but most of them require a lot more skill than just web development and design.  Enter CIW.  CIW (Certified Internet Web Professional) is a series of job-role-focused programs that allow you to hone in on your specific skill set. 

The role areas include:

• Foundational (basic web design and development)
• Site Designer
• E-Commerce Designer
• Server Administrator
• Internetworking Professional
• Security Professional
• Web Languages
• Application Developer
• Java Programming
• Database/Enterprise Specialist

Each program is a building block to the four Master level programs:

• Master CIW Designer
• Master CIW Administrator
• Master CIW Web Site Manager
• Master CIW Enterprise Developer 

To start, you must complete the foundations portion – this will make you a CIW Associate, the base level for the course. 

There are shareware programs from uCertify that can tell you the kinds of questions on the exams and the official CIW site has in-depth information about the types of things you need to know.  I won’t kid you, the exams are tough, but they are well worth the effort and a good way to find out how much you’ve learned and still need to learn in your career as a web professional.

As always, I emphasize that building good code is largely a matter of imagination and planning more than it is execution.  So to begin, first imagine what it is that you are building.  A box can be thought of as the sum of several parts.  For this example, let’s say that the box really has 4 parts, the upper left corner, the right hand pane, the side and bottom left pane and the main body.  We also know that with CSS we can place images into the background and even more than that, we can force the image to align as needed.

The example here (which is directly off the sidebars) is downloadable at the foot of this article.  Download and unzip it so that you can get a feel for the images and construction of the code.

First, begin with idealizing what the construction of the box is in (X)HTML.  We know that in order to encapsulate it, we’ll want to create a <DIV>.  Next we know that because there is a header that we want to emphasize, we’ll insert 2 <DIV>s inside the container.  Hence your code should look something like this:

Next, let’s construct the CSS.  You can place the CSS inline or embedded – it doesn’t really matter.  What counts is how you visualize it.  Your CSS might look something like this:

Note that there are 4 classes: sidebox, boxhead, boxhead H3 and boxbody. 

Sidebox is the class for creating the container.  The margin attribute forces it to be centered – therefore if there are a long string of them in a parent <DIV>, it will cause them to float left. The background attribute pulls the right body image and forces the bottom right corner into the bottom right corner of the <DIV>.  The remaining attributes – width and font – are simply formatting values to retain any information from the body class.

Boxhead defines the top portion of the box. The background attribute pulls in and image that covers the one pulled in by sidebox, but we force it to the upper right corner.  The margin and padding attributes allow us to force the corner without the background image in sidebox showing through.  The text-align is optional but forces the next class to the left.

Boxhead H3 defines the header text.  Note that this is a sub-class of boxhead and how it looks in the HTML.  First, it pulls in a small image to create the upper left corner with the background attribute, but note that it has a no-repeat value which causes it to only appear once.  The padding attribute causes the text to have padding of 30px on both the right and left (note that this is the width of the background image) and 8px on the top and bottom – ostensibly vertically aligning it to the middle. The remaining attributes are simply to force the look of the text and can be modified.

Boxbody defines the actual container.  The background attribute pulls in the left hand pane image, covering the background defined in sidebox, with no-repeat values, and forces the bottom left corner into the bottom left portion of the sidebox <DIV>.  The padding attribute forces a padding so that our text avoids the sides of the main content area.

Put it all together and try it!

Download Code and Images