RYMO Creative Services Creative solutions to your technology needs

CSS3 resource review: CSS3.info

There are many great resources for CSS3 and in this review, I am going to highlight the CSS3.info website, which encourages examination and study of CSS3 and implementing it for the web. In addition to lots of resource material, the site offers several important and useful sections including a CSS3 Preview of functions and features implemented in current browsers, a Module Status table, and a CSS Selectors Test. The site also has a community news section that includes introductory articles and news concerning interesting CSS3 material.

Figure A

CSS3.info touts itself as the place to go for everything you need to know about CSS3. The resource offers frequent updates on a variety of topics including previews, resources, news, tutorials, modules, W3C, book reviews, browsers, and more.

Module status

Figure B

The CSS3.info site offers a CSS3 Module Status table which splits out the multiple modules and provides the latest update and upcoming information, including proposed, candidate, last call, working draft, announced, and several profiles designed to suit media such as print, TV, mobile, and reader. For instance, the Selectors and CSS Color modules are complete in the proposed recommendation as last updated on December 15, 2009 and October 28, 2010 respectively.

Selectors testing

Figure C

The CSS Selectors Test helps you determine if your browser is compatible with the large number of CSS selectors. Once you start the CSS Selectors test, you can click on each selector to see the results, including a small example and explanation for each of the tests.

I ran a CSS Selectors Test on IE 8 and 20 and of the 41 selector’s passes, 1 was buggy and 20 were unsupported; a total of 574 tests were run with only 345 passing. Some of the failed selectors included 2 out of 7 for the E[attribute], which included the test for div[align] { }, with the note, “The CSS selector should match the HTML fragment because the align attribute is present and is empty.” On the :nth-child selector, 47 out of 88 tests failed, including the test for div :nth-child(1) {  }, with the note, “The CSS selector should match the marked element, because it is the first and only child of the outer div element.”

Running the selectors test on Firefox 6.02 from the 41 selectors, there were 41 passes, with 0 being buggy, and 0 unsupported; all 547 of the tests passed, and Chrome 13.0.782.220 m had the same results.

Previews

Figure D

The CSS3 Previews section provides a showcase of some of the exciting new functions and features as they are implemented in Firefox, Konqueror, Opera, or Safari/Webkit. Several of the available previews include borders, backgrounds, color, text effects, user interface, selectors, and web fonts.

News

Figure E

The Community News section provides information, introductory articles, and news concerning interesting CSS3 material including such topics as “CSS Animation Principles and Examples,” “Animated notification messages with CSS and JQuery,” and “Little-Known CSS3 Typographic Features,” just to name a few examples.

The CSS3.info website is a great resource with which to start your CSS3 stylesheets, allowing you to find inspiration, learn new techniques, and add more impact to your website designs.

First look at CSS3 web design elements

Along with the advent of HTML5, we are now seeing strides in CSS coding, better known as CSS3. There are several functions and features which can be utilized today to define the styling of such web design elements as display block rules, gradients, tables, fonts, columns, images, rounded corners, 3D text, and transitioning effects. Others include borders, backgrounds, color, text effects, user-interface, selectors, basic box models, generated content, and other modules. This post will demonstrate several of these CSS3 coding examples. Others will be demonstrated in later posts.

CSS3 Modules

CSS3 has been split into multiple modules by the W3C so that their progress can be tracked toward the recommended status, each at a different level as they advance in development. Currently no module has yet reached the Recommendation status. The CSS3.info module status table is updated regularly and includes proposed, candidate, last call, working draft, and announced modules.

CSS3 Display rule

Used in conjunction with HTML5 elements, the following display block styling should be added to your standard CSS file:

address, article, aside,

canvas, figcaption, figure,

footer, header, hgroup, nav,

section, summary {

display:block;

}

Browser prefixes in rules

The following prefixes used in the rules for the more popular browsers are listed below and will help ensure cross-browser support:

• Web-kit is used for Chrome and Safari; syntax is -webkit-
• Moz is used for Firefox and Mozilla; syntax is -moz-
• Khtml is used for the KDE project and Konqueror; syntax is -khtml-
• O is used for Opera; syntax is -o-
• MS for IE; syntax is -ms-

In most cases the actual property of the rule needs to be the very last entry in the CSS style; as such, the webkit, moz, Khtml, MS, and O rules should be listed before the last property of the element of the same rule. For example purposes only, sample prefix rules are shown below in the blockquote border-radius styles:

