0
Opera and the
Open Web platform




                    Photo by takomabibelot CC BY license
                    http://ww...
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...
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 result...
Open vs Closed Standards

Open Standards are made by the
World Wide Web Consortium (W3C) in
public, through debate & discu...
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
& oth...
http://gs.statcounter.com/
Opera Mini
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
- u...
Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- u...
Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- u...
Strong competition, lots of players:
- standards implementation race
- performance race
- convergence desktop & mobile
- u...
HTML5
“... extending the language to better support Web
applications, since that is one of the directions the Web
is going in an...
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>
<...
<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/392255...
Opera Mobile   Opera Mini
+
                            Safari for iPhone
                            Android browser
                            Fi...
3 approaches
(1)

Do nothing and let the mobile
  browser handle your site
(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...
viewport meta




      Photo by code poet, CC BY-NC-SA license
      http://www.flickr.com/photos/alphageek/1273563924/
<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) {
 ...
media queries to viewport width
        refers
@media screen and (max-width: 320px) {
    #block {float: left;}
}

@media ...
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
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
Opera and the Open Web platform
Opera and the Open Web platform
Upcoming SlideShare
Loading in...5
×

Opera and the Open Web platform

1,758

Published on

Presentation for university students in Oslo. See http://my.opera.com/universitytours/blog/2010/04/22/the-university-tours-come-to-us for details

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,758
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Opera and the Open Web platform"

  1. 1. Opera and the Open Web platform Photo by takomabibelot CC BY license http://www.flickr.com/photos/takomabibelot/473812157/
  2. 2. a bit of browser history
  3. 3. In 1980s, early 1990s: very early browsers
  4. 4. 1991: WorldWideWeb
  5. 5. 1993: Mosaic
  6. 6. 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
  7. 7. 1994: Netscape Navigator
  8. 8. 1995: Internet Explorer
  9. 9. 1994:
  10. 10. 1994: MultiTorg Opera
  11. 11. 1994: MultiTorg Opera
  12. 12. 1994: MultiTorg Opera
  13. 13. 1996: Opera
  14. 14. HTML, XHTML, XML, CSS, SVG, PNG,... standards
  15. 15. What are Web Standards? Standards are rules and methodologies that make building things easier. And the results better.
  16. 16. 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.
  17. 17. Importance of Open Standards The Web works everywhere The Web is the platform
  18. 18. HTML, XHTML, XML, CSS, SVG, PNG,... standards
  19. 19. Dominant players in late 1990s: Internet Explorer and Netscape
  20. 20. Strong competition & introduction of new, often non-standard features <font>, <marquee>, <blink>
  21. 21. Around the same time: early experiments with mobile web non-standard HDML, WML, cHTML...
  22. 22. 2000s
  23. 23. Internet Explorer wins the first browser war
  24. 24. Graph by Eric Meyer http://meyerweb.com/eric/browsers/timeline-structured.html
  25. 25. Desktop browsers Opera 10.5x Internet Explorer 8 Firefox 3.6 Safari 4 & Google Chrome 4.1
  26. 26. http://gs.statcounter.com/
  27. 27. http://people.opera.com/dstorey/images/OperaMarketShareEEhover.svgz
  28. 28. Full mobile browsers Opera Mini 5 Opera Mobile 10 Safari for iPhone Android browser Firefox for Mobile Nokia browser & others
  29. 29. http://gs.statcounter.com/
  30. 30. Opera Mini
  31. 31. Photo by lrargerich CC BY license http://www.flickr.com/photos/lrargerich/3125605370/
  32. 32. Strong competition, lots of players: - standards implementation race - performance race - convergence desktop & mobile - user experience enhancements
  33. 33. Strong competition, lots of players: - standards implementation race - performance race - convergence desktop & mobile - user experience enhancements Sputnik JavaScript conformance test
  34. 34. Strong competition, lots of players: - standards implementation race - performance race - convergence desktop & mobile - user experience enhancements Peacekeeper benchmark
  35. 35. Strong competition, lots of players: - standards implementation race - performance race - convergence desktop & mobile - user experience enhancements
  36. 36. HTML5
  37. 37. “... 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
  38. 38. More semantics for structure
  39. 39. HTML5 forms (WebForms 2)
  40. 40. <canvas>
  41. 41. <video>
  42. 42. <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>
  43. 43. <video src=”video.ogg”>
  44. 44. Web Storage
  45. 45. CSS3
  46. 46. Web Fonts (@font-face)
  47. 47. border-radius border-image
  48. 48. background-attachment background-size
  49. 49. text-shadow box-shadow
  50. 50. text-shadow box-shadow
  51. 51. text-shadow border-shadow
  52. 52. transformations transitions
  53. 53. Making sites mobile-friendly Photo by bossone CC BY-NC-SA license http://www.flickr.com/photos/bossone/3922552664/
  54. 54. Opera Mobile Opera Mini
  55. 55. + Safari for iPhone Android browser Firefox for Mobile Nokia browser etc. Opera Mobile Opera Mini
  56. 56. 3 approaches
  57. 57. (1) Do nothing and let the mobile browser handle your site
  58. 58. (2) Create a separate mobile site e.g. m.mysite.com
  59. 59. (2) Create a separate mobile site e.g. m.mysite.com Caveats: - browser sniffing - reduced functionality
  60. 60. (3) Create a site that uses capability detection and flexible layout techniques, automatically adjusting to browsers and screen sizes
  61. 61. viewport meta Photo by code poet, CC BY-NC-SA license http://www.flickr.com/photos/alphageek/1273563924/
  62. 62. <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
  63. 63. <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
  64. 64. media queries Photo by robpatrick, CC BY-NC-SA license http://www.flickr.com/photos/alkalinezoo/32265389/
  65. 65. media queries @media screen and (max-width: 320px) { #block {float: left;} } @media screen and (max-width: 240px) { #block {display: none;} }
  66. 66. media queries to viewport width refers @media screen and (max-width: 320px) { #block {float: left;} } @media screen and (max-width: 240px) { #block {display: none;} }
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×