A directory of resources inthe field of technical communication.


42 found. Page 1 of 2.

About this Site | Advanced Search | Localization | Site Maps

1 2  NEXT PAGE »



Accessible Context-Sensitive Help with Unobtrusive DOM Scripting

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.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Standards>Help


Automatic Numbering With CSS Counters

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.

Storey, David. Opera (2008). Articles>Web Design>CSS


The Basics of 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.

Francis, Mark Norman. Opera (2008). Articles>Web Design>HTML>XHTML


Building a Custom HTML5 Video Player with CSS3 and jQuery

The HTML5 VIDEO element is already supported by most modern browsers, and even IE has support announced for version 9. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. This means that we will soon be able to create a single version of the video that will play in the VIDEO element in most browsers, and the Flash Player in those that don't support WebM natively.

Colceriu, Cristian-Ionut. Opera (2010). Articles>Web Design>Multimedia>HTML5


Building Accessible Static Navigation with CSS

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.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>CSS


Building Up a Site Wireframe

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.

Goin, Linda. Opera (2008). Articles>Web Design>Document Design>Information Design


Choosing the Right Doctype for Your HTML Documents

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.

Johansson, Roger. Opera (2008). Articles>Web Design>HTML>Metadata


Colour Schemes and Design Mockups

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.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color


Colour Theory

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.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color


Creating Accessible Data Tables

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.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>Standards


CSS 3 Attribute Selectors

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.

Schmitt, Christopher. Opera (2008). Articles>Web Design>Standards>CSS


Drawing Hilbert Curves with SVG

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.

Opera (2008). Articles>Graphic Design>Image Editing>SVG


Fonts for Web Design: A Primer

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.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography


Getting to Know Voice

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.

Axelsson, Jonny. Opera (2008). Articles>Web Design>Accessibility>Voice


Grid Design Basics: Grids for Web Page Layouts

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.

Grannell, Craig. Opera (2008). Articles>Web Design>Accessibility>CSS


The History of the Internet and the Web, and the Evolution of Web Standards

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.

Francis, Mark Norman. Opera (2008). Articles>Web Design>Standards>History


How Does the Internet Work?

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.

Lane, Jonathan. Opera (2008). Articles>Information Design>Online


How to Add Voice Interactivity to Your Site

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.

Sucan, Mihai. Opera (2008). Articles>Web Design>Accessibility>Voice


The HTML HEAD Element

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

Heilmann, Christian. Opera (2008). Articles>Web Design>HTML>Metadata


Improve Your Forms Using HTML 5!

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.

Van Kesteren, Anne. Opera (2008). Articles>Web Design>Forms>HTML5


Information Architecture - Planning Out a Web Site

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.

Lane, Jonathan. Opera (2008). Articles>Web Design>Information Design


Intelligent Site Structure for Better SEO!

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.

De Valk, Joost. Opera (2008). Articles>Web Design>Information Design>Search Engine Optimization


Introduction to The Web Standards Curriculum

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.

Mills, Chris. Opera (2008). Articles>Web Design>Standards


Introduction to WAI ARIA

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.

Lemon, Gez. Opera (2008). Articles>Web Design>Accessibility>Flash


JavaScript Badges Powered by JSONP and Microformats

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

Rushgrove, Gareth. Opera (2008). Articles>Web Design>Metadata>JavaScript



Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon