http://tc.eserver.org/publisher/Opera A listing of works published by Opera in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Opera http://tc.eserver.org/32548.html http://tc.eserver.org/32548.html This tutorial aims to help you add voice interactivity to your site, with minimal code changes and maximal browser compatibility. Along the way, examples will be provided, and at the end, you will be able to test a fully working, real World, voice-enabled site. This tutorial describes the use of a reusable VoiceXML form. Because the voice capability is included in the browser, you do not need to write your own speech recognition engine or speech synthesizer. This is a great advantage to you and to your Web application users. http://tc.eserver.org/32549.html http://tc.eserver.org/32549.html Hilbert curves are a type of space-filling curve that can be constructed with the SVG polyline element, using a basic design and then aggregating. http://tc.eserver.org/32550.html http://tc.eserver.org/32550.html Search engines are one of the most important traffic drivers to sites these days, which is why Search Engine Optimization (SEO) is becoming more and more important. SEO is often thought to be just a set of some technical tricks, and as a professional SEO, I confess to spending a lot of time with clients fixing technical issues. A site's structure though, is just as important. Your site's structure determines whether a search engine understands what your site is about, and how easily it will find and index content relevant to your site's purpose and intent. By creating a good structure, you can use the content you've written that has attracted links from others, and use your site's structure to spread some of that "linkjuice" to the other pages on your site. http://tc.eserver.org/32551.html http://tc.eserver.org/32551.html HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2. http://tc.eserver.org/32552.html http://tc.eserver.org/32552.html In this article I will take a good look at XFN - the microformat for describing relationships between people. I will look briefly at what it is and the basic markup needed to add the information to your sites, before then going into depth, looking at the benefits you can get from that data by extracting it and using it in different ways. Extracting the data is easier than you think - there is probably a library for your favorite language already! If not, there are also some web services that could do the job that I'll show you below. http://tc.eserver.org/32553.html http://tc.eserver.org/32553.html I will go through how to make a full-blown widget that uses AJAX technology. It fetches news from a newsfeed source, presents them nicely to you, includes some eyecandy and of course lets you customize the amount of news items, refresh time and which category of news you want to be shown. http://tc.eserver.org/32554.html http://tc.eserver.org/32554.html Browser name sniffing, using scripts figure out which browser is used and then provide different content to them, is a widespread practice with a long history. Unfortunately these scripts are usually static, while browsers keep evolving. http://tc.eserver.org/32555.html http://tc.eserver.org/32555.html Modern CSS provides web designers with an unprecedented level of control over online typography. Restrictions are still imposed however by the limited number of “common” fonts—those typefaces that are generally available cross-platform. This article looks at the fonts web designers have available to them, and also considers their suitability for various tasks. http://tc.eserver.org/32516.html http://tc.eserver.org/32516.html This article is for those who are new to ARIA. You need an understanding of HTML and the potential difficulties that people with disabilities can face using the Web. It is useful to be familiar with some Rich Internet Applications from a user's perspectiveAfter reading this article, you'll understand what ARIA is for, how to integrate it into your sites, and how you can use it now to make even the simplest of sites more accessible. http://tc.eserver.org/32517.html http://tc.eserver.org/32517.html This article demonstrates two methods of calling context-sensitive help in a web form: the Field Help Method and Form Help Method, in which unobtrusive DOM/JavaScript is employed to achieve the desired result. It also serves to illustrate the separation of the Structure and Behavior layers of a web page. Graceful degradation is employed to make sure that the help information is accessible if JavaScript is disabled or not available in a user agent. http://tc.eserver.org/32518.html http://tc.eserver.org/32518.html When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages. http://tc.eserver.org/32519.html http://tc.eserver.org/32519.html Modern user agents with JavaScript enabled will hide content contained within NOSCRIPT, and reveal it when JavaScript is disabled. User agents that do not support JavaScript will display the content within it. User agents with partial/antiquated JavaScript capabilities however interpret the element correctly and do not show the content, but when JavaScript is disabled also do not show the content - it never gets seen. This has an impact on the accessibility of the content. If your writing is targeted at modern, standards-based, compliant, and fully capable JavaScript user agents, employing the NOSCRIPT element is no problem. If the user agents among your audience are unpredictable, however, replacing the NOSCRIPT element with another mechanism becomes significant. This article looks at one such solution. http://tc.eserver.org/32520.html http://tc.eserver.org/32520.html This article demonstrates how to code accessible data tables in (X)HTML, enabling visually impaired users who employ assistive technologies to interpret the table data. Two views of a tabular data table are presented and discussed. http://tc.eserver.org/32521.html http://tc.eserver.org/32521.html When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. http://tc.eserver.org/32522.html http://tc.eserver.org/32522.html With the advent of CSS3’s nth-child selector, we are able to target multiple elements in a document by creating a "counter" that skips over specified children in the document tree. This allows us, specifically, to style only the odd or even rows of a table. This article details how to use nth-child sucessfully. http://tc.eserver.org/32523.html http://tc.eserver.org/32523.html This article builds upon topics in the XHTML Voice by Example article. A knowledge of CSS is also assumed. http://tc.eserver.org/32524.html http://tc.eserver.org/32524.html From a different world than the traditional browsing world comes a range of techniques that allows a developer to code for speech behaviours much easier than previously possible. Opera has early support for this. W3C is working on standards for combining speech and the ordinary graphical user interface. http://tc.eserver.org/32525.html http://tc.eserver.org/32525.html Using a bit of JavaScript, a nifty way of making remote web service calls (JSONP) and a few microformats, I can display information from one service somewhere else, leaving me with only one place to update it. In this article you're going to create a JavaScript badge that can be added to any site and which will display relationship data from a service which exposes it http://tc.eserver.org/32526.html http://tc.eserver.org/32526.html I've found the following rules over the years developing, teaching and implementing JavaScript in an unobtrusive manner. They have specifically been the outline of a workshop on unobtrusive JavaScript for the Paris Web conference 2007 in Paris, France.I hope that they help you understand a bit why it is a good idea to plan and execute your JavaScript in this way. It has helped me deliver products faster, with much higher quality and a lot easier maintenance. http://tc.eserver.org/32527.html http://tc.eserver.org/32527.html We got things like browser wars, browser-specific DHTML, and table-based layouts. These were things that got in the way of the original vision, because people wanted rich content when the technology wasn’t ready. And now it’s happening again. http://tc.eserver.org/32528.html http://tc.eserver.org/32528.html CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value.This provides powerful new ways to style elements automatically that match very specific criteria. In this article, I will put these new attribute selectors in action and create some clever CSS rules that attach icons to links based on the value of the href attribute. http://tc.eserver.org/32529.html http://tc.eserver.org/32529.html So what is POSH? No, it's not just some new clothing fashion hype amongst web designers - POSH is the acronym for Plain Old Semantic HTML. The term Semantic HTML is used for a variety of things, but it has it's origin in one objective: creating (X)HTML documents using semantic elements and attributes, as opposed to using presentational HTML. http://tc.eserver.org/32530.html http://tc.eserver.org/32530.html So you have heard about microformats, read the introductory articles, and even bought the book. But now you are probably thinking "great - I have done my part to make the web a better place by adding microformats; what's next? What can people do with my data besides add it to their address book or calendar?" The intent of this article is to get you to think about microformats in different ways, and to demonstrate some interesting visualizations and mash-ups of microformatted content. http://tc.eserver.org/32531.html http://tc.eserver.org/32531.html In this article, we'll look at ways that you can geocode your content, using data formats such as the location nanoformat, GPX and combinations of geocoded microformats in HTML. http://tc.eserver.org/32532.html http://tc.eserver.org/32532.html Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages. http://tc.eserver.org/32533.html http://tc.eserver.org/32533.html This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is. http://tc.eserver.org/32426.html http://tc.eserver.org/32426.html An introduction to a course designed to give anyone a solid grounding in web design/development, no matter who they are—it is completely free to use, accessible, and assumes no previous knowledge. http://tc.eserver.org/32427.html http://tc.eserver.org/32427.html a brief overview of the creation of the Internet, the World Wide Web, and the "web standards" that this entire series focuses upon. I think it is useful and interesting to understand how we got to where we are, but it will be short enough so you don’t get overwhelmed, and can get into the details nice and quickly. http://tc.eserver.org/32428.html http://tc.eserver.org/32428.html This article covers the underlying technologies that power the World Wide Web: Hypertext Markup Language (HTML); Hypertext Transfer Protocol (HTTP); Domain Name System (DNS); Web servers and web browsers; Static and dynamic content. http://tc.eserver.org/32429.html http://tc.eserver.org/32429.html You can accomplish content, styling and layout just using HTML—font elements for style and HTML tables for layout, so why should I bother with this XHTML/CSS stuff? Here are the most compelling reasons for using CSS and HTML over outdated methods. http://tc.eserver.org/32430.html http://tc.eserver.org/32430.html Web standards allow for interoperability between all web browsers, on every operating system, and even on every electronic device available. But is that really reality? The really simple answer is no; while that’s an ideal situation, that is far from reality. http://tc.eserver.org/32431.html http://tc.eserver.org/32431.html This article is going to look at the early stages of planning out a web site, and a discipline that is commonly referred to as Information architecture, or IA. This involves thinking about who your target audience will be, what information and services they need from a web site, and how you should structure it to provide that for them. http://tc.eserver.org/32432.html http://tc.eserver.org/32432.html Starts to examine different pages, thinking about what items should appear on them, and considering issues such as consistency, usability, and accessibility. http://tc.eserver.org/32433.html http://tc.eserver.org/32433.html In this article, I’ll cover colour basics and three simple colour schemes so that you can feel confident about choosing colours for your site. I’ll follow up this article with another piece on how to simplify these colour choices. After all, it’s more fun to enjoy the compliments on your Web site design than it is to sweat over the colour choices. http://tc.eserver.org/32434.html http://tc.eserver.org/32434.html Every web designer should know and understand a Web site’s parameters before lifting a finger to start designing the site. In this article, you will learn the basics required to start designing business Web sites. While this information is useful if you want to build sites for others, it can also serve as a checklist article for sites you want to build for yourself. http://tc.eserver.org/32435.html http://tc.eserver.org/32435.html After a web designer presents a site’s architecture, or wireframe, to a client for approval, the next step is to determine the look and feel of the site through colour and graphics. In this article, I’ll demonstrate how I keep this process as simple as possible, both for myself and for the client. http://tc.eserver.org/32436.html http://tc.eserver.org/32436.html In this article I’ll look at exactly why typography is limited on the web (compared to print design) and present some tips to follow for good web typography, along with an example web page that demonstrates some of these tips. Don’t worry if you don’t understand the CSS and HTML code at this stage—the point here is to make you think about design. While you are going through the article, it might be an idea to have a pen(cil) and paper by your side so you can start to sketch ideas about text layout. http://tc.eserver.org/32437.html http://tc.eserver.org/32437.html In this article you will learn the basics of HTML—what it is, what it does, its history in brief, and what the structure of an HTML document looks like. http://tc.eserver.org/32464.html http://tc.eserver.org/32464.html This article deals with a part of the HTML document that does not get the attention it deserves: the markup that goes inside the head element. By the end of this tutorial you’ll have learnt about the different parts of this section and what they all do, including the doctype, title element, keywords and description (which are handled by meta elements). http://tc.eserver.org/32465.html http://tc.eserver.org/32465.html In this article I will look at the doctype in a lot more detail, showing what it does and how it helps you validate your HTML, how to choose a doctype for your document, and the XML declaration, which you’ll rarely need, but will sometimes come across. http://tc.eserver.org/32466.html http://tc.eserver.org/32466.html In this article I will take you through the basics of using HTML to describe the meaning of the content within the body of your document.We will look at general structural elements such as headings and paragraphs and embedding quotes and code. After that we will look at inline content, such as short quotes and emphasis, and finish with a quick examination of old-fashioned presentational content.