SlideShare a Scribd company logo
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the
Open Web platform




                    Photo by takomabibelot CC BY license
                    http://www.flickr.com/photos/takomabibelot/473812157/
a bit of browser history
In 1980s, early 1990s:
very early browsers
1991:
WorldWideWeb
1993:
Mosaic
Mosaic is the celebrated graphical
“browser” that allows users to travel
through the world of electronic
information using a point-and-click
interface.
                   — Wired, October 1994
1994:
Netscape Navigator
1995:
Internet Explorer
1994:
1994:
MultiTorg Opera
1994:
MultiTorg Opera
1994:
MultiTorg Opera
1996:
Opera
Opera and the Open Web platform
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 everywhere
The 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 Meyer
http://meyerweb.com/eric/browsers/timeline-structured.html
Desktop browsers
Opera 10.5x
Internet Explorer 8
Firefox 3.6
Safari 4
& Google Chrome 4.1
http://gs.statcounter.com/
http://people.opera.com/dstorey/images/OperaMarketShareEEhover.svgz
Full mobile browsers
Opera Mini 5
Opera Mobile 10
Safari for iPhone
Android browser
Firefox for Mobile
Nokia browser
& others
http://gs.statcounter.com/
Opera Mini
Opera and the Open Web platform
Opera and the Open Web platform
Photo by lrargerich CC BY license
http://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
Opera and the Open Web platform
Opera and the Open Web platform
“... 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-radius
border-image
background-attachment
   background-size
text-shadow
box-shadow
text-shadow
box-shadow
text-shadow
border-shadow
transformations
   transitions
Making sites
mobile-friendly


      Photo by bossone CC BY-NC-SA license
      http://www.flickr.com/photos/bossone/3922552664/
Opera Mobile   Opera Mini
+
                            Safari for iPhone
                            Android browser
                            Firefox for Mobile
                            Nokia browser
                            etc.




Opera Mobile   Opera Mini
3 approaches
(1)

Do nothing and let the mobile
  browser handle your site
Opera and the Open Web platform
(2)

Create a separate mobile site
     e.g. m.mysite.com
(2)

Create a separate mobile site
     e.g. m.mysite.com

Caveats:
- browser sniffing
- reduced functionality
(3)

   Create a site that uses
  capability detection and
flexible layout techniques,
automatically adjusting to
browsers and screen sizes
viewport meta




      Photo by code poet, CC BY-NC-SA license
      http://www.flickr.com/photos/alphageek/1273563924/
Opera and the Open Web platform
Opera and the Open Web platform
Opera and the Open Web platform
<meta name="viewport" content="width=320">


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


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




Photo by robpatrick, CC BY-NC-SA license
http://www.flickr.com/photos/alkalinezoo/32265389/
media queries
@media screen and (max-width: 320px) {
    #block {float: left;}
}

@media screen and (max-width: 240px) {
    #block {display: none;}
}
media queries to viewport width
        refers
@media screen and (max-width: 320px) {
    #block {float: left;}
}

@media screen and (max-width: 240px) {
    #block {display: none;}
}
Opera and the Open Web platform
Opera and the Open Web platform

More Related Content

What's hot (11)

ODP
Running Android Apps on Chrome & ChromeOS
msz
 
PDF
HTML5 and friends - standards>next Manchester 24.11.2010
Patrick Lauke
 
PPTX
Frontend State of the union
Filip Bruun Bech-Larsen
 
PDF
Pinkoi Mobile Web
mikeleeme
 
PDF
Bruce Lawson Opera Indonesia
brucelawson
 
PDF
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
 
PDF
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
PDF
Browser Performance Tests - Internet Explorer 11 vs Firefox 25 vs Google Chro...
MIDAS
 
PDF
The Modern Web
Matthew W. Bowers
 
PDF
Building a Next Generation Mobile Browser using Web technologies
n_adam_stanley
 
PDF
FEDM Meetup: Introducing Mojito
Caridy Patino
 
Running Android Apps on Chrome & ChromeOS
msz
 
HTML5 and friends - standards>next Manchester 24.11.2010
Patrick Lauke
 
Frontend State of the union
Filip Bruun Bech-Larsen
 
Pinkoi Mobile Web
mikeleeme
 
Bruce Lawson Opera Indonesia
brucelawson
 
