Shwetank Dixit

Opera University Tour - India, 2009

View with Opera!

The Open Web

Making the Web open for everyone

By Shwetank Dixit

About Me

SVG - Scalable Vector Graphics

  • XML based format from W3C
  • Available through plugins since many years
  • Opera first web browser to natively support it. Now all major browsers do (except one)
  • Allows vector graphics on the web. Can be scaled without degrading quality.

SVG - Scalable Vector Graphics

  • Idea is for graphics to have the same quality across all browsers and devices
  • Supported on a wide variety of mobile phones as well
  • All Nokia Series 60 and some Series 40 phones. Sony Ericcsons phones K700 series phones
  • Motorola, Samsung, LG and other phones have support as well

HTML5: <canvas>

  • Dynamic graphics using scripting (usually JavaScript)
  • First implemented by Apple
  • Now in most browsers
  • Faster than SVG, but harder to write
  • Not XML based, but rather part of HTML5.
  • Canvas Demo

Canvas

<canvas width="150" height="200" id="demo">
 <!-- Still using Internet Explorer? -->
</canvas>

<script>
 var canvas = document.getElementById("demo"),
     context = canvas.getContext("2d")
 context.fillStyle = "lime"
 context.fillRect(0, 0, 150, 200)
</script>

Canvas 3D

Canvas not supported!

The future

  • YOU can help define it!
  • Get active on the HTML5 public mailing lists and offer your suggestions
  • Start helping the web by coding properly and removing barriers.

"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

Oops

Cross everything - Browser, Platform, Device

Cross Browser

Cross Plattform

Cross Device

Write once, deliver everywhere

Question...

Why do sites break?

Case Study - Korea

Case Study: Korea

  • It began in 1998, when it did not wait for SSL to be standardized (SSL later became standardized in 1999)
  • Commissioned an ActiveX control for secure web transactions
  • ActiveX only works with Internet Explorer (and now, kinda through Firefox)
  • This meant anyone on Mac or Linux could not use Bank and E-Commerce sites
  • Almost all sites designed to just work in Internet Explorer, and break in some way or another other browsers
  • Also, when vista was released, it introduced tighter restrictions on ActiveX, which lead many sites failing in it
  • Such a big problem, that the government advised citizens not to install Vista

Build to standards, and adapt for legacy browsers.

Question...

How are sites inaccessible?

Case Study - India

WCAG 2.0 Guidline section 4.1

  • Maximize compatibility with current and future user agents, including assistive technologies

Indian sites: Common pitfalls

best viewed in
  • Browser Sniffing
  • Designing for only IE, or at most netscape(!)
  • Ignoring people who use other browsers or operating systems
  • 'Best viewed with...' message
  • Common examples: BSNL, Indian Railways

WCAG 2.0 Guidline section 3.1

  • Make text content readable and understandable

Indian sites: Common pitfalls

Embedded Open Type
  • Fonts with regional websites
  • many use EOT, which only works with IE
  • Some regional sites actually have image files in which they have written in regional fonts!
  • Slowly sites are changing though, and many have switched to UTF-8 (Kudos Aajtak.com!)
  • Example: Nava Bharat Times, Rajasthan Patrika

Other points

  • 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
  • 2.2 Enough Time: Provide users enough time to read and use content
  • 2.3 Do not design content in a way that is known to cause seizures

Indian sites: Common pitfalls

Rediff.com with almost 1600 errors
  • Paying only lip service to XHTML. (Reddif.com had almost 1600 errors. Claims to be XHTML 1.0 Transitional)
  • Lack of textual description of non-textual data (For example ALT text)
  • Marquees are less common. Older sites still have them though
  • Lack of maturity and respect for end user: Excessive popups and intrusive ads, including vigorously blinking ones
  • Common example: Almost every major indian portal! For marquess: Almost every major indian government site. We did find one pausable marquee at the DRDO website though. Yay!

Test on engines, not browsers

Browser Layout Engines

  • Presto: Opera Desktop, Opera Mini, Opera Mobile, Nintendo DSi, Wii Internet Channel
  • Trident: Internet Explorer, Maxthon, Avant Browser
  • Gecko: Mozilla Firefox, Flock, K-Meleon, Camino, Seamonkey
  • Webkit/KHTML: Apple Safari, Google Chrome, Epiphany

Where to learn more?

Web Standards Curricullum

Opera Web Standards Curriculum

  • In collaboration with Yahoo!
  • A whole curriculum detailing the right way to code on the web
  • Each chapter written by an industry stalwart
  • Licensed under creative commons, so any university can use it in their own course
  • Available at opera.com/wsc

All sites must work, no matter the browser, device or platform.

Shwetank Dixit

  • shwetankdixit.com
  • my.opera.com/shwetankdixit
  • twitter.com/shwetank

Cheers!