Over Webstandaarden Enzo

Fronteers @ e-sites — Januari 2009

`querySelector()` & `querySelectorAll()`

Geen getElementsBySelector(), want querySelector() is niet live.

var sweet = document.
  querySelectorAll
  ("div > p.sweet")

var cool = document.
  querySelector
  ("#cool, #cooler")

Ondersteund in Opera 10, Internet Explorer 8, Firefox 3.1, en Safari 4.

Ook ondersteund in JavaScript libraries (jQuery, Prototype).

Cross-Origin `XMLHttpRequest`

Wat is same origin?
origin 1	origin 2	same origin
`http://example.org`	`http://example.org:80`	ja
`http://example.org`	`https://example.org`	nee
`http://example.org:80`	`http://example.org:81`	nee
`http://example.org`	`http://www.example.org`	nee

(Tabellen zijn dus daarvoor bedoeld. Zie ook shouldiusetablesforlayout.com. Flauw.)

XMLHttpRequest heeft een same origin restrictie in Web browsers.

Waarom Cross-Origin?

Geen twitter.com script dat code uitvoert in jouw pagina.

Uitwisselen van data tussen bijvoorbeeld gmail.com en facebook.com zonder het delen van user credentials.

Hoe dan?

Nog niet (sorry), maar in de nabije toekomst kun je er wel mee spelen (Firefox 3.1, Safari 4, …).

Client-side APIs zijn hetzelfde: XMLHttpRequest, @font-face, …

Server-side moet er wat veranderen. Details verschillen tussen safe (e.g. GET) en unsafe (e.g. DELETE) requests.

Safe: Request bevat Origin header. Response moet Access-Control-Allow-Origin header bevatten.

Unsafe: Preflight request, anders hetzelfde.

Ik leg het graag opnieuw uit ;-)

(Details zijn overigens achterwege gelaten, het gaat om het idee.)

Internet Explorer 8 heeft overigens XDomainRequest :-( Werkt server-side wel hetzelfde.

HTML5

I &heart; HTML5, dus check het vooral even na online ;-)

(Verder, ik ben er vanuit gegaan dat de vorige Fronteers HTML5 presentaties niet door iedereen gezien zijn. De slides zijn echter wel vandaag gemaakt.)

Waarom?

Als je dat nooit gezien hebt (of iets soortgelijks) gebruik je geen XHTML.

98% van de documenten op het Web zijn HTML, de rest is PDF en Word.

Zeker 90% heeft een of andere fout.

Als browsers niet convergeren krijgen we op een gegeven moment informatieverlies.

Daarnaast wordt HTML gebruikt voor applicaties dankzij JavaScript.

Er is echter nog een redelijk groot gat vergeleken met Desktop applicaties.

Wat werkt er nu?

<!DOCTYPE html>, geen copy & paste nodig!

<meta charset="utf-8">, minder typen.

<style>
 /* type="text/css" is nu
    overbodig */
</style>

<script>
 // type="text/javascript" ook
</script>

The W3C Markup Validation Service

XHTML?

Voor void elementen mag je zowel <br> als <br/> schrijven.

Je mag ook xmlns="http://www.w3.org/1999/xhtml" op elk element zetten (als talisman).

Als je echt dapper bent (en niks geeft om Internet Explorer…) kun je XHTML5 gebruiken (echt XML enzo).

Wie werkt er eigenlijk aan?

w3.org/html en whatwg.org.

Gecombineerd zo'n duizend man, met zo'n twintig zeer actief.

blog.whatwg.org heeft status updates (en de mogelijkheid tot posten voor iedereen die wil).

wiki.whatwg.org heeft discussie pagina's, FAQ, overzicht van implementaties, etc.

krijnhoetmer.nl/irc-logs heeft "Kick Ass Open Web Technologies IRC Logs" (hoi Krijn!).

Als je wil meehelpen, suggesties indienen, et cetera, graag! Het makkelijkste is even IRC op of lid worden van een mailing list.

Wat gaat er komen?

Zoals ik al zei proberen we Webstandaarden competitief te laten zijn met proprietary oplossingen voor applicaties.

Graphics

Retained mode graphics: SVG. Immediate mode graphics: <canvas>.

JavaScript library nodig voor Internet Explorer.

Storage

Local storage, session storage, en SQL storage.

localStorage["visited"]
  = "yes"
sessionStorage["paymentmethod"]
  = "ideal"

Local storage en session storage zit onder andere in Internet Explorer 8.

SQL storage zit in WebKit.

Application Caching (Offline)

Door middel van <html manifest="cache-manifest"> en APIs kun je zorgen dat je applicatie offline beschikbaar is.

online en offline events geven aan wanneer de gebruiker online is.

Events, alsmede navigator.onLine zit in Internet Explorer 8 en elders. Cache is voorlopig alleen in WebKit en Gecko.

Networking

XMLHttpRequest natuurlijk, ontwikkeld buiten HTML5.

Web Sockets, wordt momenteel uit HTML5 gesplitst.

Processing

Web Workers geeft de mogelijkheid tot gelimiteerde threads in JavaScript, eveneens ontwikkeld buiten HTML5.

Media

HTML5 introduceert <video> en <audio>.

Werkt in Firefox 3.1 en Safari 3.1. Codec probleem nog niet opgelost.

Controls

<input type="date">:

<input type="range">:

Ook: type="color", type="number", type="time", et cetera.

<input list="browsers">
<datalist id="browsers">
 <option value="Chrome">
 <option value="Firefox">
 <option value="Safari">
 <option value="Opera">
</datalist>

Zat eerst in Web Forms 2.0, nu onderdeel van HTML5. Meeste ondersteund in Opera.

Rendering

In de CSS WG wordt gewerkt aan fonts (werkt in meeste beta versies van browsers), kleuren met alphakanaal, etc.

System Integration

HTML5 heeft registerProtocolHandler() en registerContentHandler().

navigator.
registerProtocolHandler(
 "mailto",
 "https://gmail.com/?url=%s",
 "Gmail");

W3C werkt aan een geolocation API die nu geïmplementeerd wordt in browsers.

Kortom

Genoeg om mee te spelen.

Controversie

XHTML2

RDFa

Namespaces en "distributed extensibility" in het algemeen

Toegankelijkheid

lastweekinhtml5.blogspot.com

Nu is het tijd voor meer bier geloof ik. (Oh, en vragen.)

querySelector() & querySelectorAll()

Cross-Origin XMLHttpRequest