HTML5 och Webbläsare

Simon Pieters

simonp@opera.com

2009-04-23

Om mig

Webbdesign gymnasiet

Självstudier: forum, bloggar, artiklar

WHATWG 2005

W3C HTML WG 2007

Sommarjobb Opera 2007

Anställning Opera 2007

Vad är Opera?

Företag som utvecklar webbläsare

Kontor i Oslo, Linköping, Göteborg, Stockholm, USA, Korea, Kina, Polen...

Ungefär 80 anställda i Linköping

Varar 3 är från Linköping

Webbläsare för desktop, mobiler, devices (Wii)

Opera Mini — Proxy som komprimerar innehållet

Core

Core utvecklar det som är gemensamt för alla produkter

Renderingsmotorn — Presto

Om mitt jobb på Opera

Quality assurance

Specifikationer

Quality assurance (QA)

Användare hittar en sida som inte fungerar

Användare rapporterar en bugg

Kollega tittar på buggen

Jag analyserar buggen (felsökning)

Försöker minimera sidan för att hitta problemet

Ev. använder debuggningsverktyg (Dragonfly)

Quality assurance (QA)

Skapar en minimal sida som reproducerar problemet

Skickar vidare buggen till utvecklare

Utvecklare fixar buggen

QA testar igen för att verifiera

Testfallet läggs in i regressionstestningssystem

Fel i specen

Om sidan inte fungerar för att specen är fel

Jag hittar den del av relevant specen som är fel

Jag skickar ett mail till arbetsgruppen

Specen ändras (förhoppningsvis)

Viktig sida

Om sidan är väldigt viktig (tex facebook)

Kollega kontaktar sidans admin och föreslår ändringar

Om sidans admin inte vill ändra applicerar vi browser.js

Standarder

Följer ett antal mailinglistor

Följer ändringar av olika specar

Föreslår ändringar till olika specar

Skriver testsvit mot specen

HTML5 historik

1998: W3C sätter fokus på XHTML

1999: W3C slutar underhålla HTML

2001: XHTML2, XForms

2003: Opera börjar arbete på Web Forms 2.0

2004: W3C röstar ner webbläsare vid workshop

2004: WHATWG grundas: Opera, Mozilla, Apple

2007: HTML WG grundas för att sammarbeta med WHATWG

HTML5 framtid

2009: Specen förväntas vara komplett

2012: Candidate recommendataion

2012+: Testsvit skrivs, webbläsare fixar buggar

2022: Testsvit komplett, två oberoende webbläsare utan buggar

Vad är HTML 5?

Ny version av HTML 4.01, XHTML 1.0, DOM2 HTML

Skillnader mellan HTML 4.01 och HTML 5

Doctype

HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5: <!DOCTYPE HTML>

Enkodningsdeklaration

HTML4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5: <meta charset="utf-8">

Strukturelement

HTML4: <div class="main"> <div class="sidebar"> <div class="footer">

HTML5: <article> <aside> <footer>

Video

HTML4: ... Flash?

HTML5: <video src="video.ogg"></video>

<input type>

HTML4: "hidden", "text", "password", "checkbox", "radio", "file", "submit", "image", "reset", "button",

HTML5: "search", "email", "url", "datetime", "date", "month", "week", "time", "datetime-local", "number", "range", "color"

<canvas>

Rita i 2d med javascript

Används för spel, grafer, effekter...

Exempel: wolfenstein

3d-canvas är på gång (kanske Open GL ES)

HTML parser

En ström med bytes skickas över nätverket

Parsern tolkar dem och bygger upp ett DOM-träd

Olika webbläsare bygger trädet olika

HTML5 säger hur trädet ska byggas

DOM-träd

Över nätverket skickas:

<!DOCTYPE HTML>
<title>Hej</title><p>Test</p>

DOM-trädet:

Skillnader mellan webbläsare

Exempel 1: div i b

Exempel 2: missplacerad text i tabell

Internet Explorer

DOM:en är inte ett träd

En nod kan ha flera föräldrar

caption-liknande element utan namn

Opera

DOM-trädet och renderingen är olika

caption-liknande anonyma boxar i tabeller

Mozilla/WebKit/HTML5

Bygger om trädet medan det tolkas

Element klonas och flyttas runt

Hur renderas det?

CSS-regler tolkas

p { color: green; border:solid }

selektor { deklaration; deklaration }

Varje element i trädet jämförs med varje selektor

Om det matchar används deklarationerna

Renderingsträd

'display' används för att bygga upp renderingsträdet

Element som har display:none (tex head) finns inte med i renderingsträdet

Exempel

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Hello <em>World</em></p>
</body>
</html>

SVG, MathML

Vektorgrafik, matematik

<p>En cirkel: <svg> <circle ... /> </svg> </p>

<p>En ekvation: <math> <mi>a</mi> <mo>=</mo> ... </math> </p>