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