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!
posted by Richard Senior at 10:38 AM
0 comments
