opera and the open web platform
DESCRIPTION
Presentation for university students in Oslo. See http://my.opera.com/universitytours/blog/2010/04/22/the-university-tours-come-to-us for detailsTRANSCRIPT
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