WWDC2003 Session 411

Transcript

Kind: captions
Language: en
good morning standards compliance is a
top priority for Apple if within Panther
and specifically within safari and
WebKit this session is all about the
standards compliance with Safari and
WebKit and understanding those standards
is critical for you as you take
advantage of WebKit in Safari and really
comes down to best practices you could
anybody can all throw a web page but
whether it looks right and does the
right stuff and behaves properly is
another thing and so that's what this
session is all about so to talk about
this content i'd like to introduce
Darren Adler who is the manager of the
Safari and WebKit team Darren actually
before Darren gets going you know if you
ever catch this guy in the hall okay
make sure you don't ask him something a
question about something he's really
interested in field it's never stopped
talking okay okay all right well welcome
we're going to talk about not just about
web standards but we're also going to
talk about how we support web standards
inside the supplier technology if you're
using Safari the application or if
you're using web kit inside your own app
so first of all I was thinking about
this talk and I was trying to figure out
who would be interested who's it matter
to developers developers developers
developers developers developers
developers developers developers all of
you so matters to all of you and so
there's a few different types of
developers who'd be interested in what
we're going to talk about here if you're
a website developer you'll be interested
now you know it's kind of funny to say
if you're a website developer I mean
everyone is a website developer these
days some people just do a little
website of their own other people might
be designing a whole professional
website no matter which category you
fall into I'll have some stuff that's
that's valuable for you if you do a
Macintosh application there's a chance
you're going to want to embed WebKit and
the things you learn here about
standards are going to help you
understand why you would want to embed
WebKit
everything I say about standards applies
to Apple help and also if you want to
know something about the guts what's the
inside a web browser this is also going
to be great for you so here are some of
the things we're going to cover the
WebKit the support for web standards in
WebKit the approach that the WebKit take
to compatibility with websites also the
WebKit and open source you've heard
about that in a bunch of other sessions
I'm going to repeat some of what you've
heard but tell you a few new things and
also some of our goals for the future in
this area so let's get started let's
review a little bit if you've been to
the conference for the last three days I
hope you've already heard this stuff but
let's let's talk about it again to set
the stage for the rest of what I'm going
to say first of all we're very proud of
Safari it was a big success we released
our public beta this January more than 5
million copies were downloaded since
then which you know I'm not going to say
how many we expected let's just say this
is more and Safari 1 point 0 was
released this week and you know we
couldn't be more pleased with that but
one of the questions we think about is
why was it so popular we think the
reasons are mainly these three the
impressive performance of Safari the
great innovative features and the
quality so now let's talk about the
WebKit again if you've been to
presentations over the past couple days
i hope you already know this what is the
WebKit the WebKit is the engine inside
safari and so this engine is now
available to you for any application on
macintosh and so what that means is if
you're a website developer or any kind
of content developer who's using web
standards safari support is vitally
important to you because it not only
affects how the Safari web browser is
going to show your content but also any
other maculate an application that uses
the WebKit and it's available now so
again a reminder something you should
have already heard you can use the
WebKit right now in cocoa or carbon
applications on 10 dot to you just have
to have safari installed to use the
webkit I'm Panther it's there all the
time and there's a some details about
the API but you've heard before I won't
i won't repeat them again so let's let's
put the webkit in context just one more
little bit of review the web kate is a
framework it's built on top of many
system frameworks these aren't all of
them this is just kind of a sample to
give you some idea the application kit
that it uses for a lot of its work
foundation where the where the new URL
api's are that uses to read in data and
then applications built on top of it so
far as one new applications that you
develop are also fit in there and then
also inside WebKit the there are the two
open source frameworks that WebKit uses
to do a lot of the heavy lifting webcor
which is the library based on K HTML
from the KDE project and JavaScript core
and will when we get to a part of this
talk that focus is an open source will
we'll discuss this a little bit more so
there's some there's some words that say
the same thing that picture just did so
let's start talking about the web
standards themselves let me begin by
putting up there a list of some of the
most important goals that we had in mind
when we were designing the WebKit you
know standards we wanted to make sure
that web pages looked good when they
were displayed by the WebKit we also
want to make sure that they worked they
did the job they need to and in addition
supporting standards was kind of a goal
in and of itself but supporting
standards is also a means to the end
it's something that allows us to work
with those existing web pages and you
know one of the things we sometimes talk
about is showing web pages the way the
designer intended which is a very tricky
thing because you don't know you need to
you need to know what was in their head
at the time it's not enough to just look
at the content of the page and so this
is what we had in mind when we when we
were working on WebKit so what you see
here is a list of some of the most
important standards that are in the
WebKit and what I'm going to do now and
you're going to be seeing this slide for
a while so you know
better read it and then look at me
because it's going to be really boring
up there so so I'm going to talk a
little bit about each of these standards
here and what they mean inside inside a
web browser so first of all there's the
HTML standards and this is this is
really the cornerstone of web technology
originally in the old days there were a
couple image format the HTML standard
and the HTTP standard for getting web
pages and that was it that really was
already recognizable as the web that we
see today and so the HTML standard
currently version 4 there's lots of
things you can do with just HTML alone
HTML describes the content of the web
page is what comes first what comes goes
next it includes things that allow you
to put images in the page links to and
from pages and of course a form elements
like buttons and you know like buttons
and lists and also alpha part of HTML is
out the table which actually is one of
the most difficult standards to deal
with because tables are sort of this de
facto standard know where can you find
written down the exact rule of how why
tables should be and given various
specifications and it's one of the
trickiest parts of being compatible with
existing websites we'll come back to
that in a minute then there's also an
important standard called X HTML and
XHTML is the xml version of the HTML
standard and one of the really there are
lots of reasons to move into this new
XML world but one of the main reasons is
it creates a future possibility of
having a single xml document that inside
it has an XHTML portion in another part
of it it might have a SVG portion or any
other vector graphics and any other XML
based languages and they should be able
to all eater mingle and interact and so
that's a reason why XHTML is very
important now HTML was always conceived
to be a language to describe what was on
the webpage and not how it should look
and so it's ways of letting you control
exactly where things are positioned on
the page are all sort of onion almost
unintentional people really had to push
it to its limit
to get to get an image exactly where
they wanted and mainly what they did was
use tables tables inside tables with
another table here in a table around
that and and as I mentioned before that
was one of the most the least
standardized aspect of how browsers work
and a real revolution in this came with
the next standard on the list which is
cascading style sheets cascading style
sheets as you can see there which had
already had a version 1 and version 2
and version 3 has been being worked on
now is a way to describe how a page
should look separate from the context
you still use HTML to say what's on the
page but you use cascading style sheets
to describe how it should look it will
talk about that a little more in detail
another incredibly important standard is
the programming language that's used
inside web pages themselves and this
language in standards parlance we call
ECMAScript named after the standards
body that standardizes it but most
people call it by Netscape's original
marketing name which was JavaScript and
in fact javascript has nothing
whatsoever to do with java really but at
the time they named it java really meant
good programming language so so when you
see JavaScript think of it it's like
good scripting language that's what
they're trying to tell you so javascript
is incredibly important our web pages
every all the programs that are parts of
web pages that do interesting and
different things almost all of those are
our JavaScript code and JavaScript
itself the real power in JavaScript
comes from this next standard which is
the Dom or the document object model and
one way to think of it is it's oh it's a
set of classes methods and objects that
you can use to manipulate the contents
of a page from a JavaScript program and
in addition to the Dom level one and two
standards we support some extensions Dom
level 0 is some of the most important
Dom stuff and it's not in any standard
and so we we have to support that and we
support some Microsoft extensions to DOM
so there you have it a list of our
supported standards but but wait there's
more besides all these basic standards
for the web they're even more things you
need before you can work with the
real life websites that are out there
very important standards some of which
aren't standards at all the netscape
cookie standard which you know is is not
it is not really a standard any
standards body to find the plugin api
this is the way we get things in WebKit
applications like flash content from
macromedia or or a shockwave director or
realplayer content and even quicktime
that's the way it plugs into the
programs that use the WebKit we support
java applets and our java team has done
a great job of making java applets work
really well inside WebKit programs and
when it comes to character sets when it
comes to working all around the world
it's amazing how many different
character sets there are and how many
different names there are for them and
so many of those names are documented in
the central repositories and official
names and then so many of them aren't
documented anywhere and you just have to
discover them on the web sites that use
them inside WebKit it uses Unicode and
this means that you can use different
pages with different character sets and
it all works together nicely javascript
always gets the same kinds of character
codes and then finally we have support
for the kinds of bi-directional text and
contextual letter form stuff that you
need to work with languages other than
English but wait there's more so there's
this is the third page is also a list of
some important ones that are supported
inside inside the WebKit in fact almost
all of these are things that are
supported in the foundation URL API
layer and these are standards that have
to do with getting the content inside
the WebKit pulling it out from the web
the basic protocol HTTP including some
of the more recent additions in the
history of HTTP four chunks transfers
which are prepaid to become a bit at a
time and persistent connections which
make using a website with lots of images
much faster the authentication standards
that you need to support the secure HTTP
standards and also support for some
proxy standards so anyway there's the
big laundry list and so now with that
out of the way having
those out of the way let's talk a little
bit more about these just so you can get
some understanding of what they are how
they relate to WebKit so let's zoom in
for a moment on contextual style get on
cascading style sheets keep saying it
the CSS standard so as I said before the
important thing about the CSS standard
is that for for the people designing it
was completely separating the appearance
of a page from the content of that page
I'll show you what that means in a
minute but besides that it meant
something more to the web community when
it arrived and that is it allows you to
do real design with each element where
you place where you wanted it and the
page laid out just the way you like
without using tables and so this really
creates the possibility of making a page
that looks the same on all the browsers
without navigating this tricky world of
how tables work in each browser and the
the basic structure of cascading style
sheets is that you have a predicate in
this case this little example I put in
the box the predicate is formed so it
says all that means it applies to all
form elements but there are ways to do
predicates that apply to to certain
named elements certain classes of
elements not just the not just which tag
and then you specify the styles you want
to apply and styles are everything from
the mundane like the color or the font
family to incredibly sophisticated
things that are browser features that
are expressed as style so that's a
little bit about cascading style sheets
now another another one of the standards
that's worth discussing in a bit more
detail is the Dom again one of the main
things that's lets you do is manipulate
the document manipulate the objects in
the web page from inside JavaScript and
this is how you achieve dynamic effects
on web pages I just gave a little
example here you might have a form with
a checkbox in it for the language and
this line of JavaScript code would let
you check that checkbox and so that's
that's a little example of of use of the
Dom
so let's talk in depth about a couple
more of the standards and then I'll then
I'll show you show you some webpages so
the plug-in support that we have is
another de facto standard from Netscape
netscape documents how plugins worked in
their original versions of netscape
browser and that really establishes how
how plugins work today existing plugins
that worked on Macintosh that worked
with browsers that existed before Safari
will work in any WebKit application
there's nothing you have to do to make
plugins work and so if you're writing a
plug-in you know it'll work inside any
app using web kit and you can actually
make a mock old version of your plug-in
and that'll load even faster I wanted to
mention that here because I wasn't sure
what other talk we'd have a chance to
mention it in and also this is an area
to look to in the future we're going to
make significant enhancements now
plugins work in the future and then
besides plugins there's one other area
worth highlighting which is Java Java is
a java java applets are a big part of
many websites and have great support for
java applets you need the whole suite of
libraries that java programmers expect
to be there and in Mac OS 10 you have
the latest release version of some sun's
java standard edition and that's you get
that through software update if you're
using Jaguar or it's included in Panther
and the plug-in that we have for Java
that that makes Java applets work it's
actually a plug-in that comes with Java
that connects with a WebKit supports all
the sun java plug-in features including
a debugging console and it's all and
excuse me and if plugins manipulate
cookies that works that is integrated
with the WebKit zone use of cookies so
let's move over to the others demo
machine here and i'll show you a couple
examples just to illustrate what i'm
talking about with the types of web
pages so let's start with let's start
with a simple HTML example now i
actually believe it or not i was
actually going to show google
as this simple example but when I tried
to load google before the demo it didn't
load so I don't know I don't know about
the rest of you guys but I kind of count
on that page be in there but anyway
yahoo is another good example this is
this is simple old-fashioned HTML now
the page has lots of elements on it has
pictures and stuff h it has bold-faced
text has a nice layout using some tables
but this is really basic HTML and
another page here to look at this a
little more complex but still is just
really HTML is a CNN com and they do all
kinds of things with these nested tables
and stuff but they're not using any
they're doing all this using techniques
that have been around for a long time
not using not really using some of these
more recent standards let's take a look
at one page that I think really
illustrate what CSS is really about this
site is called the CSS Zen garden and
basically all the text that you can't
read is describing the purpose of the
site and the people the people came up
with this site realized that a lot of
designers didn't get what you could do
with CFS in terms of changing the look
of a site without changing the content
so I'll just page down a little bit just
so you can see all right you actually
needed to Panther machine it's a Jaguar
machine well anyway it Scrolls nighttime
panther so I so basically you know what
you're going to see now when I click on
this link is the same web page okay
we're just going to change the style
sheet so let's let's go to this one here
so this is the same HTML nothing has
changed about the HTML the only thing
that changed the style sheet and you'll
notice all kinds of things have changed
everything from the font these these
these different capitals the layout the
these sections we're all vertical and
the other style sheet now one is to the
side one is above the other and here's
here's what I really like oh yeah the
way things highlight when you move over
them has been is controlled by the CSS
so so here's what I really like this one
this actually changes the whole website
too
a horizontal orientation it's the exact
same HTML not nothing has changed in the
HTML in fact all the HTML does is kind
of say you know this this section as
this name this other section of that
name and completely separate from the
from the HTML the stylesheet determines
how the page looks but not just in
trivial ways in the major ways how the
layout is done so just trying to
illustrate what what what CSS really
means now here's an example of a kind of
crazy page done with the Dom that gives
you some idea what you can do with the
Dom oh wait a second what version of
Safari is this you know I think I
shouldn't do this this is beta 2 oh my
god okay well anyway even with it so I
can't really show you this page very
well because it okay well forget this
one uh so here's the dish so this so
here's an example of something someone
did with the DOM and and and you know
this looks like an animation it looks
like it might be a feat of images but
this is actually just text there's layer
upon layer of text here and it's just
being moved around on the page using the
Dom you can use the elements on the
webpage the plain text itself as in your
program so you can write a little demo
programs but I thought this might
illustrate that you could using the Dom
you program a web page boy I hope I hope
beta 2 is really good on my other demo
pages well let's let's go back to the to
the slides and we'll come back to you no
thanks not during the talk so so anyway
that's a basic overview of standards
inside Safari so now let's talk about
this about website compatibility
designing to work with these standards
and also designing web kits to work with
these two with websites that are out
there so first of all what you see is a
list of some of the most important
things to do if you want to create a
website that actually standards
compliance it's actually going to work
and so one of the first things to do is
to actually learn something about the
web standards it's worth doing a little
bit of studying you know a lot of people
make web pages by taking an existing one
and ten
with it and changing it a bit but if you
want to make a really great website
that's going to work with all the
browsers it's worth reading reading up a
little bit about these standards and
like I said the most important ones to
learn about are really HTML itself and
CSS and the Dom and then another way to
understand how well you've done that is
to actually test your site with a lot of
different browsers you start to
understand what what that you're when
you are an art relying on browser
specific behavior by actually trying the
page with more than one browser and we
highly recommend testing with Safari and
also there are some tools out there that
will validate and check for mistakes
there's all sorts of mistakes that you
make that can be found by an automated
tool and the w3c has some of those tools
in fact I'll give you our else for one
of those at the end of the talk but to
understand what are you even talking
about when we talk about a
standards-based website or a
standards-compliant website it's worth
looking back a little bit into the
history of the web it wasn't long ago
when there was really one important
browser I know it's hard to remember
back then but but the the browser from
Netscape was really the one that defined
what advanced websites did and the
quirks that this browser had the
particular way it worked were more
important than any standard really
people programmed around those and I
mentioned the table the way tables
worked as a great example of that but
then a new one showed up on the scene
Microsoft Internet Explorer and it
quickly became an a very important
second browser and so lots of websites
discovered that they didn't look the
same in this new browser as they looked
in that scape and they thought it was
vitally important to look the same and
so tables had different quirks and so
lots of sites started to check which
browser it was and give you totally
different content for the two browsers
sometimes they take you to a whole
different web page and this led to this
this this body of knowledge on how to do
that and a lot of it was done by
checking the string that identifies
which browser you're talking to it's
called the user agent string
and so you check to see if it was the
Microsoft browser using that now what
happened shortly after that was
something really great because the the
next stage in evolution was to the world
of what I think of as standards oriented
or standards compliant browsers and the
the first big event for this was the
release of Macintosh ie this is a
browser that was very compatible with
how windows internet explorer worked and
worked on lots of those sites but it
also supported lots of these new
standards that were supposed to replace
this old way of doing things like tables
and it really had a big impact when it
first showed up and soon after that
cain't the what I think of as the
archetype of the standards compliant
browser came on the scene and that's the
mozilla browser the with the with the
engine gecko engine inside it and they
really they really help to find what it
meant to be to be a standards-based
browser so this meant they adopted the
new standards they were very thorough
and implementation of standards and this
then soon after that that replaced
netscape's offering and soon after that
microsoft improved their windows browser
to support you know most if not all of
those same standards and it changed the
world to where you could actually build
websites using these new standards and
expect that almost all the users could
see them so you no longer had to do
things the old the old way misusing
things that weren't intended for that
purpose I I always think of it as you
know I've said it a bunch of times but
the huge a nest of tables is is what I
think of its the canonical example of
that so let's talk now about some of the
things left over from that early era
that you really don't want need your web
pages if you put these in your web pages
then they probably don't work at all
with Safari and not just Safari but
other standards compliant browsers like
like the ones I just mentioned so one
thing to avoid is the two browser trap
this comes in a lot of different forms
one of them is checking for certain Dom
features and assuming if that Dom
feature is there that everything else
about the browser is going to match the
one you know about the classic example
used to check for the document dot all
property and if that's there then assume
this is a Microsoft browser and
100 different things because of the
Microsoft browser another example of
this is to search for the string
compatible in the in the user agent
string and if you see the string
compatible assume it's a Microsoft
browser I know that sounds ridiculous
but probably some of you in here have
that code in your website that you
copied from someone else's website
because it's so widespread you can't put
the word compatible in your user agent
string or if you're if you're building a
web browser or sites are going to think
it's it's the Internet Explorer so
another thing is you should be able to
build your whole website without ever
parsing the user agent string because by
definition if you're looking at the user
agent string to figure out what kind of
content then you're not going to work
with a new web browser how can you
predict what the user agent string of
some future web browser is going to have
in it there was a time when this was the
only way to check things but that time
is long past and right now the main
thing to do with user agent string is to
tell people the name of the web browser
you know that's about the only thing I
can think of to do or log what web
browser someone used not to figure out
what kind of content to give and then
another thing to avoid and this may
sound obvious but you have to read the
standards enough to know what things are
non-standard extensions so don't just
use them because they're you know
because they happen to be there on the
one browser you test with first and in a
lot of cases there are standard
alternatives so those are a few of the
things not to do I'm just just just a
couple high-level tips on that and let's
talk about some of the things that that
you that you should do so first of all
when I say don't check at all don't
check the user agent string don't check
document at all you know if you are
going to use the feature that is not in
every browser but you want to be
compatible with others then you will
need to do some testing for capabilities
probably in your JavaScript code so
there are ways to do this that work
really nicely and the best way I can
summarize as use object detection so
what this means in JavaScript you can go
at any object and that includes methods
methods themselves or objects in
JavaScript you can get the object and if
the object isn't there you'll get
undefined and so you can very easily
check before calling before calling
something just see if the object is
there and that's a much better check
than to check which browser and then
based on that guess which feature is
going to be present another thing is
another particular specific tip that
people have done lots of websites tell
me is important is to use the get
element by ID method to find objects on
the web page there are lots of ways that
work in one browser that don't work in
another this is an area where there's
lots of extensions and this method works
in all the most important browsers and
it's part of the standard so this is a
specific example where there's a
standard way to do something so don't
don't use an extension because you can
do it the standard way now I wanted to
mention this is kind of a little bit of
a side trip but it's worth mentioning
lots of people have asked us about
improving JavaScript debugging in Safari
and a big part of making web pages work
well with WebKit is actually debugging
your pages trying mountain so far I see
see what what's going on and so a lot of
people have these pages that weren't
working quite right and they've asked us
for a little bit more help v and we've
provided something new in one point O if
you've used beta 2 not in beta 2 and and
it's it's the ability to log JavaScript
exceptions to the console and it sounds
like a small thing but it really makes a
big difference when debugging a web page
and all you need to do is turn on the
Safari debug menu and you know I hardly
need to write this tip up there because
I believe everyone in the big room so
they already knew how to do this but you
just type this in the command line to
turn out and then the next time you
start up Safari you'll see the debug
menu and then there's a menu item log
JavaScript exceptions you turn that on
and then in the console you will see
information about JavaScript exceptions
and it's it's it's a little thing but it
can it can really help you out when
you're trying to figure out why your
javascript isn't running now I actually
when I'm doing JavaScript stuff I tend
to also put like lots of alerts in
because it's easier than like looking in
a console window but but this is you
don't even have to change the web page
to do this
alright so I talked a little bit about
what you can do on your websites to be
compatible but i also want to talk about
what WebKit does to work with the
realities of the web so in the real
world we got webpages that don't do any
of the things we said do everything
wrong that i just mentioned and a
hundred other things wrong and we still
want them to work with a WebKit and the
reason is that we're putting web get
into our new applications and you don't
want to help you know you want to make
excuses why they can't work with these
existing websites so what can you do
about this well there's a couple things
you do that that we did in WebKit that I
want to go into detail on just because
they're kind of geeky and fun and these
have a lot to do these have more than
you it's surprising the amount this has
to do with making web pages work with
the site so the WebKit user agent string
has to look just right to all the
websites that are going to do various
checks so I already said it's vital that
it not have the word compatible in it
because everyone knows that means
microsoft internet explorer so every
user agent string has been designed for
compatibility in a major web browser the
very second web browser already realized
they couldn't change things from the
first web browser too much because
people were checking user agent string
so one of the goals for the web kits one
was to look like other standards
compliant browsers so code where someone
tried to look for a standards-compliant
browser you know kind of bad way it was
important that he got the idea it was on
one so that it gave Safari the kind of
Content that works well for a
standards-compliant browser and also
it's important to remember that the user
agent string has a real purpose to which
is to identify which web browser it is
so we couldn't fill it with lies they
couldn't say you know I am Mac ie
version 5.2 or something like that even
if that gave us good web pages because
you have to tell the truth you have to
say that's the WebKit and you have to
say which the application it is and some
some people may need have a reason to
check a version and so we got to include
those version numbers so
I the sale all the same things I said
apply to some important methods in the
Dom there's a navigator object which in
the Dom which has all sorts of user
agent like strings that tell you who
wrote the web browser what you know all
that sort of thing and it has the same
kind of goals with the user agent string
so let's let's look at a user agent
string so this is pretty much what the
user agent string looks like from an
application using safari so let me just
go through it a little because I don't
know I just think it's fun so in the
beginning it says Mozilla five-point oh
you have to say that in fact I don't I
would predict that five years from now
user agent strings of all the major
browsers will still start with mozilla /
5 l and and and and really it's just
because the first netscape version of
netscape said mozilla and their mozilla
checks in ancient code that that i won't
do anything interesting unless this
browser is Mozilla and then inside the
parentheses are where all sorts of
platform identification stuff goes
you'll notice that the primary language
of the user goes in there you set that
in the system preferences on the on
Macintosh and I did this for my own
machine so it says US English in there
and some various platform identifiers
you know it's embarrassing to admit but
I forgot what the you means they're
experts in the crowd it could tell me
I'm sure but there's some the salient
features start on what the parts is
wrapped on the second line the string
says the word Apple WebKit now if you
find that none of these other techniques
work for you and you really want to do
something specific in the case of the
WebKit please look for that string don't
look for the name Safari which just
happens to be the first WebKit
applications name but look for Apple
WebKit and in fact even look for the
slash after it because you know to be
sure you're not seeing the string
somewhere else so the version of the
WebKit appears right there and if you
had some need to check the version you
could read it out of there but you know
please don't because it's hard to parse
these strings javascript doesn't really
have like regular expressions to help
you well it does it regular expression
but it doesn't really have an easy way
to parse these
art correctly but but the version is in
there that's like I said telling the
truth so then the next parentheses part
is just a a perfect example of what you
got to do to make the pages work the
word gecko is in there you see it says
like gecko and gecko is the engine
inside Mozilla and you might ask
yourself why the hell are they
mentioning gecko in the user agent
string for web kit and the answer is
that for a huge amount of the web
there's code that says if the string
gecko is there use the new standards
compliant way of doing things and if the
string gecko isn't there do things in a
way that only works with microsoft
internet explorer and so this isn't
vital to making web pages work that the
word deck will be there somewhere but we
didn't want to lie so we say we're like
gecko so just before like gecko you see
the words k HTML there and this is so
that if there are quirks of our engine
which it shares its its innermost code
with a k HTML library you know it is the
K HTML library we wanted to make sure
there was one thing in our user agent
string that was also in the user agent
string from the KDE project with their
browser using the HTML library so that's
why the word k HTML is in there and then
finally your application name will go in
there and you get to set that when you
use the WebKit if you do the codeless
browser there won't be anything there
but if you go and start to use delegates
to customize the behavior of the WebKit
the webview you'll be able to put your
own application name and version in
there so i'm not going to go through
this in quite as much detail but here
are the Navigator properties i talked
about and similarly these are driven in
the same way by these compatibility
issues what existing web pages check and
what they expect the only one here i'll
mention specifically is i like product
sub that's one of my favorites because
you'll notice it's this mysterious eight
digit number and it's actually the ages
of all the Safari engineers multiplied
together okay not really of what it is
is it's that's the date of the on the
gecko project they use that for the date
of the gecko build
so there's a lot of websites out there
that say okay if I got gecko then I'll
do it the standards compliant way and if
I've got a new enough gecko greater than
a certain build date then i'll use this
suite of features that they didn't get
into that day and it's not like people
are doing this a lot now but they did it
like a year or two back and so it has to
be greater than some date so we had to
just had to be a year month and date
that was newer than some old gecko bill
so we picked completely at random
January seventh 2003 is our date so so i
can't remember there was something
happen that day that man so anyway let
me show you a couple more examples let's
go back to the demo machine and we can
see how safari beta 2 used to render
these pages so I'm so proud of how one
point O register they were pretty good
and beta 2 so this is wired com and this
is an example of a real world web page
that was done entirely with standards
there's none of this old fashioned way
of doing stuff very little you know
checking user agent kind of glop and it
it's it's a beautiful page does lots of
stuff very attractive lay out all kinds
of neat features like like changing the
size of the of the text from a link in
the page and the reason I'm showing this
the reason I'm showing these pages is
just give you an idea that you can make
a really great web page just sticking to
the standards you don't have to use
special extensions to make a great web
page so let me show you one other page
that was done with that kind of
philosophy this is espn.com and although
it is designed for a certain window
width so it looks better I should have
left the window that way there's this
this side have a lot of really cool
stuff I like this section here where you
can change around between different
pages and all this is done just with the
standards there's no there's no there's
no sneaky sneaky weird stuff here a lot
of designers think you can do things
that look really good only by designing
21 browser and it's just not true so
let's go back
the slides here in fact here here's
something that that the designer of that
website said about Safari a lot of
people are asking him what did you do to
make it work well with Safari other
other web designers you know obviously
you spent a lot of time working to make
it work well and he said we did nothing
to make it work with safari in fact we
didn't even we just tested it on safari
most of it worked and we tested it with
an X beta and it all worked and you know
this is what he said about if you're
doing a standards-based web page you
don't have to know anything specific
about Safari because Safari just work so
I was really happy to see you said that
[Applause]
so that's most of what I have to say
about standards and compatibility let's
talk a little bit about a big part of
how we achieved this and that is how we
use inside the WebKit open source and
what that means to you so let's look
again at this picture of the WebKit
inside the WebKit are two open source
frameworks the web core framework and
the JavaScript core framework let's dig
into each of these the web core
framework does most of the HTML and HTML
related standards like CSS and Dom heavy
lifting for the WebKit it includes two
big libraries well not big in terms of
lines of code but the two major
subsections of webcore one is the K HTML
library which comes from the KDE project
and that same library is used inside que
des web browser and file manager concur
and what we've done to the K HTML
library is keep it basically the same
structure in the same concept in fact
our code can be used as is back in in
the KDE land you can just move the code
right back there but we needed to
connect it to Mac OS 10
KDE uses a underlying library called QT
which is a which is a library that does
all the sorts of toolbox things in its
own way it doesn't do them the exact
same way that OS 10 does we wanted
something that was really using all of
the OS 10 native technologies for
everything from text drawing drawing the
buttons event handling you know topped a
lot of all sorts of things and so that's
why we built the quack library it's
spelled Kade k WQ pronounced quack and
the quack libraryconnect k HTML to the
OS 10 underpinnings and I the way I the
way I think of quack is if it quacks
like a duck that it is a duck is kind of
the concept of the library so webcor
with K HTML and quack there's one
important piece that comes from outside
of web core which is the JavaScript
language the JavaScript interpreter and
that's inside the JavaScript core
framework now javaScript core didn't
really need a big adapter layer like
quack but we did need to do a couple
things to take the KJ s library again
from the KDE project and combine it with
some code that we wrote ourselves to
connect it well with a certain extent
technologies music and some other
libraries that aren't that that that
work really well with it for example we
really were able to improve its regular
expression support by using the the
perl-compatible regular expression
library does a great job and animals
Unicode perfectly and there's some other
support libraries in there too even
smaller than those and they're all open
source they're all part of
javascriptcore so webcor is the only
part of the system using javascript core
actually WebKit uses javascript course
through through the web through web core
so why do we choose K HTML and KJ s so
again you I hope you heard about this
the last couple days but I'd like to I'd
like to repeat this again we looked a
lot of different alternatives but in the
end the big reasons were that this was a
codebase that was easy to modify was
fast
and it was easy to make it faster and
we've we've shown that time and time
again and with small and small in terms
of lines of code number of different
concepts small in every every dimension
you could you could think of and yeah I
didn't even mention how well it worked
you know that's really missing a bullet
point on that slide because it already
did so many of those standards we talked
about we really worked on it to round it
out so we collaborate with the folks at
KDE we're still working on K HTML and KJ
s and the way it works is we keep
enhancing HTML kjf in the context of
JavaScript core and webcor they keep
enhancing it and we exchanged changes we
said they tend change if they've made we
send them changes we've made so I wanted
to since we're going a little bit in
depth about this relationship I just
wanted to talk about a few of the
contributions we've made to HTML kjf so
you know it's not complete detail but I
thought of you need to call them out so
that what you see here is a list of them
so in terms of sight compatibility we've
made hundreds of hundreds of changes to
correct a small bug or an omission or a
way of handling things so that it's more
compatible with the standards and more
compatible to websites and the way this
is really driven for us is that we find
websites that don't work we track them
too we track them down we figure out
what it is and then we make the change
in a way that works both for us and for
the original k HTML and KDE we've also
made performance enhancements and we're
particularly proud of these we sped up
kjf we did this we did these job event
JavaScript benchmarks and we set it up
at least ten times and even more on
certain subparts of the benchmark that
was fun just some little changes in data
structures keeping the basic concept the
same we changed we had some experience a
couple members of our team came from the
Mozilla project so they had some
understanding of the way that Mozilla
handled certain things like white space
and we realized that Mozilla having a
white space really was needed to
correctly handle the Dom standard and so
we changed the white states handling and
the line breaking to be in line with the
standard
and then I'm not going to well they're
only three more listed here and there's
probably like 30 more I could list but I
just wanted to give you some idea
there's a wide variety of changes we're
making inside k HTML kgs so we're not
only we're not just taking it and
putting it on our platform work we're
giving a lot back to so I want to be
clear on this point we talked about it
over and over again but I'd like to I
think we can't emphasize that enough
time these are open source libraries so
we can't tell you what to do with them
the license tells you what you can do
with them you can download them you do
whatever you want you can you know pour
them to some other platform whatever
whatever it is it turns you on what
should you do with them use them via the
web kit use the WebKit take advantage of
them through the great WebKit API if you
link to them directly you and we both
are in for a world of hurt because we
change their interfaces all the time
they're not the kind of polish public
api's that we put in and commit to in
the system web kits api's are in that
category and also if you just use web
corder ectly you're not getting a lot of
the benefits come from the way WebKit is
connected to the web court to really
connect it up perfectly to OS 10 some of
the performance tuning is only there if
you use it all together all right so we
talked about the standards and how we
achieve compatibility let's talk a
little bit about the future first of all
we do use our own stuff okay this this
stuff is brand-new the web kit SDK is
brand-new but even though we just got to
the point where we really could have
people using it we already have a lot of
applications using the web kit and the
foundation URL API and so I'm not going
to list them again you've probably even
seen this list before but we use it
ourselves we're completely serious about
the WebKit okay we're not this is not
something that we're just doing this
year and the next year we're going to do
something else there's going to be more
from Safari more features from Safari
you
proved standard support of each of the
standards we support improved
compatibility with websites all kinds of
things from future safaris there's going
to be more in the WebKit a lot of those
things I said that we that will affect
every WebKit application and if I talked
about before an area we plan to improve
is plugins there's also we also plan to
enhance the networking api's and all the
ways i talked about improving standards
support adding features we're in this
for the long haul and we're also a
member of the most important standards
body the w3c and we're participating in
committees that define future standards
so standards for us doesn't just mean
implementing what websites are already
using or what other people had already
decided but it means getting in there
hammer and tongs and helping helping
figure out what the future of web
technologies are going to be so the one
request I have from you is we'd like you
to be serious too we'd like you to take
the WebKit seriously as a website
designer and we'd like you to adopt the
WebKit I think when you take a look at
all the stuff we have to do inside the
WebKit to make it work well with the web
you there really is no reason to try to
roll your own there's just so so much so
much in there for you so I'm just going
to before I switch to to some of the
books and resources that I want to tell
you about I'd like to summarize some of
those advantages that the WebKit offers
one is it's easy to embed in an
application so if you're a programmer
with a nap no problem it's fast you're
going to get the same kind of speed that
we get when we use it in Safari if you
use the WebKit the WebKit supports a
panoply of standards and it also
supports the real world websites that
skirt the edge or ignore the standards
completely safaris continued development
is going to be one of the many drivers
they'll keep driving improvements to the
WebKit and the WebKit is built right
into the OS it doesn't make your appt
any bigger and will have almost no
effect on startup time of your app
so I'm not sure that these slides are in
the right order I do before we before
John does the wrap up I want to talk a
little bit about some of the research so
let's come back to this roadmap and due
to contact I want to talk about some
places you can look for more information
here are a few of the of the places in
our documentation website that you can
find relevant stuff to the relevant
documentation for the things I've been
talking about in addition there are some
really valuable apple website the Apple
internet developer website has tons of
information about developing content web
content in a ways that work well with
our web technology including one page I
call out there the Safari resources for
web developers page that has all kinds
of stuff it includes pointers to
documentation about exactly what
supported by various versions of by a
safari one point Oh tips for using CSS
and the dom and all that sort of thing
and then the sdk website i wanted to
mention a few these books in particular
the the CSS book which is the second one
down there and the dom book the which is
dynamic HTML good way to met a good way
to describe both the dom and other other
features those are incredibly useful
some of the best references on these
subjects and that's how you're going to
know what the standards are in addition
there's some great websites about
standards in specific and why standards
are a good idea some of these I hadn't
seen until I was preparing my talk and
they're they're really great there they
make a compelling case and the validator
w3.org up there is the is the URL for
one of the for a suite of different
validation tools that the w3c offers and
then these are kind of fun there are a
couple standard experts who have some of
the best resources out there for CSS and
the dom and eric vote it says right
there the CSS the one that's great for
CSS tips and another amazing for stuff
about the dom and they talk specifically
about safari 2 so that will help you as
well
so anyway not okay sure sure so let's go
let's go affect the first load and then
okay so because this is going to be on
the DVD there's a previous sessions the
first to our previous sessions you might
want to look at the open source session
and the Safari overview but after after
this session there's three more that I
think you may find really interesting
the advanced foundation URL API session
is going to go into detail about the URL
loading API and what they are how to use
them the advanced web tapi session will
tell you all sorts of interesting things
about the WebKit I actually think there
are parts of that that are interesting
even if you aren't going to program with
the WebKit so so it's definitely go to
that one and then there's a feedback
forum for all the internet and
networking technologies which is on
Friday not day 1030am but Friday 1030am
so if you have feedback about WebKit and
standard supports please send it to John
his email address is there and thank you
very much I think it's time for Q&A