Opera and the Open Web platform

Photo by takomabibelot CC BY licensehttp://www.flickr.com/photos/takomabibelot/473812157/

a bit of browser history

In 1980s, early 1990s:very early browsers

1991:WorldWideWeb

1993:Mosaic

— Wired, October 1994

Mosaic is the celebrated graphical “browser” that allows users to travel through the world of electronic information using a point-and-click interface.

1994:Netscape Navigator

1995:Internet Explorer

1994:

1994:MultiTorg Opera

1994:MultiTorg Opera

1994:MultiTorg Opera

1996:Opera

HTML, XHTML, XML, CSS, SVG, PNG,... standards

What are Web Standards?

Standards are rules and methodologies that make building things easier.

And the results better.

Open vs Closed Standards

Open Standards are made by the World Wide Web Consortium (W3C) in public, through debate & discussion, leading to agreement.

Closed Standards are made by a single company, in secret, according to the business needs of that company.

Importance of Open Standards

The Web works everywhereThe Web is the platform

HTML, XHTML, XML, CSS, SVG, PNG,... standards

Dominant players in late 1990s:Internet Explorer and Netscape

Strong competition & introduction of new, often non-standard features

<font>, <marquee>, <blink>

Around the same time:early experiments with mobile web

non-standard HDML, WML, cHTML...

2000s

Internet Explorer wins the first browser war

Graph by Eric Meyerhttp://meyerweb.com/eric/browsers/timeline-structured.html

Opera 10.5xInternet Explorer 8Firefox 3.6Safari 4& Google Chrome 4.1

Desktop browsers

http://gs.statcounter.com/

http://people.opera.com/dstorey/images/OperaMarketShareEEhover.svgz

Opera Mini 5Opera Mobile 10Safari for iPhoneAndroid browserFirefox for MobileNokia browser & others

Full mobile browsers

http://gs.statcounter.com/

Opera Mini

Photo by lrargerich CC BY licensehttp://www.flickr.com/photos/lrargerich/3125605370/

Strong competition, lots of players:- standards implementation race- performance race- convergence desktop & mobile- user experience enhancements

Strong competition, lots of players:- standards implementation race- performance race- convergence desktop & mobile- user experience enhancements

Sputnik JavaScript conformance test

Strong competition, lots of players:- standards implementation race- performance race- convergence desktop & mobile- user experience enhancements

Peacekeeper benchmark

Strong competition, lots of players:- standards implementation race- performance race- convergence desktop & mobile- user experience enhancements

HTML5

“... extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far.

This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.”

Ian Hickson, HTML5 editor

More semantics for structure

HTML5 forms (WebForms 2)

<canvas>

<video>

<object width="425" height="344"><param name="movie" value="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"allowfullscreen="true" width="425" height="344"></embed></object>

<video src=”video.ogg”>

Web Storage

CSS3

Web Fonts (@font-face)

border-radiusborder-image

background-attachmentbackground-size

text-shadowbox-shadow

text-shadowbox-shadow

text-shadowborder-shadow

transformationstransitions

Making sites mobile-friendly

Photo by bossone CC BY-NC-SA licensehttp://www.flickr.com/photos/bossone/3922552664/

Opera MiniOpera Mobile

Opera MiniOpera Mobile

+Safari for iPhoneAndroid browserFirefox for MobileNokia browser etc.

3 approaches

Do nothing and let the mobile browser handle your site

(1)

Create a separate mobile sitee.g. m.mysite.com

(2)

Create a separate mobile sitee.g. m.mysite.com

(2)

Caveats: - browser sniffing- reduced functionality

Create a site that uses capability detection and

flexible layout techniques, automatically adjusting to browsers and screen sizes

(3)

viewport meta

Photo by code poet, CC BY-NC-SA licensehttp://www.flickr.com/photos/alphageek/1273563924/

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=320">

media queries

Photo by robpatrick, CC BY-NC-SA licensehttp://www.flickr.com/photos/alkalinezoo/32265389/

@media screen and (max-width: 320px) { #block {float: left;}}

@media screen and (max-width: 240px) { #block {display: none;}}

media queries

media queries

@media screen and (max-width: 320px) { #block {float: left;}}

@media screen and (max-width: 240px) { #block {display: none;}}

refers to viewport width