One Web Acid2 and CSS3 by Hakon Wium Lie

CTO, Opera Software

howcome AT opera.com

First Part - One Web

WAP being an example of bad practice. The web should evolve.

Opera Web Devices

Started in 1995. Opera for Desktop for Windows. Then in 2000 Opera for Mobile - good for Opera. Opera for Devices - in the past 12 months.

Example is the Wii. Opera is the default Wii browser. A sharing experience, changing the web. One code base for all devices.

The $100 dollar laptop. Cheap machine, not for public. Think less, less, less, so a child can use it. Small keys for kids. Opera is perfect for it.

Similar to the Wii, no hardrive, wi-fi, mesh networking.
Foundation - One laptop per child.

mini.opera.com - mini is different. Small java app, abou 100k. Proxy server fetches data, compresses it to binary. Opera mini enables good surfing app. Free.

specifications

HTML5

• WHAT WG and W3C
• the

CSS

• CSS 2.1
• CSS3 Values and Unites
• CSS3 page units

Video on the web today

Obscure video coding. Video should be made a first class web citizen.

2 problems:

part 1 - the markup ie

part2 - video format

Right way of encoding. Most video formats are proprietory. Open standard for video.

Ogg Theora video is open format - similar to png, used by wiki.

Ogg Theora

Cousin of Ogg Vorbis from xiph.org generator - ffmpeg2theora

CSS

CSS 10 years old. Hakon worked with Tim Berners Lee at SERN. Hakon proposed CSS.

shows css zen garden as an example.

CSS3

CSS3 has been split into 30 modules. Work in progress.

Media Queries

Handheld modes is an example of a media query. Media Types include presentation mode - projector.

@media handheld and (max-width; 300px)

Multi column Layout

True multi column layout. - Mozilla implememnted it now. Scales images and adds columns depending on the size of the screen.

CSS3 Multi column Layout

define number and width of columns

body {
column-width: 14em;
column-count: 3
columns

Great for CSS for professional printing.

CSS3 Paged Media - crop marks, multi columns, footnotes, floating elements such as images to the bottom of a page

example

Headers and Footers

title { string-set: header content }
@page

Page Floats
div.figure { float: bottom page }

Cascading Style Sheets - Designing for the web - third edition. Used html and css to print the actual book. Using printsxml

A book microformat - boom!

• set of class names:
• titlepage
• table of contents
• preface
• chapter
• appendix

semantics - borrows names from DocBook.

Web fonts

Hopefully in the next 12 months... could be wrong...

Microsoft's core fonts

Andale Mono Arial Comic Sans MS Courier New Georgia

web fonts introduced css2 in 1998. Supported by Microsoft and Netscape.
No support for truetype

i.e.
@ import url (http://www.

Acid2

Acid2 was made to show if IE was valid or not. Acid1 tested for box model. Safari was first to get it right. Firfox 3 will pass Acid2 in 07. Microsoft IE7 still does not pass the Acid2 test.

Web Applications

Use web standards for web applications - contrary to Jeremys presentation! Opera have developed Opera Widgets. Almost 1000 widgets available.

Google Gears

A API framwork for javascript, adding sql database to the browser. Store data off and online. Off-line access to web pages. More robust operations!