Dev.Opera 2011
2013 2012 2011 2010 2009 2008 2007 2006
Love Your Devices: Adaptive Web Design With Media Queries, Viewport and More
It's time again to reflect on happiness and well being: that of yourselves and the members of the public who consume the web content and services you create. Today we are going to talk about getting more satisfaction from battery-powered devices...
An Introduction to WebGL — Part 2: Porting 3D Graphics
In the first part of our WebGL series, we walked through a very simple introduction to WebGL, explaining what it is and how it can be used, and dissected a simple code example. From here on in, we will start looking at WebGL in more detail, focussing on…
opera.contexts.toolbar.createItem()
This method creates a Button from a given property object. Note: The item can only be used within the ToolbarContext that it is created in.
Christmas at Opera Labs: 64-bit Opera, and out-of-process plug-ins
As the snow settles on the ground, and the elves draw close to finishing construction of all their toy orders, it may not surprise you to learn that Opera's little helpers have also been very busy, adding exciting new innovations to our desktop browser!
Better error handling with window.onerror
onerror is a DOM event handler. It is started when an error occurs during object loading. While window.onerror is an event handler, there is no error event being fired: instead, when there is an uncaught exception or compile-time error, the window.onerror…
DOM access control using cross-origin resource sharing
Same-origin policies are a central security concept of modern browsers. In a web context, they prevent a script hosted at one origin — meaning the same protocol, domain name, and port — from reading from or writing to the DOM of another.
Badge.backgroundColor
The background color for the badge; accepts hexadecimal notation, RGBA, and color name values (e.g., #afafaf, (200, 200, 200, 0), blue).
Badge.color
The color of the text of the badge; accepts hexadecimal notation, RGBA and color name values (e.g., #afafaf, (200, 200, 200, 0), blue).
Badge.display
Determines whether the badge should be displayed; allowed values: "block" and "none"; it is set to "none" by default.
Badge.textContent
The text that will be shown in the badge; this may overflow the visual space provided which is usually around four characters.
Button & Badge
The browser toolbar API is part of the background process API. This part deals with the browser toolbar context, which allows the creation and manipulation of buttons, badges, and popup windows.
Button.addEventListener()
void addEventListener(<DOMString> type, eventListener, <boolean> useCapture)
Button.disabled
This property indicates if the Button is disabled. By default, it is set to false (meaning the button is enabled).
Button.icon
This property represents the icon for the Button. It can reference the relative path to a data URI, an image located inside the package, or it can point to an external URL.
Button.onclick
This property represents the function executed when the button is clicked.
Button.popup
This property represents the Popup for the Button. Calling Button.popup will return the popup object. You can also get and set the popup properties directly through the Button object (e.g. to set the popup width you can do 'button.popup.width = 300')
Button.removeEventListener()
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
Button.title
This property represents the title of the button (which is also visible as a tooltip when hovering over the button with a mouse).
access element
The <access> element allows authors permission to access external web resources. If the background process needs anything to load from outside the extension (like a web resource) then it needs to be specified in this element. If the extension needs to share…
author element
The <author> element is used to provide details regarding the author of the extension. The following attributes are associated with it.
content element
The <content> element is used to define a custom start file for the extension. The following attributes are associated with it.
description element
The <description> provides a description of what the extension is supposed to do.
dir attribute
The dir attribute defines the direction of the language used by an element with the following values:
feature element
The <feature> element declares the use of certain features by the extension, such as being able to display content in speed dial.
icon element
If any .svg, .ico, .png, .gif or .jpg file with the name "icon" is present in the extension package (for example: 'icon.png'), then that is used as the icon for the extension by default.
license element
The <license> element mentions the software license. The following attributes are associated with it.
name element
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
preference element
The <preference> element allows for preferences to be declared by the developer. Using this, a key-value pair is stored in a persistent manner and is initiated the first time the extension is started. Preferences can then be accessed at runtime via the…
span element
The <span> element serves as a wrapper for text content, usually for the purpose of internationalization. The following attributes are associated with it.
widget element
The <widget> element is the container element under which the rest of the elements of the config.xml file go. The following attributes are associated with it.
config.xml
The mandatory config.xml file gives the Opera browser relevant information about an Opera extension, such as the name, description and version.
xml:lang attribute
The xml:lang attribute specifies the language of the contained text in the element. This attribute is optional and should only be used for localization purposes.
Injected scripts
You can add JavaScript to a website using "injected scripts". These are normal JavaScript files located inside the "includes" folder in the extension. Opera will execute the given scripts on either all pages, or certain sites and domains they have been…
Messaging
Communicating between different parts of an extension is done by using either the background process or the messaging API.
opera.extension.addEventListener()
This method is used to listen for events being dispatched. For opera.extension, this inlcudes 'connect', 'message', and 'disconnect'.
opera.extension.bgProcess
A reference to the window object of the background process. The bgProcess object can be used to set and get variables and functions between the background script and a popup window or preferences page. Note that it cannot be used in injected scripts for…
opera.extension.broadcastMessage()
This method is used to broadcast data to all connected environments associated with the extension, such as the preferences page, popup window and injected scripts.
opera.extension.onconnect
This event listener is invoked when an injected script, popup, or preferences environment is created that enables communication. The event's source (event.source) is a messagePort to the connecting environment. The following function will execute when a…
opera.extension.ondisconnect
This event listener is invoked when an injected script, popup or preferences environment is destroyed and communication is disabled. The event's source is a messagePort to the disconnecting environment, used only for comparative purposes. The port itself may…
opera.extension.onmessage
This event listener is invoked when a message is received from an injected script, popup or preferences page. The event's source is a messagePort to the connecting environment.
opera.extension.removeEventListener()
void removeEventListener (<DOMString> type, eventListerner, <boolean> useCapture)
opera.addEventListener()
Registers a listener for an event specific to the injected script side. The listener needs to use the standard EventListener interface - a function with an Event object as its first argment, e.g. var myListener = function(event) {alert(event.type)};
opera.defineMagicFunction()
This method can be used to override global functions defined by regular scripts in a page.
opera.defineMagicVariable()
This method can be used by to override global variables defined by regular scripts in a page.
opera.postError()
Makes a given text string appear in the Error Console. Helpful for debugging.
opera.removeEventListener()
void removeEventListener (<DOMString> type, <EventListener> listener, UseCapture)
Popup
An extension's toolbar button can easily be programmed to open a popup window. This popup window displays the contents of an HTML file and is closed by the user clicking again on the toolbar button. There are a few attributes and methods specific to this…
Popup.height
The height of the popup window; by default, the height is 300px. Note that this attribute is set in the background script as part of the ToolbarUIItemProperties object. See the Browser Toolbar guide.
Popup.href
A URL reference to the page to pop up; this page will pop up when the user clicks on an ExtensionUIItem; editing the href attribute while the popup is open will close the popup. Note that this attribute is set in the background script as part of the…
opera.extension.postMessage()
This method is used to post a message to the BackgroundProcess of the extension.
Popup.width
The width of the popup window; by default, the width is 300px. Note that this attribute is set in the background script as part of the ToolbarUIItemProperties object. See the Browser Toolbar guide.
Speed Dial
The Speed Dial page is the "start page" that is displayed every time you open a new tab in Opera.
Speed Dial feature element
A feature request by the extension to have its content displayed in a Speed Dial cell. It requires one parameter, the url parameter, as a param child element. The feature element is defined in the W3C Widgets specification.
Speed Dial param element
The Speed Dial feature request takes one parameter whose name attribute value is the string url and whose value attribute value is a valid non-empty URL potentially surrounded by spaces. The param element is defined in the W3C Widgets specification.
opera.contexts.speeddial.title
Represents the human-readable title given to a Speed Dial cell. If not specified, the default value is the extension's name (specified in the config.xml's name element).
opera.contexts.speeddial.url
Represents the target URL of the Speed Dial cell when clicked or otherwise activated. This can be either an external page or a local file within the extension. If not specified, the default value is the feature request's param element whose name attribute is…
Speed Dial viewmodes attribute
Indicates whether the extension should be run in a minimized state by using a value of minimized. It is not mandatory that the minimized view mode be explicitly used through CSS in the background process—so long as the extension declares that the minimized…
opera.contexts.toolbar.addItem()
This method adds a Button to the toolbar in the browser. To create a Button see the createItem method.
opera.contexts.toolbar.length
This attribute contains the number of UI items held by the ToolbarContext. Note: The ToolbarContext is currently restricted to a maximum of one UI item, so this will be either 1 or 0.
opera.contexts.toolbar.removeItem()
This method removes a given Button from the toolbar in the browser.
URL filter
The URL Filter API for Opera extensions defines a DOM interface that allows extensions to add temporary rules to Opera's native content blocker. Rules added through this API are associated with an extension and apply as long as the extension is enabled. Once…
opera.extension.urlfilter.block.add()
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
opera.extension.urlfilter.block.remove()
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
widget.author
This readonly attribute corresponds to the author element in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.authorEmail
This readonly attribute corresponds to the author element's email attribute in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.authorHref
This readonly attribute corresponds to the author element's href attribute in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.description
This readonly attribute corresponds to the description element in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.id
This readonly attribute corresponds to the widget element's id attribute in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.name
This readonly attribute corresponds to the name element in the configuration document, if one was declared. Otherwise, it will return an empty string.
Widget object
The widget object provides functionality for accessing an extension's metadata and persistently-stored data. It can be accessed from any of the extension's environments, such as background process, popup window, injected script or preferences page. Note that…
widget.preferences
This readonly attribute implements a HTML5 DOM Storage interface that allows read/write access to the name and values of any preference elements declared in the configuration document. Read more about how to make use of widget.preferences in the options page…
widget.shortName
This readonly attribute corresponds to the name element's short attribute in the configuration document, if one was declared. Otherwise, it will return an empty string.
widget.version
This readonly attribute corresponds to the widget element's version attribute in the configuration document, if one was declared. Otherwise, it will return an empty string.
HTML5 custom protocol and content handlers
Since the Opera 11.60 snapshot release, we have had support for the HTML5 custom scheme and content handlers. Their purpose is pretty simple. Your site can offer to handle certain MIME types or schemes (aka “protocols”) and the user has the option of opting…
Introducing ECMAScript 5.1
ECMAScript 5.1 (or just ES5) is the latest revision of the ECMAScript standard — the specification that JavaScript is based on. Similar in spirit to the HTML5 specification process, ES5 standardizes existing JavaScript implementations in conjunction with…
Love your devices: adaptive web design with media queries, viewport and more
It's time again to reflect on happiness and well being: that of yourselves and the members of the public who consume the web content and services you create. Today we are going to talk about getting more satisfaction from battery-powered devices...
Porting 3D graphics to the web — WebGL intro part 2
In the first part of our WebGL series, we walked through a very simple introduction to WebGL, explaining what it is and how it can be used, and dissected a simple code example. From here on in, we will start looking at WebGL in more detail, focussing on…
Opera for Devices: Out of Memory System
Opera for Devices provides powerful mechanisms to strictly limit the heap usage of Opera. Memory is an expensive commodity on many devices and different programs may compete for the limited resources with unpredictable consequences. With the Out of Memory…
Opera TV Emulator: Tools for content developers
The Opera TV Emulator may be configured via the Settings button on the web remote control. You can set the desired options using the tabs and settings listed below:
Opera TV Emulator: Getting started
The Opera TV Emulator is provided via a Linux system image that should be launched using a VirtualBox virtual machine. This ensures a test environment for web developers that is as close to a real device system as possible. VirtualBox works on the most common…
Opera TV Emulator: Overview & support
The Opera TV Emulator allows any web developer to develop content for TVs and other devices without access to a physical device. It runs on a standard Linux PC and makes it easy to develop and debug applications for all Opera enabled devices. The Opera TV…
Opera TV Emulator: User Guide
If you have questions or problems that are not covered in this documentation, please refer to the support page for information on how to contact us.
Building a web mapping application with Pergola and Polymaps
Mapping applications are very popular, and it is easy to embed a simple map on a page using something like the Google Maps API. However, anyone who has tried to create a more complex mapping application will know that it can take a considerable investment in…
Operas leichtgewichtige Themes
Opera 12 enthält viele Verbesserungen, inklusive Updates an Operas Skinning-System. Aus diesem Grund haben wir Skins in Themes umbenannt. Es gibt ein neues leichtgewichtiges System (intern wird es Personas genannt), welches auf Operas Standard-Theme aufbaut…
Opera Mobile Labs 11.5 for MeeGo netbooks and tablets
Since releasing Opera Mobile 11.5 for Android earlier this month, we have been working on an updated Labs release for MeeGo netbooks and tablets running Intel Atom processors.
Opera エクステンションの公開ガイドライン
図 1： 公開に至るまでのプロセスの概略 - 開発者が拡張機能を作成し、Opera エクステンションリストにアクセスして提出する。拡張機能の管理者が提出されたものを審査した後、公開に至る。不採用の場合は開発者に返却し、改良を加えた後に再提出するように伝える。
Playing With HTML5 Video & getUserMedia Support
You may have seen the impressive HTML5 experiment created by Sean Christmann involving a video that explodes at the click of a mouse. If not, we'd recommend that you have a look:
More fun using the Web, with getUserMedia and native pages
Another Opera labs release is upon us, esteemed friends in the land of Web! This time we are making available a very exciting build indeed, with support for both the getUserMedia method, enabling us to make use of video input from a user’s web cam, and native…
Opera Reader: a new way to read the Web!
Around 2000 years ago, the Romans developed the codex. Different from scrolls — the previously accepted literary format — the codex had pages that were bound together into what we today call books.
Playing with HTML5 video and getUserMedia support
You may have seen the impressive HTML5 experiment created by Sean Christmann involving a video that explodes at the click of a mouse. If not, we'd recommend that you have a look:
An Introduction to WebGL — Part 1
This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you’ll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL…
An introduction to WebGL
This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you'll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL…
Opera's lightweight themes
Opera 12 brings us many improvements, including updates to the Opera skinning system. For a start, the updates are so extensive that we have renamed skins to themes. There is a new lightweight system (internally called personas), which sits on top of the…
CSS3 radial gradients
Gradients are much-used on web sites: if you want to liven up pretty much any UI feature (buttons, panels, headers, etc.) you can use a gradient, although you should use them sparingly to avoid the "web site christmas tree effect"™. Traditionally we used CSS…
Arquitetura da Informação – Planejando um web site
Tradicionalmente, planejar um web site (ou qualquer outro projeto) é uma tarefa pouco estressante. Todos têm uma opinião sobre como deve ser a construção de um site, e com certeza, as opiniões serão contraditórias se comparadas à de terceiros. Seu primeiro…
Opera Mini Request Headers
Opera Mini uses a number of custom, unregistered HTTP headers. Most of these are specific to Mini, and are sent in addition to the regular HTTP headers sent by Opera on any platform. The purpose of these headers is to give site owners information about the…
Introduction au Web Standards Curriculum
Tous les auteurs qui ont contribué à ce curriculum sont des passionnés qui croient fermement aux standards du Web. Nous voulons tous faire de notre mieux pour rendre le Web meilleur et je suis convaincu que cela passe par l'apprentissage et l'enseignement,…
Opera エクステンション：ボタン、バッヂ、ポップアップ
この文書ではツールバー上のボタンの作り方やその構成について端から端まで全て解説していきます。ツールバー上のアイテムはバックグラウンドプロセスの一部として定義したり操作したりします。挿入されたスクリプトやポップアップから直接定義したり操作したりはできません。ボタンやバッヂ、ポップアップは opera.coontexts.toolbar に制御されますがこれについての詳細は、Browser Toolbar API Guide を参照してください。
Opera のスキン パート 1: 入門
この翻訳文は、 数多世界氏の翻訳を本人の許諾の下一部編集し、また本人の依頼の元私名義で Dev.Opera に掲載するものです。This translated document was originally written by amatanoyo. I've been requested to post this to Dev.Opera credited to me, with permission to edit the original translation.
Opera エクステンションでの cookie 共有
デスクトップ向け Opera 11.50 では、エクステンションが cookie をブラウザと共有できる機能を導入しました。「クッキー」と言うと、ついついミルクとビスケットの話に脱線しそうになりますが、今回は、この新しい機能が、より使いやすいエクステンションを作成するにあたって、どのようなサポートを行うのかを見ていきましょう。また、この機能は開発者にとっても扱いやすいものであるということも付け加えておきます。
Microdata & the microdata DOM API
One of the main problems HTML5 set out to solve was consistency (and therefore machine readability) of markup, evidenced by the introduction of standard semantic elements such as <header>, <nav> and <figure>. This is all well and good, but there are times…
6: Architecture de l’information – Penser l’organisation d’un site web
De manière générale, réfléchir à l’organisation d’un site web (ou de n’importe quel projet) peut être une étape un peu stressante. Tout le monde a un avis sur la façon dont doit être construit le site, et souvent les opinions divergent entre elles. Votre…
Tweaking spatial navigation for TV browsing
One of the biggest challenges designing content for TVs is navigation. Not only are there several different methods that can be used to navigate a page, but none of them provide the perfect blend of convenience and practicality, at least not yet. At the time…
100% Ragnarök’n’roll
In February, Stig showed us the first Labs build of Ragnarök, Opera’s HTML5 parser . Here’s a new build: note, this is not an Opera Next build but a Labs build with a different profile, different UA string, and outside of the Next auto-update cycle.
Introducing the HTML5 History API
Before the advent of HTML5, one thing that we — as web developers — were not able to control and manipulate is the session history of a particular browsing context. Not without incurring page reloads or relying on location.hash workarounds. This is all set to…
Cookie-sharing in Opera extensions
Our upcoming Opera 11.50 for desktop introduces the ability for extensions to share cookies with the browser. As tempting as it is to dive into puns about milk and biscuits, we're going to look at how this new feature can help you make extensions that are…
An Introduction to Datasets
HTML5 includes a means to set custom attributes on elements using the data- prefix. Called data attributes, they can be scripted to define and store data as well as increase options for attribute selection when styling with CSS. You can use as many data…
Criando extensões para o Speed Dial do Opera
Em 2007 nós anunciamos o Speed Dial para o Mundo. O conceito mostrou ser bastante popular e acabou gerando implementações similares em navegadores concorrentes. Como estamos muito orgulhosos do resultado, que tipo de pais nós seríamos se não ajudássemos o…
Cara membuat ekstensi Speed Dial Opera
Di tahun 2007 kami memperkenalkan fitur Panggilan Cepat atau yang lebih dikenal dengan Speed Dial kepada dunia. Konsep ini kemudian popular dan banyak ditemukan implementasi serupa di browser-browser lain. Tetapi selain berbangga hati, orang tua macam apa…
Opera Mobile Emulator for Desktop
Making sure that your site looks great and works exactly as it should in mobile and tablet browsers can often be a tedious process — you typically need one or more physical devices, or some form of virtual machine emulating the whole operating system, and…
Opera Mobile 11 MeeGo ARM developer preview
Opera Software continues our support of the MeeGo open source initiative ( http://labs.opera.com/news/2011/03/22/ ) with the release of a developer preview of Opera Mobile 11 for ARM-based devices.
Tạo phần mở rộng dành cho Speed Dial
Vào năm 2007, Opera đã giới thiệu Speed Dial với toàn thể người dùng Opera. Ngày nay tính năng này đã rất phổ biến và hầu như các trình duyệt khác cũng có tính năng tương tự. Nhưng chúng tôi vẫn tự hào rằng, chúng ta sẽ không phải là những bậc làm cha làm mẹ…
!Opera extensions قل مرحبا لـ
هذا المقالة تأخذك خلال الخطوات الأساسية لإنشاء أول إضافة لك (Extensions or Add-on). ستقوم بإنشاء زر (button) على شريط الأدوات لـ Opera، عندما يتم الضغط علية سيقوم بعرض نافذة منبثقة تحمل في داخلها الرسالة "!Hello World". الإضافات في Opera يتم كتابتها باستخدام…
Opera Speed Dial エクステンション（拡張機能）の作成
Opera が Speed Dial を導入し、世界に向けて発表したのは 2007 年に遡ります。発表当時、Speed Dial のコンセプトは極めて好評を博し、今では他のブラウザでも似たような機能が見かけられるようになりました。しかし、そのような誇るべき機能を発展させることなく、また新しいスキルを開発をせずに放っておくという手はありません。Opera 11.10 版においては、Speed Dial の視覚的な表示方法とユーザーエクスピリエンスを改善し、Speed Dial…
Creando Extensiones para el Acceso Rápido de Opera
En el 2007, presentamos al mundo: Acceso Rápido. La idea se volvió popular y hoy en día pueden ser encontradas implementaciones similares en otros navegadores. Pero estamos muy orgullosos, ¿qué clase de padres seríamos si no ayudáramos a nuestro “bebé” a…
Создание расширений для Speed Dial
В 2007 году мы представили миру экспресс-панель. Сегодня вы можете найти реализации этого популярного концепта почти во всех ведущих браузерах. Но как бы мы этим не гордились, какими бы родителями мы были, если бы не помогали нашему детищу расти и открывать…
Opera Speed Dial Extensions erstellen
Damals, im Jahr 2007, stellten wir die Schnellwahl der Welt vor. Das Konzept erwies sich als sehr beliebt und ähnliche Ansätze können mittlerweile auch in anderen Browsern gefunden werden. Aber so stolz wir auch sind, was wären wir für Eltern, wenn wir…
如何建立一个快速拨号扩展插件
2007年我们给大家带来了快速拨号。之后其他浏览器也陆续推出了这个功能。身为第一个推出快速拨号的浏览器，我们有义务继续提升这个功能。在Opera11.10版本，我们给快速拨号优化了显示和用户体验。同时也给程序员提供控制快速拨号网页的功能。在Opera11.50，我们推出了快速拨号插件。 程序员提供控制
Creating Opera Speed Dial Extensions
Back in 2007, we introduced Speed Dial to the world. The concept proved extremely popular and similar implementations can now be found in other browsers as well. But as proud as we are, what kind of parents would we be if we didn't help our baby to grow up…
CSS3 の object-fit と object-position プロパティ
CSS でよくある問題に、やなどの置換要素のアスペクト比を制御するというものがあります。たとえば、アスペクト比の違うものが混ざってもそれが変形されないように、ページに画像を同じ大きさで並べたいという場合を考えてみましょう。画像を切り抜いたり無理やり変形させるよりも、アスペクト比を保ちながらリサイズし、レターボックス表示にするほうがずっとエレガントです。あるいは逆に、レターボックスを持つ HTML5 の <video>…
作成したサイトを Speed Dial 内で際立たせるには
デスクトップ版 Opera 11.10 以降では、コンテンツ作成者が Speed Dial 内でサイトをコントロールすることができるようになりました。Speed Dial はデフォルトでは Web サイトの画面の取り込みを行いますが、サイトの所有者はアイコンを特定したり、Speed Dial に特化した CSS やコンテンツを提供することができます。
Lassen Sie Ihre Seite in der Schnellwahl erstrahlen
Seit Version 11.10 erlaubt Opera Webseitenbetreibern die Kontrolle über das Aussehen ihrer Seite in der Schnellwahl. Standardmäßig verwendet die Schnellwahl einen Screenshot der Webseite. Doch jetzt ist es auch möglich, ein Icon zu definieren oder spezielles…
Accessing an Opera extension's background process
One of the trickiest areas of building an Opera extension is messaging—sending information from one part of the extension to another. For example, you may want to execute some code in the background process whenever a pop up window is opened, which would…
Creating multilingual extensions
Authors who want to provide their extensions in different languages don't have to create separately packaged versions of their .oex file. Opera's extensions use the same packaging and configuration as W3C Widgets, which includes built-in mechanisms for…
Magic functions and variables
Opera comes with two special methods of the opera object—window.opera.defineMagicFunction() and window.opera.defineMagicVariable(). These allow you to override global functions and variables defined on a web page, which is especially useful when you want to…
The W3C file API
In Opera 11.10, partial support for the W3C File API makes its debut. This spec "provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data". For example, you can upload files into…
让你的网站在Opera快速拨号中发光发亮吧
一个用户如果把一个网站放进快速拨号中，通常，快速拨号会显示整个网站页面的缩略图。 可能大多数用户不以为然，但如果我是站长，一定会很不爽的，看下面这个多难看啊!
Haz brillar tu sitio en el Acceso Rápido de Opera
A partir de la versión 11.10, Opera para PC de escritorio permite a los desarrolladores de contenido controlar como lucirán sus sitios en el Acceso Rápido. Antes, por defecto, el Acceso Rápido utilizaba una captura de pantalla del sitio web, sin que este…
Penyempurnaan Speed Dial Opera
Pada versi 11.10, Opera untuk komputer desktop mengijinkan pembuat konten untuk mengontrol tampilan Panggil Cepat dari situs mereka. Secara default, Panggil Cepat atau yang terkenal dengan sebutan Speed Dial menggunakan tampilan dari website yang tampak pada…
Выделите свой сайт в Экспресс-панели
Настольная версия браузера Opera, начиная с версии 11.10, позволяет владельцам сайтов определять, как их сайт будет отображаться в миниатюрах Экспресс-панели. По-умолчанию, для отображения используется скриншот целой веб-страницы. Теперь появилась возможность…
Sitenizi Hızlı Erişim için İyileştirin!
11.10 ile birlikte, Opera'nın masaüstü sürümü sitelerin Hızlı Erişim'de nasıl görüntüleneceğini belirlemeye izin veriyor. Varsayılan olarak, Hızlı Erişim web sitenin ekran görüntüsünü kullanıyor. Ama artık site yöneticileri, özel bir ikon, Hızlı Erişim'e özel…
Hay cho phép trang web của bạn tỏa sáng trên Speed Dial
Với phiên bản 11.10, Opera cho máy tính để bàn cho phép người dùng có thể thỏa sức sáng tạo trong Speed Dial. Mặc định, Speed Dial sử dụng ảnh chụp màn hình của trang web. Nhưng bây giờ bạn có thể chỉ định một biểu tượng hoặc cung cấp CSS dành riêng cho Speed…
viewport メタタグと @viewport 規則
Opera のモバイル製品ではずいぶん昔から viewport メタタグをサポートしています。Opera Mobile 11 になって viewport 実装はより堅牢なものになり、また、異なる画面密度に対応する新しいメカニズムもサポートしました。さらには、私たちが提出した @viewport 規則の提案 もサポートしています。また、Opera Mini 6 でも、基本的な viewport メタタグのサポートが行われました。
Opera extensions: publishing guidelines
Figure 1: Overview of the publishing process - the developer creates an extension and submits it to the Opera extensions repository. The extension moderators then test the extension and publish it, or reject it and send it back to the developer to work on it…
An introduction to meta viewport and @viewport
Support for the viewport meta tag in Opera’s mobile products has been around for quite some time, and in Opera Mobile 11 we have made our viewport implementation more robust, added support for new mechanisms to deal with different screen densities, and…
Opera Mobile 11 for Maemo, MeeGo and Windows
Today we are launching final versions of Opera Mobile 11 for Android and Symbian/S60 as well as Mini 6 for various platforms. We are also making available builds of Opera Mobile 11 for Maemo, MeeGo and Windows here on labs.opera.com. The MeeGo and Windows…
Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL
To make applications run fully offline, we should make ourselves familiar with three very interesting technologies: The HTML5 Application Cache, Web Storage and WebSQL Databases.
Creating effective Opera Extension icons
This article provides a tutorial and some hints and tips on creating effective icons for your extensions. I've put the hints and tips at the beginning so you can easily refer back to them; the tutorial then follows.
CSS3 linear gradients
For as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs. If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go.
CSS3 Multi-column layout
Multiple column design that allows text to flow naturally from column to column depending on width and other parameters has proven invaluable in print design, crossing languages, cultures and a range of media. It will therefore come as no surprise to anyone…
Make your site shine in Speed Dial
As of version 11.10, Opera for desktop allows content creators to control how their site looks in Speed Dial. By default, Speed Dial uses a screen capture of the web site. But now site owners can specify an icon or serve Speed Dial-specific CSS or content.
Site blocking with Opera’s URL Filter API
Picture the scene: You come back home late, tired from a fun but exhausting night out and you decide to quickly check your preferred microblogging site. You don’t quite agree with one of the messages you read and decide to fire off a quick reply. When you…
Introducing WOFF (Web Open Font Format)
Opera's Håkon Wium Lie first publicized the idea of freely downloadable fonts, the idea being to give designers the freedom to choose fonts of their preference beyond the traditional "web safe font set". This formed the basis of Web Fonts.
WebGL and Hardware Acceleration
A long time ago, in an office far far away...Opera released a custom build showing an implementation of a 3D canvas context . Now, more than 3 years later, we are releasing the first public build with a standards-based 3D canvas implementation using WebGL for…
JavaScript array “extras” in detail
In this article we’ll look at the functionality made available by the new methods of array objects standardized in ECMA-262 5th edition (aka ES5). Most of the methods dicussed below are higher-order (we’ll clarify this term shortly below), and related to…
HTML 5 compliance: the next step
Making its debut in a Labs build this week is Ragnarök , our implementation of the HTML5 Parsing algorithm. We'd love you to try to break this and give us feedback, so please grab a copy to install on your machine from one of the download links below.
Simple HTML5 video player with Flash fallback and custom controls
Article adapted from original published in .net magazine July 2010 issue. Thanks to Dan Oliver and team!
Come funziona Internet
Raramente vi viene offerta la possibilità di dare un'occhiata al "dietro le quinte", agli ingranaggi e meccanismi che muovono l'azione. Oggi è il vostro giorno fortunato! Vi farò entrare nel dietro le quinte di una delle più eccitanti tecnologie, con la quale…
Widget runtime: WAC-1.0-compliant Golden for Android
It’s been a long trip, but we’ve finally arrived – today our lasting intensive work on a WAC-1.0-compliant runtime is finished, and we are proudly presenting the final Golden build that we are also demonstrating at the Mobile World Congress event! All WAC 1.0…
Opera Mini: web content authoring guidelines
This document has two purposes: first, it aims to outline a broad view of the state of mobile browsing and its unique constraints and restrictions, and second, it details the things you should be aware of when designing web pages with Opera Mini in mind.
Getting started with OperaWatir
The Watir API allows us to write Ruby scripts that interact with any web page, automatically going through all the steps users would normally take and alerting us to any problems quickly. This makes testing much quicker and easier.
Widget Runtime: WAC 1.0-supporting Beta 2 for Android
Today we are rolling out the next bugfix release of our Android widget runtime with WAC 1.0 APIs support. Many bugs were fixed since the previous release; please refer to release notes for more details.
Widgets Runtime: WAC 1.0-supporting Beta for Android
Hi, guys! Happy New Year! We are pleased to start it with the Beta release of our WAC 1.0-supporting runtime for Android.
Get familiar with HTML5!
Most of the web standards curriculum is based on the last stable version of HTML — HTML 4.01. The HTML 4.01 spec was completed in 1999, over 10 years ago as of the time of this writing! But unless you've been hiding under a rock for the last year or so,…
The CSS3 object-fit and object-position properties
A common problem in CSS concerns how to control the aspect ratio of replaced elements, such as <img> or <video>. For example, you might want to have all images occupy the same space on a page, but not distort and lose their aspect ratio when someone uses an…