Adaptive layouts - standards>next Manchester 23.03.2011
Patrick Lauke
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
Browser Performance Tests - Internet Explorer 11 vs Firefox 25 vs Google Chro...
MIDAS
 
The Modern Web
Matthew W. Bowers
 
Building a Next Generation Mobile Browser using Web technologies
n_adam_stanley
 
FEDM Meetup: Introducing Mojito
Caridy Patino
 

Similar to Opera and the Open Web platform (20)

PDF
Bruce lawson-over-the-air
brucelawson
 
PDF
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
PDF
Transmission2 25.11.2009
Patrick Lauke
 
KEY
Optimizing content for the "mobile web"
Chris Mills
 
PDF
Is the mobile web enabled or disabled by design?
Henny Swan
 
PDF
Webtech 17.11.2009
Patrick Lauke
 
PDF
XTech May 2008
Michael(tm) Smith
 
PDF
Bruce lawson Stockholm Geek Meet
brucelawson
 
PDF
Flourish2011
Mark Meeker
 
PDF
Universal access across devices
Henny Swan
 
PDF
Uni Tour Germany 11.2009
Patrick Lauke
 
PDF
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah
 
KEY
Browser War 2: Standards strikes back
Zi Bin Cheah
 
PDF
An Intro to Mobile HTML5
James Pearce
 
PDF
State of the Mobile Browsers
Peter-Paul Koch
 
PPTX
Web browsers
jahnvi tanwar
 
ODP
Cross Device Accessibility
Chris Mills
 
PDF
Html5 Architecture Early Release Wesley Hales
onyemaolaza
 
PPTX
[Vietnam Mobile Day 2014] Touch the future of the web - Nguyễn Việt Anh - Cou...
AiTi Education
 
PPTX
[Vietnam Mobile Day 2014] Touch the future of the web - Nguyễn Việt Anh – Cou...
AiTi Education
 
Bruce lawson-over-the-air
brucelawson
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
Transmission2 25.11.2009
Patrick Lauke
 
Optimizing content for the "mobile web"
Chris Mills
 
Is the mobile web enabled or disabled by design?
Henny Swan
 
Webtech 17.11.2009
Patrick Lauke
 
XTech May 2008
Michael(tm) Smith
 
Bruce lawson Stockholm Geek Meet
brucelawson
 
Flourish2011
Mark Meeker
 
Universal access across devices
Henny Swan
 
Uni Tour Germany 11.2009
Patrick Lauke
 
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah
 
Browser War 2: Standards strikes back
Zi Bin Cheah
 
An Intro to Mobile HTML5
James Pearce
 
State of the Mobile Browsers
Peter-Paul Koch
 
Web browsers
jahnvi tanwar
 
Cross Device Accessibility
Chris Mills
 
Html5 Architecture Early Release Wesley Hales
onyemaolaza
 
[Vietnam Mobile Day 2014] Touch the future of the web - Nguyễn Việt Anh - Cou...
AiTi Education
 
[Vietnam Mobile Day 2014] Touch the future of the web - Nguyễn Việt Anh – Cou...
AiTi Education
 
Ad

More from Andreas Bovens (9)

PPTX
Progressive Web Apps: Opera's perspective
Andreas Bovens
 
PDF
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
PDF
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
PDF
Fast & Furious: Speed in the Opera browser
Andreas Bovens
 
PDF
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
Andreas Bovens
 
PDF
Building rich apps with HTML5 and friends
Andreas Bovens
 
KEY
SVG in the Opera browser
Andreas Bovens
 
PDF
Mobile web development techniques (and Opera's developer tools)
Andreas Bovens
 
PDF
Opera Widgets for Desktop and Opera Dragonfly
Andreas Bovens
 
Progressive Web Apps: Opera's perspective
Andreas Bovens
 
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
Fast & Furious: Speed in the Opera browser
Andreas Bovens
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
Andreas Bovens
 
Building rich apps with HTML5 and friends
Andreas Bovens
 
SVG in the Opera browser
Andreas Bovens
 
Mobile web development techniques (and Opera's developer tools)
Andreas Bovens
 
Opera Widgets for Desktop and Opera Dragonfly
Andreas Bovens
 
Ad

Recently uploaded (20)

PPTX
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
IoT-Powered Industrial Transformation – Smart Manufacturing to Connected Heal...
Rejig Digital
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 

Opera and the Open Web platform