.entry blockquote.right {

width: 200px; font-style: normal font-size: 1.3em;

margin: 0.3em 0 0.3em 15px padding: 0.3em 0;

border:thin;

border-color:#A0A0A4;

border-style:double;

border-radius: -moz-border-radius(3px double #aaa);

border-radius: -webkit-border-radius(3px double #aaa);

border-radius: -khtml-border-radius(3px double #aaa);

border-radius: -o-border-radius(3px double #aaa);

border-radius: 3px double #aaa;

border-width: 3px 0;

text-align: left; float: right;

}

This example HTML for the blockquote is below, followed by its display in Firefox 6.0 (Figure A).

<div>

<blockquote>

I still find each day too short for all the thoughts

I want to think, all the walks I want to take, all the books

I want to read, and all the friends I want to see.<br />

<strong>John Burroughs</strong>

</blockquote>

</div>

Figure A

CSS3 Gradients

Gradients in CSS3 can include color stops, including even stops, arbitrary stops, linear-gradients, linear backgrounds, radial centers and radial positions. In the example, CCS3 code below, note the fallback color and png image referenced before the prefix gradients, and then the prefix code lines for Safari, Chrome, Firefox, IE, and Opera are listed next.

.gradient1-bg {

/* fallback/image non-cover color  */

background-color:#CCFFFF;

/* fallback image    */

background-image: url(images/fallback-gradient1.png);

/* Safari 4+, Chrome 1-9 */

background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(#CCCCFF), to(#CCFFFF));

/* Safari 5.1+, Mobile Safari, Chrome 10+ */

background-image: -webkit-linear-gradient(top, #CCCCFF, #CCFFFF);

/* Firefox 3.6+ */

background-image: -moz-linear-gradient(top, #CCCCFF, #CCFFFF);

/* IE 10+ */

background-image: -ms-linear-gradient(top, #CCCCFF, #CCFFFF);

/* Opera 11.10+ */

background-image: -o-linear-gradient(top, #CCCCFF, #CCFFFF);

}

The example below shows HTML code for the linear gradient followed by its rendering in Chrome 13.0.782 (Figure B).

<p><strong>Linear Gradient</strong> Top to bottom gradient</p>

<div></div>

Figure B

CSS3 Tables

Several styling options for tables include being able to use selectors for odd or even rows, or specifying exact rows such as “first”, “last”, “third” with special background colors.

Several samples are listed here:

The use of tr th[title=""], tbody and tfoot, and selectors, as in tr:nth-child(odd) or (even) allows styling for every other row in a table, for example. Others are: (first) or (last), (third) or (fourth). Here is an on hover example:

tbody tr:nth-child(even):hover td

{background:rgb(254,255,249); color:rgb.....}

Take a look at this CSS3 styling example:

tr th[title="Table Examples"] {

      color:rgb(150, 0, 0);

}

tbody td {

      font-family: "Courier New", Courier, monospace;

      background: rgb(175, 170, 150);

      padding-top:5px;

}

tbody tr;nth-child(odd) td {

      background: rgb(150, 140, 120);

      color: rgb(240, 240, 240);

}

tbody tr:nth-child(even) td {

      background: rgb(200, 210, 200);

      color: rgb(50, 50, 50);

      height:20px;

}

tbody tr:nth-child(odd)td,tbody tr:nth-child(even) td{

      height:20px:

}

tbody tr:nth-child(odd) :hover td, tbody tr:nth-child(even) :hover td {

      background: rgb(250, 255, 245);

      color: rgb(55, 45, 35);

}

With the CSS3 code above the following HTML code results in a table as displayed in Chrome 13.0.782 in Figure C.

 <table>

      <tbody>

            <tr>

               <td>Row 1</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

            <tr>

               <td>Row 2</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

             <tr>

               <td>Row 3</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

        </tbody>

 </table>

Figure C

CSS3 Fonts

Most likely I could devote an entire post on CSS3 fonts, and probably will in the future, but for now I will just touch lightly on the subject. Fonts for print are not the same for web fonts, so in general, you will need to purchase fonts and put them on your web server making sure they are properly licensed for use. Conversely the @font-face rule first introduced with CSS2 was implemented with IE 5; however, it relied on the Embedded Open Type (EOT) or .eot font file format, and no other browsers used it at the time. Since Safari 3.1, web developers have been able to use any licensed TrueType font (TTF) .ttf font file type on their websites.

As specified by the W3C the @font-face rule allows for linking to fonts that are automatically activated when needed. This allows web authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms. A set of font descriptors define the location of a font resource, either locally or externally, along with the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those font faces that are needed for a given piece of text.

The general form of an @font-face rule is:

@font-face { <font-description> } where <font-description> has the form:

descriptor: value;

descriptor: value;

[...]

descriptor: value;

For example to use a downloadable font called Retrospective the styling would look something like this:

@font-face {

  font-family: Retrospective;

  src: url(http://example.com/fonts/Retrospective.ttf);

}

Then call the rule using font family:

p { font-family: Retrospective, san-serif; }

In a future segment on CSS3, I will review formatting columns, images, creating rounded corners, 3D text, and transitioning among other features. And later this week, I will post a review of a favorite CSS3 resource of mine, highlighting several preferred features.

Balancing the website design between business objectives and user experience

Do you know if your website is aligned with the business objectives of the organization and still meets the needs of the user experience (UX)? In other words, does your website sustain the authentic needs of the users while still serving the needs of the bona fide business model? A balance between the two can be a struggle at times; the ebb and flow of meeting your customers needs and maintaining the business goals can be a challenging affair. Web governance, execution, strategy, measurement, user experience, and funding all play a part in creating a happy marriage of business objectives and user experiences.

In a recent article on Fast Company by Jeff Cram, “Why Are Colleges Flunking Web Strategy 101?” he delves into the important issues of getting governance right when investing in the digital execution, user experience, and funding that should align with the organizations web strategy. Typically it comes down to an IT budget that is underfunded, understaffed, and undervalued and becomes an afterthought for online experiences. Jeff uses the simple Venn diagram below (Figure A, provided by the popular xkcd.com website) to illustrate his contention that typically the only thing that most college’s current websites have on them that people expect to find is the full name of the school. A great divide exists between what users want to find and what they expect to find.

Figure A

This comic from Smashinghub.com, “How A Web Design Goes Straight To Hell” (Figure B, a screenshot of the final panel), illustrates perfectly how a company executive can influence a website revamp from the initial development through to the final phases, resulting in an even worse design than the one that was being made over. The author shares notations and references to actual events and circumstances that took place with clients who wanted web design makeovers.

Figure B

Consequently, at what point does the business objective of the organization surpass the user’s needs? Executives know that a website which does nothing to create income might as well not have been launched in the first place. Combining great UX for the website visitors while still contributing to the return on investment for the organization strikes the perfect balance. But how do you please both the users and meet the expectations of business executives?

Web governance

Being the agent of change means an uphill battle if the business objectives don’t match with the website or if the UX does not meet the customer needs. Web governance is a term that encompasses all the components that create a road map for the successful implementation of the web design: strategy, oversight, execution, and measurement.

Web strategy means the business has taken the time to decipher the management objectives and organizational goals, and from that, create a set of guidelines and principles to follow. Formulating an authority for executing the plan is the next step.

A Web Council can be organized as part of the web execution team, a workgroup of sorts, which consists of anyone who touches the website within the organization. Along with a central steering committee, the web council oversees all aspects of the web presence, cutting across organizational boundaries to support a strategic and far-reaching approach to developing and maintaining the website. The web council might not be able to do it all alone, but the council can be a vehicle for collaboration between all facets and departments within the organization.

Web execution typically involves selecting the right team that has the authority to effectively implement the web strategy. The “team” should consist of members from various disciplines within and outside of the organization including at least one representative from groups such as top-level executive, marketing, IT, human resources, product management, program management, and web design. There is no one-size-fits-all approach; each organization has their own set of challenges, and this is where the process becomes more of an art than a science.

Web metrics and measurement characteristically incorporate Key Performance Indicators (KPIs), which help you keep score on how well the web site is functioning by measuring things like average page views per session or percentage of new visitors. Critical success factors (CSF) are another way to gauge success; for example, a goal to increase sales by 5% in the next month or grow the number of subscribers to the company blog by 10%. Using KPIs in conjunction with the CSFs results in web analytics that can actually tell you how well your website is delivering on both business objectives and user experience.

Getting the balance right

Balancing the organizations goals and purpose with the customer in mind takes more than building the best looking, fully-featured website. Web developers have to take into account what is good for both the organization and its users. User experience design as integrated into software and web application development is an aid in finding feature requirements and interaction plans based upon the organization’s goals and objectives.

Have you faced a situation in which designing for the client and the client’s users seemed mutually exclusive? How did you handle it?

HTML5: Current progress and adoption rates

Internet browsers, content providers, vendors, and developers continue progress toward learning, adopting, and implementing the HTML5 specification, however, many on the road to transition continue to be met with potholes and a few bumps, as well as successes and some achievements in the process. This post will highlight the current trends and progress with the HTML5 specification - its adoption and implementation across various disciplines.

A moving, living standard

The debate that the HTML5 standard is actually finished, but not yet fully adopted seems to have left many confused as to the actual status of the specification. According to an article in TechWorld, the W3C now states that the specification will be completed by July 2014, and not 2020 as previously announced. In an article from InfoWorld, it seems that representatives from Apple, Google, and Microsoft are ready to use HTML5 in their rich media Internet and mobile content delivery. But at the same time, we have an Adobe executive doubting that the specification will ever be implemented due to the slow development rate, and questioning what HTML5 means, saying it is being held back by progress on the standards.

In a recent “Help Digest” email from the Web Hypertext Application Technology Working Group (WHATWG) on the topic of Meta Descriptions and proper validation, one reader reminded people that: “In general, “HTML5″ (or “the living HTML standard”) is a moving target….”

Multimedia content delivery

Here’s the latest progress from some of the major players:

Fox Networks and Adobe announced in a press release from the IBC 2011 Conference and Exhibition that it is utilizing AdobePass for television access to premium content across many online sources and mobile devices utilizing HTML5 and leveraging it with AdobeFlash when available.

ActiveVideo announced on September 6, 2011 that it will be displaying and demonstrating at their IBC exhibit many open Web standards, which can be delivered seamlessly from the cloud to traditional set-top boxes and Ethernet-connected and Wi-Fi CI+ Conditional Access Modules (CAM). And Ronald Brockmann stated, “As the power behind compelling user interfaces on Google Chrome and Apple Safari, HTML5 is quickly becoming a dominant authoring tool for the entire content and distribution community. Our IBC exhibit is designed to show ActiveVideo’s leadership in seamlessly bringing to any STB, CI Plus or connected television apps that have been created in HTML5 for other platforms.”

The Motorola Droid Bionic is Verizon’s first dual-core, LTE phone, and according to their news center press release, it races through loading of complex web pages and media that take advantage of Adobe Flash Player and HTML5, rendering graphics faster than previous generation single-core devices.

Adoption rates

Syncplicity, the file synchronization and file backup software company, announced in a September 6, 2011 article in Read Write Cloud that native apps will continue to be written and supported for their software because it needs direct access to the entire file system, and not a portion set aside for HTML5 Web app use. In their explanation of this move, Syncplicity said that HTML5 is still evolving and that their users want an experience that melds with the platform they are using, likening the problem to trying to get PC apps to work on an iPad.

Microsoft’s MSDN Blogs predicts the end of plugins for browsers, including Flash, in its August 31, 2011 post, stating that with HTML5, modern browsers and sites can deliver a great consumer experience even without plug-ins. The post demonstrates several examples of plug-in free browsing when viewing sites such as Hotmail Inbox, YouTube, and MSNBC.com.

Finally, Facebook recently hired on Teck Chia, founder and CEO of OpenAppMkt.com to further their work on the “Spartan” project to bring applications to the mobile web with HTML5. Incidentally, OpenAppMkt provides an HTML5 job board to fill many positions looking for HTML5 experienced developers.

What is your take on the rate of HTML5 adoption? Considering that the specification is not yet finalized, do you think progress is on track or headed for a long delay?

HTML5: Working with the Video element

The HTML5 video <video> element is similar to the HTML5 audio <audio> element in its delivery of online multimedia content as a video player; however, the element does have several additional attributes relating to the way in which video is presented online, primarily evident in the way video files are transmitted into digital formats. All video file formats are actually container files, similar to a compressed zip file containing multiple files, and synchronized to play together with the combination of both audio and video creating a multimedia presentation. Essentially a “video” is actually a series of frames for the visual effect along with audio files for sound effects.

Video codecs

Video codecs allow video players to decode the streaming media files; in essence, when you are “watching a video” your online video player is performing at least these three functions simultaneously:

1. The player translates the data within the separate files by verifying the container format, and then determining the available tracks which might include the video, video effects, text overlays, video overlays, audio mix, and voice recorded tracks.
2. The player decodes the video files and then displays a series of frames within the player screen.
3. The player decodes the audio streams and processes the sound frequencies to the audio device and speakers connected to your computer.

Without getting too much into the differences between all the video container file compression formats, below is a list of several popular codecs available today which, when utilized within the HTML5 <video> element, are viewable in certain browsers (more on that later):

• MPEG4 or H.264 typically with an extension of .Mp4 or .M4v
• Ogg with the .Ogv extension also called “Theora”
• WebM or VP8 is a royalty-free open audio-video compression format with the .WebM extension

Adoption rate

In fact, there are hundreds of video codecs available, and this contributes to the complexity for finding a standard video format which all browsers can agree upon, and continues to be the primary reason for a slower adoption rate for the HTML5 <video> element. However, several content providers are making inroads into HTML5 Video online presentation including Blip.tv, Vimeo, and YouTube. For instance, YouTube announced on their blog on April 19, 2011 that all new videos will now be transcoded into WebM for audio and video on the web, in particular, for easier viewing on mobile devices.

The HTML5 Video element in its simplest form is represented in this clean and minimal fashion:

<video src="video.mp4" poster="video.gif" controls>

   <!-- Fallback statement -->

   <p>Your browser does not support the video element. </p>

</video>

The source attribute points to the file itself; the poster attribute points to a screen capture of the video which is displayed on the player screen before the file is played; and controls provides typical play stop and start, sound volume levels, and depending on the browser, an option to open in a new screen, and a full screen view.

Multiple sources

The current HTML5 video specification does not indicate which video formats browsers should support within the video element. User agents are free to support any video formats they feel are appropriate. Since there is no one-size-fits-all solution at this time for cross-browser support of all video/audio file formats and codecs, it means is that as a web developer, you will have to provide multiple sources of the same project — in effect, you will have to encode your video files across multiple formats.

However, to ensure you get the most viewers to render your videos using HTML5, you should employ at least three sources in your video element code, as shown in the example below. Take note that the codecs are listed for each source to assist the browser in making the file format/codec selection within the source tree. Browsers will parse the source tree in the order listed until a compatible format is found, or the fallback statement gets displayed.

<video poster="video.gif" controls>

   <source src='video.webm' type='video/webm; codecs="vp8.0, vorbis"'>

   <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

   <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

   <!-- Fallback statement -->

   <p>Your browser does not support the video element.</p>

</video>

<!-- Fallback Flash code -->

As an additional option for fallback support, Flash Video can be added, which would necessitate having to transcode the file into .FLV or .FL4 container format and including the fallback Flash code along with the HTML5 video element.

Browser support

Testing your HTML5 videos in multiple browsers can become a taxing process, therefore, here is a matrix of popular browsers to help identify the codecs which browsers support when using the HTML5 <video> element  video player.

On January 11, 2011, Google’s Chromium Project announced on their blog that support for closed codecs, in particular the H.264 (MPEG4), would be removed from future releases of Chrome. The blog post mentioned that the removal was their effort to increase use of the license-free HTML5 <video> element by directing their resources toward the adoption of open-source codecs such as VP8 and Theora.

Several websites are testing the HTML5 video player with different codecs for compatibility viewing within various browsers, including this demo video using VP8/WebM, using a 2-minute test file which was encoded with a WebM VP8 video converter.

It seems that there is still a lot of ground to cover between the various video content providers and the differences among the popular browsers’ adoption rates for HTML5-supported video codecs. For now the challenges facing web developers and utilizing the HTML5 video element with universal cross-browser compatibility means having to offer more than a few sources of the same video file.

Web master challenges: Staying ahead of obsolescence

Comparing technology, advancements, and costs for equipment from the early 1990s to today, you get a sense of how everything including skills and proficiency can become obsolete in a short time — three to five years, actually. Most of us know Moore’s Law, which simply states that the number of transistors placed within integrated circuits doubles every two years. Moore’s Law continues to be a fairly accurate target from the time Gordon E. Moore, co-founder of Intel, first described the trend in a report in 1965. Major enabling factors and trends, which continue to support the law are shown in current technological growth; examples include advancements in microchips, semiconductors, and the development of a single-electron transistor 1.5 nanometers in diameter made out of oxide-based materials. Some speculate that a new form of technology will likely replace current integrated circuit technology, and that Moore’s Law will hold true well beyond 2020.

A trip down memory lane

In 1991, I had to decide on a new home computer acquisition. I juggled comparisons between PC and Apple, and after much deliberation, it came down to budget considerations as the motivating factor in my final decision. The PC won out in the ultimate assessment, but it was not an IBM PC. I settled on a clone, or an IBM-compatible Hyundai 386 SX with a 40MB hard drive, which included a fancy “turbo” 16MHz button. In the September 10, 1990 issue of InfoWorld, a large advertisement on page 38 promoted it like this: “The Hyundai^® 386 Series personal computers have the power to make light work of the heaviest problems.”

When I bought the Hyundai 386 in the summer of 91, it was not the top of the line; the 486 had just hit the market, and the cream of the crop carried a top price, too. I think I paid around $2,100 for the complete Hyundai 386 package, which included the color 14″ VGA monitor, keyboard, and mouse; the 486 clones were priced at around $3,400 at the time; and the IBM PCs were in the $3-4K range in the early 1990s.

Just for kicks, and since Steve Jobs has just announced his stepping down as CEO of Apple, I wanted to look up how much an Apple Mac was selling for in 1990, and on page 5 under “News” items for the same issue of InfoWorld, Kristi Coale reported that the base configuration for the Apple Macintosh IIci model with 4 megabytes of RAM and a floppy drive listed for $5,969, and that the top configuration model of 4 megabytes of RAM and an 80-megabyte hard drive was $7,269.

Keeping up with the pace

The desktop PC’s from the early 1990’s were built rock solid, with heavy sheet metal cases and a lot less plastic on the inside compared to today’s models. Is this an example of planned obsolescence, which seems to be the standard in some of today’s technology? Just take a look at cell phones and and laptops — lots of plastic, flimsy parts and easy-to-break pieces. I can’t tell you how many laptop display screens and keyboards I have had to order replacements for over the past ten years, and this is from normal daily use.

As a web master or technology manager, how do you know that the current technology, hardware, software, and human resources you have in use today will be able to keep up with the ever-changing landscape?  You can’t upgrade all your servers and clients to the next operating system every time a new version hits the shelves; it becomes too expensive to make the switch every three to five years. Several companies, including one that I contract with, continue to support client PCs with Windows XP, however, there is a small rollout of newer Windows 7 computers coming down the line.

When it comes to thousands of licensing and software upgrades that need to be purchased, and then the cost of getting your rollout team to make the transition — and in most cases this comes with a hardware upgrade to coincide with the new OS — the costs start adding up. How can you justify a new hardware and software rollout every three to five years?  Justification for upgrades must come with hard documentation for increases in productivity for the company. And then, you have to make sure you picked the right horse; you don’t want to go with a technology solution that ends up losing the race five or ten years down the road.

Striking a balance between the two factions can be a good approach to handling the obsolescence pattern, but is that enough to keep abreast of the rapidly changing environment? At what level of the innovation adoption lifecycle do you choose to live? Your answer probably depends on the technology and the characteristics of that technology utilized within your organization, the team employed to carry out the work, and the budget that limits your spending dollar.

Meeting the challenge

The challenges today are finding ways of increasing the industrious life cycles of systems, software, and equipment, and ensuring that the talent is keeping up their own skills as it relates to the latest trends in technology and design.

Increasing the productive life of assets means extracting every last dollar of computing power until it has to be replaced with new components, which could mean hard drives, SCSI boards, NIC cards, monitors, servers, operating systems, firewalls, and software.

Here are a few ways to improve your effectiveness:

• Technology Lifecycle Management (TLM) tools are one way to control your technology assets. Using an approach that will help ensure your IT assets continue to support your business over their lifecycle.
• Adopt and utilize the best practices approach with Information Technology Infrastructure Library (ITIL) as a resource for guidance in IT service support, service delivery, and infrastructure management. Certifications are also available for individuals and organizations who wish to further their expertise in this area.

Keeping your staff up to speed

The staff staying knowledgeable with latest technology and trends is the other piece of the puzzle.

• Continuing education and training helps to keep employees abreast of the latest technology and trends, and several providers offer initial training to become familiar with new advances and updates.
• Check with your vendors and suppliers for free training (or a reduced rate); some may offer these deals if you are testing out their new advances.
• Local colleges typically offer computer-based training in labs and some even have options to bring the training to your facility.

Do you or does your organization have a game plan or strategy in place to beat the obsolescence challenge?

Additional TLM resources:

• ITSM Professor
• Technology Lifecycle Management Reference guide (PDF)
• Quatro Technology Life-Cycle Management Solution
• Salma Systems TLM
• PwC’s PRTM Management Consulting
• Dimension Data TLC

How to use the new HTML5 Audio element

Several exciting elements to come out of the HTML5 specification include presenting native multimedia content within browsers, and specifically addressing the aspects for providing audio and video content within web pages utilizing a standardized format. The HTML5 audio <audio> element utilizes a standard way of embedding audio digital content, thus allowing web developers the freedom of not having to rely solely on plugins to associate with the content file types. Once enabled and fully implemented as a standard, there will be no requirement for a browser plugin, as the HTML5 specifies a standard way to include audio content with the <audio> elements.  So will these multimedia elements replace Flash?

The audio element in its simplest form is represented as specifying a single source src=”url”:

<audio src=""></audio>

The audio element offers the option for a control attribute in the form controls=”controls” for adding play, pause, and volume controls, as in the example:

<audio src="music.mp3" controls="controls">

</audio>

Attributes

In addition to the source (src=”url”) and controls (controls=”controls”) attributes, listed below are the five attributes, their associated values, and a short description:

Table 1

In reference to the “autoplay” attribute, and as a rule of thumb, in most instances new visitors to a website will frown upon any audio instantly playing as they navigate into a website. However, there are some instances when autoplaying audio on websites is acceptable; sites that promote music, a band, a musician, or other aural artistic forms, would probably benefit from autoplaying a sampling of a performance.

The <audio> element can play sound files as well as an audio streaming, and there are three main audio file formats supported for the <audio> element:

• Ogg - with the extension .ogg and called “Vorbis”
• MP3 -
• Wav -

As a best practice, it is advisable to insert fallback statement content between the <audio> and </audio> tags for browsers that do not support the audio element (more examples of fallback support will be provided below):

<audio src=" music.mp3" controls="controls">

Your browser does not support the HTML5 audio element.

</audio>

Browser support for <audio> element

Currently the listed browsers support the following audio file codec and formats as listed in the matrix below:

Table 2

This is an example of a single audio source from the Internet Archives.org of a Roy Rogers radio show “The Horse Thieves of Paradise Valley”:

<audio src="http://ia700204.us.archive.org/13/items/The_Roy_Rogers_Show/Roy_Rogers_480905_Horse_Thieves_of_Paradise_Valley.mp3"
    controls="controls">Your browser does not support the HTML5 audio element.

 </audio>

The code above rendered in an HTML5 supported browser:

 

Sources

Solving the cross-browser functionality issue, you can list several sources for the audio clip as long as there is more than one file type available. Browsers will attempt to load the source file in the coded order, and if the file fails to load, the browser will move onto the next source within the <audio> element. The example below shows how a single audio can be rendered in several browsers by providing the two file format sources, in this instance .ogg and mp3:

    <section>

        <h1>HTML5 Audio Element</h1>

        <h2>The Roy Rogers Show</h2>

        <h3 align="left">Horse Thieves of Paradise Valley</h3>

        <audio controls="controls">

        Your browser does not support the audio element.

            <source src="http://ia700204.us.archive.org/13/items/The_Roy_Rogers_Show/Roy_Rogers_480905_Horse_Thieves_of_Paradise_Valley.mp3" type="audio/mp3" /></source>

            <source src="http://.../audio/Roy_Rogers_480905_Horse_Thieves_of_Paradise_Valley.ogg" type="audio/ogg" /></source>

        </audio>

    </section>

Another example of providing fallback support:

    <!-- The browser will automatically choose the format it supports. -->

    <audio controls="controls">

        <source src="audio.mp3" type="audio/mp3">

        <source src="audio.ogg" type="audio/ogg">

        <source src="audio.aac" type="audio/mp4">

        <!-- If no support at all. -->

        Your browser does not support the HTML5 audio element.

    </audio>

Cross-browser support and fallback

If the selected browser does not render the .mp3, .wav, or the .ogg file format, then you could add another fallback allowing Flash to play the file. Another option is employing the use of the jPlayer HTML5 Audio Checker which tests browsers for HTML5 <audio> element support and for Audio() object support using “feature sniffing” utilizing JQuery and JavaScript to check for audio element support.

The specification also allows the use of enhanced audio API features to directly generate and manipulate audio streams from JavaScript code; several controls using the API extensions include:

• play() - plays the audio
• pause() - pauses the audio
• canPlayType() - examines the browser to establish whether the given mime type can be played
• buffered() - attribute that specifies the start and end time of the buffered part of the file

An example of JavaScript calling and playing audio:

// Call and play audio via JavaScript

$(document).ready(function() {

       var audioElement = document.createElement('audio');

       audioElement.setAttribute('src', ‘audio_file.ogg');

       audioElement.load()

       audioElement.addEventListener("load", function() {

               audioElement.play();

               $(".duration span").html(audioElement.duration);

               $(".filename span").html(audioElement.src);

       }, true);

       $('.play').click(function() {

               audioElement.play();

       });

An example of JavaScript to pause the audio:

       $('.pause').click(function() {

               audioElement.pause();

       });

Determining what format the browser will use with JavaScript code is a little more complex than the simple fallback model for the <audio> element source. Using the canPlayType() API method to pretest the browser’s file format capabilities, it takes an audio mime type, and codec (optional) parameters, and returns one of three strings: empty, maybe, or probably.

The following JavaScript code example tests for three file types .mp3, .ogg, and .aac audio file formats:

  <script>

 function checkAudioCompat() {x

       var myAudio = document.createElement('audio');

      if (myAudio.canPlayType) {

          // CanPlayType returns maybe, probably, or an empty string.

          if ( "" != myAudio.canPlayType('audio/mpeg')) {

              alert("mp3 supported");

          }

          if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {

              alert("ogg supported");

          }

         if ( "" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) {

              alert("aac supported");

          }

      }

      else {

         alert("no audio support");

      }

  }

</script>

Because the canPlayType() API can return more than one audio file format, it might be a good practice to test for hierarchy, and then choosing the best fit for the file format and browsers used by the customer.

 

Implementing wikis and knowledge-sharing on your website

Knowledge sharing to improve products and outcomes takes advantage of the collective wisdom of the multitudes. Managing collaborative wikis and workspaces requires working across boundaries, engagement, and transparency. Typically it comes down to knowledge management, but ensuring that shared information is accurate and reliable is a great challenge. How do you as a web master ensure that the wiki model is set within the right circumstances for shared knowledge within your organization? If you have a wiki on your website do you have any control over the wiki and its contents?

In his 2004 book The Wisdom of Crowds, James Surowiecki describes the aggregation of many samplings from a crowd — which it turns out, under the right circumstances — is actually smarter as a collective whole than the individuals that make it up, and even more accurate, according to experts in some studies. From a statistical point of view, when data from a crowd is collected and averaged, the end result answers were typically right on target when compared to samplings from a few experts on the subject matter. The crowd mentality is not without failure, however, as in some cases, the cooperation failed to achieve its desired goal because the opinions of individuals began to emulate that of others and the group became more of a conformed consensus than a set of individual thinkers.

What guidelines and best practices can be established to ensure that the wiki model is a viable means of improving critical business systems within your organization? Several considerations include:

• making the wiki public or private
• featuring a rating and voting system
• allowing a level of balanced moderation
• sustaining and growing the wiki
• the wiki management life cycle

Public or private

This is probably one of the first decision points when considering the establishment of a wiki or for adding control to a public wiki, and this depends on your community and content. One way to elicit control is to make it a closed community of members who must first register, then gain approval by an assigned individual or group such as an administrator/moderator, or appropriate content owners, and only then can contributions be accepted. In some circumstances it would be appropriate for anyone to view the wiki and any public content, but only members of the wiki are allowed to make edits to the content.

Rating and voting

Rating allows the group of peers to decide on what versions of text and language can be used to incorporate into policy and become accepted into the knowledge base. The highest rated text becomes the accepted piece of knowledge for that particular topic. Several collaboration tools allow simple, scalable, efficient, democratic systems where real-time suggestions encourage members to borrow other member’s text, ideas, and words, resulting in an automated tracking of authorship and giving appropriate credit. Then, the group rates the most popular ideas and language in a democratic fashion, such as a “star” rating system, which allows members to rank submissions on a scale of 1 to 5, with five being the highest rating.

Moderation

Moderating a wiki typically includes an explicit set of rules to avoid abuse and spam including community, organizer, and automatic controls. Community moderation allows members to report inappropriate content with a “report abuse” button for example, and using the five-star rating system to rank submissions based on a criteria set established by the organization. The moderators and administrators have the power to completely remove any inappropriate content or lower ranked content, and move any off-topic content to separate areas or delete them entirely. Automatic controls include filters for language and abusive behavior based on black listed terms, and algorithms that recognize certain activity patterns. The moderated approach to wiki management flies in the face of the traditional wiki model, where the encouragement of emergent work with no imposing structure, processes, or rules creates and encourages open communities of knowledge sharing. Striking a balance between moderation and openness will likely keep management happy and wiki members interested while growing the wiki.

Sustainability and growth

Growing the wiki depends greatly on the approval and adoption rate of the organization; in particular, having an active, responsive, and supportive management team will aid in the shared development, usage, and practice of expanding the wiki to a mature lifecycle. On it’s own a wiki may not solve an organization’s knowledge base opportunities, yet wikis are considered a radical departure from previous generations of knowledge/content management tools, with an easier to learn, deploy, and use model, giving members the collaboration capability that can be molded to fit their specific desires. The opportunity lies in getting early adopters into the group and keeping them motivated, while momentum and support from management grows. The largest challenge is having a clear understanding of human behavior including organizational culture, learning practices, and collaboration between organizational boundaries and groups.

Wiki management lifecycle

The lifecycle should include identifying the needs; planning the technology, implementation, and management; a staged adoption plan; maintaining the growth and propagation of the wiki; and regular evaluation to revise and implement based on feedback and review.