Dev.Opera 2008
2013 2012 2011 2010 2009 2008 2007 2006
Creating Pseudo 3D Games With HTML 5 Canvas and Raycasting — Part 1
Next article: Creating Pseudo 3D Games with HTML 5 Canvas and Raycasting — Part 2
Happy Christmas 2008 from DevOpera!
With another interesting year almost behind us, I'd like to sign off dev.opera.com for now. As an extra special Christmas present to you all, today I've published the final article of the Opera web standards curriculum core CSS section - Form design, layout,…
MAMA script identifier tokenization
Throughout much of MAMA's development history, script content was analyzed using numerous substring and regular expression checks. There was always a desire to use a more formal analysis, but an easy and simple solution never presented itself. After…
MAMA script tokenization: DOM
Scripting use was found in 2,617,305 of the URLs that MAMA analyzed. This section is devoted to the results uncovered for 294 DOM-related keywords in 15 categories encompassing the largest objects and conceptual areas of the DOM. JavaScript/ECMAScript syntax…
MAMA script tokenization: ECMAScript/JavaScript syntax
Scripting use was detected in 2,617,305 of MAMA's URLs. This entire section is devoted to details of 13 different areas of the JavaScript/ECMAScript language, covering basic JavaScript syntax and core JavaScript objects. We will leave analysis of the DOM for…
MAMA scripting report, part 2: JavaScript and DOM tokenization
Throughout much of MAMA's development history, script content was analyzed using numerous substring and regular expression checks. There was always a desire to use a more formal analysis, but an easy and simple solution never presented itself. After…
Web standards curriculum translations
The final section of the Opera web standards curriculum (covering JavaScript basics) is not too far away now—I should have it published around the end of January. The currently published material has been very successful, having been used by several…
Opera Presto 2.2 と Opera 10 概観
2008 年の終わりが迫ってきた今、Opera から一足早いクリスマスプレゼントのお知らせをいたします。改良された新 Opera Presto 2.2 レンダリングエンジンのお披露目です。開発チームの努力によって、新エンジンは速度、安定性、Web 標準への準拠などすべての分野にわたって改良がなされました。
Introducing The Dojo Toolkit
Introducing Dojo page 1 : Introducing Dojo page 2 : Introduction to JavaScript toolkits
MAMA: Scripting - quantities and sizes
Scripting was detected in 2,617,305 of MAMA's URLs, from 4 different sources:
MAMA: Scripting syntax
Scripting was detected in 2,617,305 of MAMA's URLs (74.58%), coming from 4 different sources: JavaScript URLs, event-handler attributes, external scripts and embedded scripts. A number of strategies were employed to extract information out of the scripting…
MAMA: Scripting report, part 1: Basic scripting syntax and features
To my knowledge, there has never been an in-depth examination of scripting factors in Web pages. Rene Saarsoo's study of Coding Practices of Web Pages was able to analyze some factors, but a bug in his analysis program prevented deeper investigation.
MAMA: CSS quantities and sizes
CSS was detected in 2,821,141 of MAMA's URLs (80.39%). "Using CSS" was defined as having any sort of content from 1 or more of the following 3 sources:
MAMA: CSS report
Cascading Style Sheets (CSS) is one of the biggest success stories of the Web. It was first specified by the W3C in 1995, and was quickly embraced by browsers and authors. CSS offers much richer typographical control than the HTML-based solutions that were…
MAMA: CSS syntax
MAMA's look at CSS covered a number of different areas. It looked at external CSS (the LINK element), embedded CSS (via the STYLE element), and inline CSS (using the common Style attribute). It also delved into CSS specified using the @import syntax and did…
Keyboard-Accessible Google Maps
Google Maps is a powerful, free tool for adding maps to a site. Unfortunately, out of the box, these maps are reliant on mouse interaction; therefore, they are completely inaccessible to those using only the keyboard for Web interaction. In this article,…
Opera Presto 2.2 and Opera 10 — a first look
As 2008 draws to a close, here at Opera we are excited to announce an early Christmas present for you all—a first look at our new, improved Opera Presto 2.2 rendering engine! We are very proud of our developer team's achievements—the new engine features…
Creating pseudo 3D games with HTML 5 canvas and raycasting
With the increase in browser performance in recent times it has become easier to implement games in JavaScript beyond simple games like Tic-Tac-Toe. We no longer need to use Flash to do cool effects and, with the advent of the HTML5 Canvas element, creating…
MAMA: Forms
Aside from hyperlinks, forms are the main way users interact with the Web. Among their varied critical uses, forms allow people to:
MAMA: Markup report, part 4: Forms, tables, and plug-ins, oh my!
In this week's overview we wrap up MAMA's look at markup by covering its most complex structures—forms, tables, and plug-ins. These topics take Web pages from a simple series of text, links, images, and lists to an entirely different level. Forms greatly…
MAMA: Plug-ins
The Web has multiple elements to handle plug-ins because of simple evolution. At first, there was no standardized way to use plug-ins, so solutions arose haphazardly—APPLET, EMBED and PARAM. The standards process produced a cohesive solution in the for of the…
MAMA: Tables
Tables have a bad reputation among the markup purists in the development community, because many authors often use them for presentation purposes. Tables generally increase the complexity of documents and can make them more difficult to maintain. Authors do…
MAMA: XML
MAMA tracked a number of XML-related details in order to get a better sense of how XML is used on the Web. We have already seen evidence of XML in some of the other sections of this write-up. The Content-Type HTTP header revealed just over 1,000 documents…
Video, 3D canvas and File I/O: Repeat!
We’ve done it again - we’ve made a new build available of Opera with support for video, file I/O and 3D canvas. If you enjoyed the builds we released last time, then you should upgrade - you’ll enjoy the increased stability of this build, along with other…
Barcodes: connecting the real-world to the virtual
The world of barcodes is becoming vastly more interesting in recent times, with 2D barcodes allowing us to represent anything from URLs to invoices, which in turn allows us to connect physical images to applications in all kinds of interesting ways. In this…
MAMA: BODY structure
BODY ranks as the 4th most popular element overall. Most people would expect this near-ubiquity, but the opening and closing tags for the BODY element are actually optional. A natural result of relaxed specification requirements is decreased usage, and it is…
MAMA: Hyperlinks
Hyperlinks are the glue that holds the Web together. Without them, the Web wouldn't be a web at all—just an un-organized group consisting of billions of isolated documents. Aside from the URL set to which MAMA already has access, the treasure trove of links…
MAMA: Images - elements and formats
Inline images have become an integral part of the Web since they were first introduced in Mosaic 0.1 beta just over 15 years ago. Indeed, the graphical nature of the Web is definitely one of its biggest selling points. It was a natural part of MAMA's…
MAMA: Markup report, part 3: Basic BODY markup
This is it. This week we begin to cover the real heart of HTML markup. These elements are what make HTML tick—they give documents their life and primary expression. Hyperlinks create the "web" of the Web; images are the primary avenue for authors to…
MAMA: Phrase, block, list, and other elements
This section is a catch-all, covering the "rest" of popular markup in use that did not easily fall into the other markup categories. It covers basic phrase and block markup, list-related elements, browser extensions, and other elements and attributes. While…
MAMA: Common attributes
The common attributes are those that are used across a multitude of elements. They are often attributes of critical importance to the most popular features that Web browsers have. They are listed here under the same umbrella for a single goal— when viewed…
MAMA: Event-handler attributes
Event-handler attributes are a non-portable way to directly associate Script code with a specific element via an action on that element. Event handlers were detected ~2/3 of all the URLs using Script, so a closer look at the many attributes this encompasses…
MAMA: Frames
The frame layout concept for Web pages was first implemented in Netscape 2.0 in 1995. It allowed the browser window to be sub-divided into any number of rows or columns of smaller, windowed documents. The concept has many design and usability problems, and…
MAMA: HEAD structure
The elements that constitute the Head section of a page contain meta information about the document, providing data used to access crucial external resources or other important information. The importance of these elements is highlighted by their dominant…
MAMA: Markup report, part 2: Primary functional and structural markup
This time we will look at some of the basic document structural elements. These are the elements that form the backbone of most documents. Some of the topics mentioned this week carry so much detail (such as the child elements of the HEAD element) that we can…
Rich HTML editing in the browser: part 2
In the first part of this article, I looked in great detail at the theory behind creating rich HTML editing functionality on Web pages using JavaScript constructs such as the designMode and contentEditable. These DOM properties have been standardized in HTML…
Keyboard-accessible Google Maps
Google Maps is a powerful, free tool for adding maps to a site. Unfortunately, out of the box, these maps are reliant on mouse interaction; therefore, they are completely inaccessible to those using only the keyboard for Web interaction. In this article,…
MAMA: Basic document structure
To get started in MAMA's look at markup practices and trends, we will first look at overall document sizes; then, we will examine some of the basic document structural components (Byte Order Marks and Doctypes). Finally, the full frequency tables for both…
MAMA: Character entities
I am not aware of any past studies of character entities (either numeric or named). MAMA's study appears to be the first; although, in hindsight, more could have been done. Knowing what character entities are used is definitely a good start, but it would also…
MAMA: Code comments
In another section of this research, we looked at the sizes of documents and their components. When considering this, one has to remember that SGML/XML comments can be present in content and this also affects these sizes. Browsers do not care about comments…
MAMA: Document Encodings
A critical part of rendering a document lies in a browser discerning the proper character set encoding. MAMA tracked most of the methods that can be used to detect the encoding, but it did not attempt to declare a "One, True Encoding" in cases where…
MAMA: Markup report, part 1: the basics
Our first look at markup in MAMA's URL set will begin with the basics. We will look at some of the housekeeping concerns of every document: how they are encoded, how big documents are, how much of the document is actual markup, doctype usage, etc. We will…
MAMA: HTTP Headers
In the beginning, there were only a few HTTP Headers that MAMA was concerned with (like the "Content-Type" and "Server" fields). As feature requests for HTTP Header data accumulated over time, managing the results became more difficult. MAMA generally wasn't…
MAMA: HTTP headers report
Before we start discussing the main part of MAMA's results on markup, CSS, and script, we need to start at the logical beginning of our story. Any page that a browser displays begins with a HTTP transaction. The requester asks a Web server for a document, and…
Optimizing Opera Widget graphics for mobile and devices
In this article I will explore a few simple techniques that will help you optimize the graphics inside your Opera widgets for mobile phones and other devices with limited resources. Of course, these tips are likely to also improve the widget's performance on…
SDK
Opera Widgets are self-contained Web applications built using open Web standards such as HTML, CSS and JavaScript. Widgets are cross-platform and cross-device, meaning you can deploy them anywhere, from desktop to mobile to TV, and more besides. Opera Widgets…
Using the Opera Widgets SDK - fast track guide
Opera Widgets are cross platform applications made with web technologies such as HTML, CSS and JavaScript, and therefore represent a great way to rapidly create and deploy applications across different devices – for example, you can run Opera Widgets equaly…
MAMA
The Web has search engines—many of them. However, they are typically concerned only with the text content of a Web page. What about a search engine for a Web page's structure? Say you want to find a sampling of Web pages that have more than 100 hyperlinks or…
MAMA: Acknowledgments
I could not have have gotten MAMA to where it is now without a lot of help. The following people get many thanks for their numerous contributions. Despite the best efforts of the following esteemed personages, any errors that remain are entirely my fault.
MAMA: Key findings
This article provides some of MAMA's most interesting findings, to offer a quick glimpse of what MAMA is capable of and to whet the reader's appetite for the more intricate results found in the rest of the study.
MAMA: Markup validation report
Web standards are good for the Web! Most of the readers of this site will understand why this statement holds true—ease of maintenance, cross platform compatibility, access by people with disabilities, the list goes on!
MAMA: Methodology
MAMA is written in Perl and stores its information in a MySQL database. The internals of the system reflected its incremental development over a long period of time. It began life as a series of counters and simple condition checks and evolved over the years…
MAMA: The "average" Web page
This section will attempt to describe the construction of a typical Web page based on the statistics presented in the MAMA research. This is not meant to imply that ALL, or even most Web pages look like this; it is a composite view of features that a…
MAMA: The URL Set
In Sisyphean fashion, we will start this section by trying to calculate the size of the ever-evolving Web. As a shortcut, we will consider another attempt at this estimate from the WWW FAQ. It does this by roughly estimating the number of Web pages on the…
MAMA: W3C validator research
Note that this document is large, so has been broken up into 3 pages; use the navigation at the bottom of the document to navigate between pages.
MAMA: What has come before
This article looks at what has come before MAMA in terms of web structure studies, both small and large.
Introduction to User JavaScript
User JavaScript is an Opera feature allowing you to apply custom JavaScript to any pages you surf to, giving you extra control over how sites are presented or loaded. There are many different reasons for you to apply custom JavaScript to web pages, including:
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…
Debugging widgets using Opera Dragonfly and the Opera Widget Emulator
Credit is also due to Gautam Chandna for supplying much of the base text for this article.
CSS Basics
In the earlier tutorials of this course we talked about the content of web sites and how to structure content using HTML. This is very important as it means that we give our documents meaning and structure for other technologies to tie into seamlessly. The…
22: Generic containers—the div and span elements
In this article, I am going to explain to you how and when to use the two elements in HTML that are not used to describe the content. The span and div elements do not actually confer any meaning to the content they envelop; instead, they are a generic…
23: Creating multiple pages with navigation menus
In this article I’ll talk about web site navigation and menus. You’ll learn about different types of menus and how to create them in HTML. I’ll also touch on the subject of menu usability and accessibility. I won’t go into styling menus yet, but this article…
24: Validating your HTML
Previous article—Creating multiple pages with navigation menus
25: Accessibility basics
When you create a web site, accessibility—making the web site usable by everyone, regardless of their ability or disability—should always be a central concern. So far in this course accessibility has always been implicit in all the examples you’ve seen, even…
26: Accessibility testing
Web accessibility testing is a subset of usability testing where the users under consideration have disabilities that affect how they use the web. The end goal, in both usability and accessiblity, is to discover how easily people can use a web site and feed…
27: CSS basics
In the earlier tutorials of this course we talked about the content of web sites and how to structuring content using HTML. This is very important as it means that we give our documents meaning and structure for other technologies to tie into seamlessly. The…
28: Inheritance and Cascade
Inheritance and the cascade are two fundamental concepts in CSS. Everyone who uses CSS needs to understand them. Fortunately, they aren’t very difficult to grasp, although some of the details may be a bit hard to remember.
29: Text styling with CSS
Next article—The CSS layout model—boxes, borders, margins, padding
30: The CSS layout model - boxes, borders, margins, padding
At first glance, the CSS layout model is a straightforward affair. Boxes, borders, and margins are fairly simple objects, and CSS syntax provides a simple way to describe their characteristics.
31: CSS background images
Previous article—The CSS layout model—boxes, borders, margins, padding
32: Styling lists and links
Many elements on a webpage are a little bit "forgiving" in terms of design—if they’re not "just right" it doesn’t matter too much. With lists and links it’s a different story—if you don’t get them right, you can cause some serious problems for people trying…
33: Styling tables
At times it seems that tables are a little misunderstood in modern web development. So much attention is given to "don’t use tables!" that people sometimes forget the issue is actually "don’t use tables for layout". Tables are excellent for their true…
35: Floats and clearing
In this article you will get acquainted with floating and clearing—two must-have tools for the modern web designer. They are versatile tools that you can use to allow text to flow around images or even create multi-column layouts.
36: CSS static and relative positioning
In this article I’ll start looking in depth at how you can use CSS to position HTML elements wherever you want on the page, using the position CSS property and some related properties.
37: CSS absolute and fixed positioning
Now it’s time to turn your attention to the second pair of position property values—absolute and fixed. The first pair of values—static and relative—are closely related, and we looked into those in great detail in the last article.
Opera Web Standards Curriculum glossary
In this document we have listed a lot of the most common/important terms relating to web design and development, and their definitions, so you can look up anything that you are not sure about throughout your journey across the far reaches of the Opera Web…
Supplementary: Common HTML entities used for typography
There are a number of HTML entities that come in handy when there’s a need for first-rate typesetting. Many of those listed in Table 1 are useful only when used in foreign language copy (and copy written in specific dialects of English), so context should be…
Opera Binary Markup Language
OBML is a feature available to Opera Mini and browsers created using the Opera Devices SDK 9.6 (all built upon the Presto 2.1 rendering engine)—when OBML is used to render a web page, instead of the whole page being downloaded to the device and rendered it is…
Opera Devices SDK 9.6 developer documentation
The Web has moved beyond the computer, into the living room, the car, and anywhere you go. The Web is no longer tethered to a fixed internet connection on one kind of device. Opera is at the forefront of the connected anywhere era, enabling diverse companies…
Presto 2.1 - web standards supported by Opera’s core
There are many Opera browsers, but each uses the same rendering engine, which is called Presto. You can be sure that every device, desktop or mobile running a browser with Presto 2.1 will render the website identically, although with a browser user interface…
Mobile style - CSS Mobile Profile 2.0
Following on from my previous article on mobile markup, this article will cover the W3C’s recommended option for supplying style to your mobile documents—CSS Mobile Profile 2.0. I will introduce what is available in the mobile profile and how it differs from…
Mobile markup - XHTML Basic 1.1
There are a number of options developers can take when planning to mobilise their Web sites. The three main approaches are:
Zebra striping tables with CSS3
Zebra striping—or, coloring or shading alternate rows on a table—is thought to enhance the usability of a table by guiding the user’s eye along a row. This method has been used in print for years, and many designers try to emulate this technique when making…
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…
WCL developer guide
Opera provides a library for the simple creation of chrome for widgets. This library makes it relatively painless to reuse code for widgets of different resolutions, defining different styles for each. The example widgets work identically on both portrait and…
CSS and opacity: methods for creating translucent elements
There are two general methods for creating partially transparent elements on a Web page. The first method uses transparent PNGs with the opacity pre-set through a digital imaging application. While this technique works, making it cross-browser compatible is a…
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…
Setting Web type to a baseline grid
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…
Supporting IE with conditional comments
Nearly three years ago, as the IE development team called for developers to clean up their CSS hacks in preparation for the release of IE7, I wrote a blog post called Future-proof your CSS with Conditional Comments, which detailed how to use a proprietary…
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 perspective
Rich HTML editing in the browser: part 1
In the very first browser, created by Tim Berners-Lee in 1990, web pages could be edited directly in the browser in WYSIWYG mode. The web was conceived as a read-write medium. Later browsers however, were basically read-only. Only plain text could be entered…
The freelancing business part 2: budgeting your projects
Welcome to the second in the series of dev.opera.com articles covering making money as a developer. In the last article, we discussed issues related to pricing—how to price your work, and how to maneuver your career into higher rates. Now that you know how to…
The Opera Animation library
The goal of this tutorial is to take you through creating animations using the Opera Animation library. The tutorial requires a basic understanding of JavaScript and CSS.
All together now: Video, 3D, File access
It’s here, the newest singing, dancing labs build (so far...). This time we basically have the latest desktop build plus video, 3D canvas, and File I/O. And this time we have Windows, Linux and Mac builds — so all you Mac fans, you can now have an Opera of…
Opera Mobile 9.5 - the developer angle
Opera Mobile 9.5 beta 1 has just come out! This release works only on Windows Mobile devices, although the final release will also support Symbian phones, with others being added in the future as well. It comes with many exciting new user features such as:
Remote debugging with Opera Dragonfly
One of the revolutionary aspects of Opera Dragonfly is the remote debug feature. With the release of Opera Mobile 9.5 beta 1, Opera Dragonfly can be used to debug web pages and applications on a mobile phone, from your regular development machine. This…
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. The articles that follow this one will look at each individual part of HTML in much greater depth. The…
1: Introduction to The Web Standards Curriculum/Table of Contents
This is Article 1—the first article in the Web Standards Curriculum.
10: 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…
11: Typography on the web
What is typography? Put simply, it is the art, design, and arrangement of text (referred to as type)—a concept borrowed from traditional print design. It is as much about what you don’t do with your type as what you do. On the web, typography often gets very…
12: 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. The articles that follow this one will look at each individual part of HTML in much greater depth. The…
13: The HTML <head> element
Next article—Choosing the right doctype for your HTML documents
14: Choosing the right doctype for your HTML documents
Article 13 dissected the anatomy of the head section of an HTML document, looking briefly at what different things can be contained in the head, and what they do. In this article I will look at the doctype in a lot more detail, showing what it does and how it…
15: Marking up textual content in HTML
Previous article—Choosing the right doctype for your HTML documents
16: HTML lists
Lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. In modern web development lists are workhorse elements, frequently used for navigation as well as general content.
17: Images in HTML
In this tutorial I’ll talk about one the things that makes web design pretty—images. At the end of this tutorial you’ll know how to add imagery to web documents in an accessible way (so that people with visual impairments can still use the information on your…
18: HTML links - let's build a web!
In this tutorial you’ll learn all about one of the most ground-breaking inventions in the history of the web—links. Links allow the reader of a document to follow them to another document and jump from server to server without having to disconnect and connect…
19: HTML tables
“Ack!”—how do you use web standards to organize reams of data? The very idea of tons of nested elements needed to get all the data into nice little rows and boxes ought to put your brain into “Ack!” mode, but there is a solution—tables to the rescue!
2: The history of the Internet and the web, and the evolution of web standards
Previous article—Introduction to The Web Standards Curriculum/Table of Contents
20: HTML forms—the basics
Everyone has seen a form. Everyone has used one. But have you coded one?
21: Lesser-known semantic elements
In this article I will introduce you to some of the more obscure and less well-known and used semantic elements in HTML. I’ll look at marking up programming code, interaction with computers, citations and abbreviations, showing changes made to documents and…
3: How does the Internet work?
Previous article—The history of the Internet and the web, and the evolution of web standards
4: The Web standards model - HTML, CSS and JavaScript
Previous article—How does the Internet work? Next article—Web standards—beautiful dream, but what’s the reality?
5: Web standards – beautiful dream, but what's the reality?
Previous article—The Web standards model—vHTML, CSS and JavaScript
6: Information Architecture - Planning out a web site
Previous article —Web standards—beautiful dream, but what’s the reality?
7: What does a good web page need?
Previous article—Information Architecture—Planning out a web site
8: Colour Theory
Without much colour or graphics, every site would become Jakob Nielsen’s dream site. Although Nielsen’s philosophy of bare-bones Web architecture has accessibility and usability merits, most Web designers want to add a signature touch to their sites with many…
9: 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…
Supplementary: Getting your content online
This is a supplementary article to the Web Standards Curriculum.
Supplementary: More about the document <head>
This is a supplementary article to the Web Standards Curriculum.
A browser sniffing warning: The trouble with Acid3 and TinyMCE
Once upon a time, a shiny new release of Opera exposed a rather nasty bug in a very popular JavaScript library: Opera 9.5 didn’t work properly with the TinyMCE editor, causing severe text editing problems in Wordpress’s admin screen, webmail applications and…
Applying color tints to web pages with SVG filters and JavaScript
In this article I will present to you a new experiment of mine—an application of SVG and JavaScript that allows you to re-color any web page you navigate to. This has great uses—not only can it be used to make pages more accessible, but you can also use it to…
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…
Opera Skinning
pages: 1/5: Introduction — 2/5: Skinning examples — 3/5: Skin.ini explained — 4/5: skin.ini element reference — 5/5: tips & tricks
Opera Skinning part 1: Introduction
Opera 12 and above support a new, simplified form of skinning. See our tutorial on how to make themes (skins) for Opera.
Opera Skinning part 2: Skinning examples
Pages: 1/5: Introduction — 2/5: Skinning examples — 3/5: Skin.ini explained — 4/5: skin.ini element reference — 5/5: tips & tricks
Opera Skinning part 3: Skin.ini explained
pages: 1/5: Introduction, general explanations — 2/5: Skinning examples — 3/5: Skin.ini explained — 4/5: skin.ini element reference — 5/5: tips & tricks
Opera Skinning part 4: skin.ini element reference
pages: 1/5: Introduction, general explanations — 2/5: Skinning examples — 3/5: Skin.ini explained — 4/5: skin.ini element reference — 5/5: tips & tricks
Opera Skinning part 5: Tips and tricks
Pages: 1/5: Introduction, general explanations — 2/5: Skinning examples — 3/5: Skin.ini explained — 4/5: skin.ini element reference — 5/5: tips & tricks
Opera 9.5 - the next generation of web standards
Another exciting time dawns upon us for the advancement of web standards, with the release of the final version of Opera 9.5—download Opera 9.5 here. If you’ve been checking out the beta releases, you’ll already have a taste of some of the great new features…
The freelancing business part 1: pricing your work
Welcome to the first part of a six-part series of articles on making money as an Interactive/web development freelancer. This series comes from a pair of workshops that I teach at the Rich Media Institute - one on Service Contracts and one on Pricing.
Adding a docked mode to your widgets
Opera Widgets are required to be run on various devices under differing UI constraints. In some cases, the UI needs to be interactive and in others only informative. To support this, Opera Widgets can be viewed in different modes, each mode giving the widget…
Characteristics of widgets on mobile phones
This document describes what considerations you need to take into account when developing for mobiles, due to the characteristics specific to those devices. See the article on techniques for cross device development for more practical solutions, and some…
Cross device development techniques for widgets
This article looks at techniques, code examples and tips for doing cross device development of widgets. The techniques are grouped into the following sections: Usability, Architecture, Layout, Images and effects, Network, Client-server communication, DOM and…
Mobile widget development process advice
This articles provides some advice on developing mobile widgets, with special focus on mobile widgets. Generally, we recommend that you develop your widget on desktop, test your widget in the Widget Emulator, and test on the phone when you’re done. Finally,…
Opera Widget support notes
This article details what parts of the features of Opera Widgets are supported on different devices. The features are compared to their status in the W3C standardization process. Note that this document is not meant to be a complete set of comparisons.…
Opera Widgets and Ajax: connecting to multiple servers
Scripts on web pages cannot connect to any web server other than the one the page was loaded from. This is known as the same-origin security policy and is a cornerstone of keeping the web safe.
Opera Widgets - core DOM reference
This document describes the widget object and extensions to the window object that are available to a widget through JavaScript. This API allows you to communicate with the underlying widget runtime. The runtime offers some services such as showing and hiding…
Opera Widgets: cross platform applications
The Opera widgets runtime is available on all platforms where Opera 9.x is available. This article discusses the nature of Opera Widgets, as cross platform applications, goes through the benefits of their implementation model, and looks at some platform…
Opera Widgets Preference Store
The Opera Widgets Preference Store is where widgets store their settings, and other data you want the widget to persist across sessions. Once data is stored in the Opera Widgets Preference Store, the user may close and reopen the widget, and the stored…
Opera Widgets SDK
Opera Widgets are cross platform and cross device applications made with web technologies, therefore you can develop Opera Widgets quickly and easily and deploy them to different devices with a minimum amount of adaptation.
Opera Widgets security model
Opera Widgets can download and combine data from most parts of the web, which make them a powerful platform for delivering innovative services to users. The security model is initially very open to allow authors to easily create such services. The widget…
Opera Widgets Specification 1.0 third edition
This document describes Opera Widgets 1.0, third edition, and covers all aspects of Opera Widgets, including the packaging format, the configuration file - config.xml - and scripting interfaces for working with widgets.
Widget Emulator
The widget emulator is a tool enabling you to see how your widget is likely to appear on a small monitor, TV or handheld device. The emulator runs your widget in a sandbox and will “trick” it in various ways to emulate the important differences between these…
Widget modes: docked, widget and more
On some platforms the Opera Widgets runtime supports more than one mode for the widget to run in, for instance a mobile phone may support both to show widgets one at a time in full screen mode and to show multiple widgets with each widget displayed in a…
File I/O API for widgets
Note that you can find links to the API documentation, example downloads etc, here.
Opera Dragonfly 入門 (Japanese)
この記事は「Introduction to Opera Dragonfly」の日本語訳です。 【翻訳：利部直、上廣剛、アンドレアス・ボーヴェンス】
Opera announces specification for File I/O access in widgets
Web applications have historically had very little access to data stored on the device they are running on - this model is secure, but limits the power of developers trying to create cutting edge "hybrid" applications that draw functionality in from both the…
Introduction to Opera Dragonfly
An exciting new development is upon us - we have unleashed the Dragonfly! Opera Dragonfly is Opera's all-new set of developer tools, designed to give developers a lightweight-but-powerful application that provides effective mechanisms for web standards…
Opera Dragonfly Architecture
This article covers the architecture of Opera Dragonfly in detail, showing what the different components in the architecture are, and how they interact during Dragonfly's running.
How to make a Voice controlled SVG game
This tutorial shows how to add Voice control to SVG, using the example of a game.
Opera Kestrel beta 2 is now available
This week we released an exciting new beta release of Kestrel, the new Opera desktop browser — beta 2, to be exact. It's got some exciting new additions, such as support for full CSS3 selectors and HSL, support for MathML, further speed optimizations, support…
Stop using Ajax!
A while back I got into a forum discussion over the accessibility of CAPTCHA systems. That isn't what this article is about (in fact it wasn't what the thread was about either, but I soon changed that!). I only mention it because one comment in particular…
Location-based publishing and services
Geocoded content is transforming our Web. By adding geographical coordinates (latitude and longitude) to our media, we can help others find it through location-based search engines and web maps.
Getting started with Opera skinning
This tutorial will teach you the basics of how to skin Opera. Sounds painful, doesn't it? Never fear - I'm not advocating doing any kind of injury to your beloved browser; I am referring to customizing its look and feel by altering the images that comprise…
Indexing and searching in Opera - visited pages search
Opera 9.5 contains a new feature that allows you to search the full text from any previously-visited pages — visited pages search. Anytime you visit a page, its contents is indexed. Then for example if, a month later, you start thinking "Where the hell did I…
Indexing and searching in Opera with Opera Quick Find History Search
Opera 9.5 contains a new feature that allows you to search the full text from any previously-visited pages — Opera Quick Find History Search. Anytime you visit a page, its contents is indexed. Then for example if, a month later, you start thinking "Where did…
Opera Mini for Android
This article takes a look at one of Opera's latest and greatest projects - the creation of an Opera Mini version that will run on Google's Android open mobile development platform. Over the course of the article, we'll explain why we created it, how,…
Public Acid3 build
Two days ago Opera reached a 100/100 pass rate on the Acid3 test for the first time and we published a screenshot on the Desktop team blog to back up the claim. I am pleased to announce the first public build with a 100/100 pass rate and pixel-perfect…
Javascript badges powered by JSONP and microformats
With the number of social networking sites and other online applications increasing daily, I'm starting to get bored of entering and maintaining the same information on each new site I join, never mind my own personal sites. I'm sure some of you are feeling…
How to do photoshop-like effects in SVG
I came across this nice Photoshop tutorial the other day. Looking at this, and the other tutorials available there made me want to try to recreate the same effects, not using Photoshop however, just SVG. Read on for my take on the above tutorial. To better…
Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Peter-Paul Koch in his book "ppk on JavaScript", points out that the <noscript></noscript> element has a limitation. Modern user agents with JavaScript enabled will hide content contained within <noscript></noscript>, and reveal it when JavaScript is…
CSS text shadows and background sizing
CSS3 offers advancements in how Web designers can apply design touches to their designs. One of the most often wished for properties - text-shadow, which allows easy creation of drop shadowscode - looks to be popular as new versions of popular browsers are…
XFN encoding, extraction, and visualizations
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…
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…
Persisting widget data across platforms and devices using Opera's XML store
Opera widgets often have the need to persist data - this is usually saved locally using preferenceForkey preferences. This works well, but it has the limitation that the data is only available to that single browser installation. To let widgets have access to…
The first working draft of HTML 5 is here!
On January 22nd 2008 the W3C published the First Public Working Draft of HTML 5 - this is a great step forward, as this draft has been in the works for several years. It was initially just being developed the WHATWG, with the W3C HTML Working Group coming on…
Creating your first Opera widget
Creating an Opera widget is quick and painless, with just a few pointers in the right direction. This article details what a widget is and what you need to create one, and also takes you through creating, running and packaging a widget step by step. The basic…
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.
The Opera plug-in interface
Note: This documentation applies to version 9.0 and later of Opera for desktop, mobile phones, and devices.
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…
Progressive Enhancement with CSS 3: A better experience for modern browsers
The latest releases of cutting-edge browsers (such as Safari 3 and Opera 9.5) implement some of the decorative declarations from the proposed CSS 3 specification. Opacity, shadows and tiger-striping effects are now available without the use of JavaScript,…
Opera competition - design a widget and win a Wii with Guitar Hero III!
The Opera Widgets team are running a great competition - the designer of the best new widget will win a Nintendo Wii with Guitar Hero III and 2 guitar controllers! Read more about the competition here.
Special Web Directions North discount for the Opera Community!
Great news! Web Directions North - the fantastic Canadian web design/development conference - is happening again, and we're sponsoring it. And to make things even better, the organisers have given us a special promotional code that willl give you an extra…