34
Making the Web open for everyone Open the Web Cheah Zi Bin

Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility Drawing API. OpenWeb platform

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Making the Web open for everyoneOpen the WebCheah Zi Bin

Page 2: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

BioWeb Evangelist at Opera Software

OpenTheWeb initiative

Page 3: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

WWW

Page 4: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

VInternet Explorer Web Netscape Web

1990s Browser Wars

Internet Explorer Wins!!!

Feature over bugsFeature over standards

Page 5: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

VClosed Web Open Web

Browser Wars 2Internet Explorer Wins!!!

Standards strike back

Page 6: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

The Web is Open

Battle Royale

VClosed

platforms

OpenWeb

Page 7: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Open the Web

Phot

o co

urte

sy o

f Kha

kbaz

of F

lickr

Page 8: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Value of Open Standards

Page 9: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Cross everythingBrowser

Device

Platform

Page 10: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Write once, deliver everywhere

Page 11: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Build to standards,adapt for legacy browsers

Page 12: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Reduce costs, bandwidth, time to market & maintenance

Page 13: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

All sites must work

Page 14: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.

”– Sir Tim Berners-Lee

Page 15: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

oops…

Page 16: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Double oops…

Page 17: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

The OpenWebplatform

Page 18: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

OpenWeb stack

SVG Vector Graphics

PNG/JPG/GIF… Raster Graphics

? [OGG?/ VMS?/Dirac?] Audio & VideoSMIL

Sycronisation

Med

ia

DOM Document API

JavaScript ScriptingBe

havi

our

CSS Style sheets

Pres

enta

tion

XML

XHTML/HTML Markup

RDFa Semantics

ARIA AccessibilitySt

ruct

ure

<canvas> Drawing API

Page 19: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

OpenWeb platform

Strong branding Vs no branding

Cohesive Vs loose

Tailored tools Vs basic tools

Fast to spec Vs slow to spec

…but no vendor lock-in and pro-user/developer choice

Challenges

Page 20: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Ope

n W

eb

Op

en W

ebO

pen

Web

Open

Web

Open Web

Open Web

Open WebOpen Web

Demo Op

en W

eb

Page 21: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Why do sites break?

Page 22: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Case study: S.Korea

Page 23: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

(Almost) every bank in South Korea only works in Internet Explorer

Page 24: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Why?US government ban on encryption export

Created ActiveX based solution

Result: IE monopoly

Sites fall foul of IE bugs and don’t follow standards

Officially supported CA only works with ActiveX

Page 25: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Case study: India

Page 26: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Many government & sites show garbled text in non-IE browser

Page 27: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Why?Popular platforms were not Unicode aware

Unable to show text in Indian scripts

Used EOT embedded fonts

EOT only works in IE and Windows

Unicode support now common, but sites are not updated

Page 28: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Phot

o co

urte

sy o

f Maj

iscu

p -

Dri

nk fo

r D

esig

n of

Flic

kr

Case study: The Rest

Page 29: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

yahoo.commicrosoft.commsn.comapple.comlast.fmwordpress.comadobe.comikea.comtypepad.com

Page 30: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

We work with Web Developers and site owners to ensure sites work in Opera and other standards-aware browsers.

Page 31: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

How do we do it?

Contact sites when issue occurs

Help developers when they have an issue

Evangelism and outreach

Page 32: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

Success

Page 33: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

How you can help

Develop to standards, not IE

Report issues you find

Spread the word

Page 34: Open the Web - Dev.Opera · JavaScript viour Scripting CSS esentation Style sheets XML XHTML/HTML Markup RDFa Semantics ARIA e Accessibility  Drawing API. OpenWeb platform

[email protected]: zibinwww.opera.com/developerzibin.tehais.com

Credits: David Storey & Bruce Lawson