Welcome to the Safari, Internet and Web State of the Union [applause and cheering]. Let's start with Safari. Safari is our blazing fast web browser. It's got innovative features like Top Sites that watches the sites you use, puts them in a beautiful easy to click preview.

Innovations like full history search. Type a word and any website you've been to recently with that word shows up, Cover flow display, just click on it. Safari leads in web standards and the same Safari that many of you use on Mac is the same Safari on Windows, and the same Safari that we brought to iPhone, revolutionizing what it means to be a mobile web browser, and the same Safari that creates the magical experience of touching the web on iPad.

I'm pleased to announce that there are over 200 million devices with Safari. Wow!

Now a lot of you are software developers so you're just as interested at what's inside Safari. WebKit is Safari's open source engine and this is a great place to talk about WebKit. It was here five years ago today at the Developers Conference at WWDC where we changed Safari from an open source project into an open community.

Apple created mailing lists, bug databases, source code repositories, everything that we need to work on WebKit in collaboration with other software developers around the world. And WebKit has been a huge success on Mac, on Windows and on Linux; lots of applications have been built on top of WebKit.

In fact, that includes just a few of those that are here and they're not just web browsers, mail apps, chat apps, games, development tools and the same on iOS, tons of apps. I'm particularly proud of how WebKit has become the standard on the mobile web. Nokia uses WebKit for the web browser in their smartphones. Android uses it, Palm uses it and RIM has announced that in the future Blackberry's will use WebKit.

Over half a billion devices out there with WebKit.

So when you've got a half a billion WebKit out there, that gives you an opportunity. It's an opportunity to popularize web standards. At Apple we believe in web standards. In fact when it comes to web technology, standards are how we innovate. Take the Acid2 test. This is a test of web standards and Safari was the first web browser to pass this test. If fact it was over two years before any other popular web browser passed it. Or consider the Acid3 test.

This is a test of web standards including more of the dynamic standards used in next generation websites and Safari was also the first browser to pass the Acid3 test, all 100 parts, it's an extensive test. When it comes to standards these days the most exciting thing going on is HTML5. What is HTML5? Well, HTML5 includes video and audio elements and they have a rich scripting API.

CSS includes animations and transforms, which allows you to have elements that move on your web page with almost no code and CSS reflections, gradient's and masks make it possible to have beautiful designs on web pages without pre-rendering them in an image editor program. Vector graphics and canvas lets you draw arbitrary graphics. You could put a graph on your page or some other kind of image transform; apply to an image, again without pre-rendering.

HTML5 offline support allows you to take a web application and have it run even offline on the user's machine and store data in a offline database. Now just like with Acid2 and with Acid3 with HTML5 Safari has been leading. With all these features HTML5, video, audio, canvas, CSS animations, transforms, Safari was the first browser to implement. Everything I've been talking about works in Safari on the Mac, Safari on Windows, iPod, iPod touch, iPhone and iPad. But this is not just a Safari story. All the major web browsers have announced support for HTML5, every one.

Now HTML5 has got amazing momentum. Right now all sorts of websites are using HTML5. Here are just a few of them. I'd like you to see HTML5 in action. So to do that I'd like to invite Adele Peterson, a manager in my Safari and WebKit engineering team to come up on stage and put it through its paces [applause].

Thanks, Darin. Hi, everyone. So we recently put up a web page on apple.com to show you some of the power of HTML5 and web standards. Let's take a look! So here's the web page and if you scroll down you'll see we have a bunch of demos here.

What's really cool is that for you as developers you can dig into the code and learn more about these technologies and how to use them so the place to do that is the Safari Dev Centers. We're going to go there and take a look at a few of these demos. Okay let's check out these photo transitions.

So now with a few lines of CSS it's pretty straight forward to create affects like this. We've got a fade through, a slide in, a dissolve, and then when you want to start getting fancy you can use 3D CSS transforms to do some of these affects like an unfold, or a horizontal flip, or a multiflip, rotate in, I love the little bounce there at the end look lets watch that again and then there's a cube, again see a little bounce. I mean this is something that you don't really see right there on the web right now until now with HTML5, really powerful stuff.

So here we have a virtual tour of the Fifth Avenue Apple Store. So this is done using CSS transforms and photos were taken from inside the cube and so using those 3D transforms we're able to build up this 3D scene and as you scroll around you're actually rotating the images as they're transformed and this is all built right into your web browser with CSS and HTML5.

So these are just a few demos that we put up to show you the power of HTML5 and web standards but it's actually being used right now on the web and I'd like to show you a few examples of that on the iPad. So on Vimeo you can watch video using their HTML5 player and then NPR offers news and music with HTML5 audio, and then on Life you've got these really beautiful photographic slide shows that are all done using web standards.

So it's not just media companies. Sites like Nike have done this really great product gallery using web standards that works great on iPad. You can flick it, have that whole experience. And then on a site like Virgin America with their online ticketing site it really shows how web standards can work for e-commerce too. So there are all these sites out there actually using this technology, it's really powerful stuff, built right into your web browser and that's HTML5. Back to your Darin [applause].

Wow, Adele showed us some great HTML5 technology demos and you get the source code for those at the Dev Center and also sites using HTML5 now. I'm pleased to announce our next major release of Safari. Safari 5.

This is available for Mac and for Windows and there are five things you need to know about Safari 5 so let's get started. The first thing you need to know is that Safari 5 has over a dozen new HTML5 features.

I don't have time to go through all of them, I'll just tell you about a few. Full screen video: The HTML5 video element, the video up in full screen. Closed Captioning: HTML5 video with captions in it. Geolocation: So your website can tell where the user is and customize the content. We protect the user's privacy by asking for permission and a bunch more.

Over a dozen new HTML5 features. The second thing you need to know about Safari 5 is that it's blazing fast; it's the world's fastest web browser. We took a browser that was already the worlds fastest and made it even faster and as you can see from this chart it's about three times faster than Firefox and faster than either Chrome or Opera. Blazing fast performance.

The third thing you need to know about HTML5 is Reader. So Reader is a feature that's great for a webpage like this one. It's got an article on it but it's also got a lot of other things. It's got links that take you to other parts of the website, a lot of distractions.

So when Reader sees that a website has an article on it, it puts this button up on the side of your address bar and when you click the button Reader brings up a clean view of the article.

It's got nice big text, no distractions and very easy to read and you know the thing about this is the continuous view shows you the whole article so you don't have to go find the next page button to go to the next page of the article [applause].

Now we included a few of the commands you use most. There's a way to make the text even bigger or smaller. It's easy to print and you can click to mail and I love how when you mail an article you get a link to the original article and then a clean copy. So, Adele, would you come up here and show us Reader in action.

I'm really excited to show you guys Reader, it's one of my favorite features, so let's get started.

So here we have a pretty standard web page, probably come across a lot of these in your browsing habits but there's kind of a lot going on here. Sometimes you just want to read the article so Reader's detected the article and I'm going to just go up here to this button and click it. Let's see that again actually.

Nice. So as Darin was telling you, you get this really nice clean layout and Reader has loaded the whole article for me so I don't have to break my concentration to go and search for those next page links and there's some handy controls. You can make your text bigger or smaller and Reader actually remembers the setting for you so as you're reading other articles you get your preferred text size each time. It's also really convenient to email articles, I'll just send this and as Darin mentioned you've got the link up there at the top so you're friend can go get the same clean layout and then check out the original site if they want.

Oh how about not. So it's also really straight forward to print an article and you get again that same clean layout and then when you're done to exit Reader all you have to do is click this close button. And that's Reader. You guys are going to love it!

Thanks, Adele. So you know Reader is a great feature and it's something that I use every day. So the fourth thing you need to know about HTML5. We've made some changes to the search field, we've added Bing.

So Bing is available as an option in the search field and if you type a search in there you get suggestions just like today. Down here in the same menu are your choices of which search you'd like to use.

Google, Yahoo!, which was previously available on Safari on Windows and iPhone but is now available on Mac as well, starting with Safari 5 and Bing. Safari 5 has this Bing option on Mac and on Windows and it's also available on iPhone and iPod touch. So Microsoft is doing some amazing things with Bing and Jeff Henshaw is here from Bing to show them to you. Jeff.

Thanks everybody. I use a lot of Apple products and I enjoy them, I enjoy them all tremendously and because of that I tend to think I have a better design sense than the average consumer and I also I value my privacy a lot, so before I even start this demo I'm going to fix Safari 5 by making a quick little adjustment here [laughter].

Ah that feels so much better. So one of the best reasons to use Bing is our relentless focus on creating search experiences that go beyond the basic 10 blue links and give you richer tools and richer information to help you make the decisions and find the results that you care about.

That's evident on our search results page where you'll see Bing doing things like dynamically assembling intelligent cards of information, where we look ahead into the target sites and find the information that's going to be most relevant to you and surface it earlier in your search experience to help you get where you're going faster, well beyond the basic 10 blue links. People have appreciated this.

Nowhere more so than in the Bing homepage which everyday gives people a new curated exceptional photograph. This is our photo from today with hover hotspots that let you explore your world and we found that people have adored this experience so much that they're setting Bing as their homepage and coming here every day to learn a little bit more about their world and find something interesting.

So when Apple called us a couple of weeks ago we started to have some discussion about what could we do with the search experience to really leverage the power of HTML5 on Safari 5 and what we did up in Redmond is we took a handful of engineers and spent about a week exploring what would be possible and we had such a productive week and the collaboration with Apple was so fruitful that we decided to bring it down here and show it to you today. So I've very pleased to introduce to you an early exploration into HTML5 and Safari 5 powered search experiences. We'll go from the Bing.com that you see today, to a brand new Bing home page powered by HTML5 [applause]. Thank you very much.

We're very excited about this. You can see right away that we're using things like image transforms from HTML5 to give a perspective based view on that homepage image that people have come to love so much. The information at the bottom is being dynamically updated from real time data feed so instead of looking at a static still page that doesn't reflect the world around you, you're getting more information, more dynamic assembled in real time right away. Let's go ahead and run a query.

One of the things you're going to notice is that in the old web days when you did a query you're page would blank, completely refresh and you'd get a brand new page with your search results. I'm planning a trip to Hawaii so let's go take a look at Honolulu and you'll notice when I run the query instead of the page refreshing we dynamically reassemble the page without it blanking [applause].

Another thing you're going to notice is these dynamic cards that we're building are now alive and vibrant with more information coming into them with HTML5 animations. So instead of having just a few fields down here that don't change, we actually get additional information that scrolls by. When I see what I want I can hover on it to freeze it and click through if I want and if you've ever used the home screen on an iPhone or an iPad you'll be very familiar with this tile based interface that'll let you flip around the information that you care about, a much, much more vibrant search experience.

A little later on this month we're going to be releasing some new updates to Bing including a tabbed interface across the top to help you very quickly flip through different categories of search results. With HTML5 we took it to the next level. I can hover over a tab and get a preview of that content without even having to click. So if I want to see a map it's just a hover.

If I want to check the weather at a target location I can hover and not only do I get the typical table of forecast it'll actually dynamically build an animation to give you a much more vibrant sense of what the weather might be like in that location. This HTML5 work that we've done in Safari 5 on the Mac and PC translates directly to Apple's mobile devices, the iPad, iPhone and iPod touch.

I'd like to switch over to our first phone here, phone number one and I'm going to go ahead and do a similar query at the upcoming new Bing Mobile m.bing.com site. If I check on Hawaii flowers for example and run this search it's going to give me a search interface that we're fairly familiar with. I'm going to switch over to images and go to more results to show you the new image results interface that we've built in HTML5 for the iPhone and iPod touch.

You'll notice first of all it's got a gorgeous image browse. I can actually scroll this with a gesture and you'll notice that the scroll is infinite and it clips to the top of each tile. It gives you the feeling of a native application but this is all being done in Safari 5 on the mobile device.

As I begin to go look at individual images you'll notice the transforms and animations are completely fluid and the interface is fully gesture aware so I'm swiping with my finger to swipe through this image result catalogue just as easily as I would do it in a native application. So that's how powerful HTML5 can be as we move from the PC to mobile devices.

If we could go back to the PC I would like to take a look at one more query here. I'm going to go ahead and begin the search again you notice no jarring transitions. We're going to continue to explore these possibilities with Apple and look to deliver these later on this year but I hope for now you've really enjoyed this sneak peak as much as we've enjoyed building it. Thank you very much everybody.

Pretty cool! So some changes to search. The fifth thing you need to know about HTML5 is that we've improved our Developer Tools. So a lot of you may already be aware of Developer Tools built into Safari and this is the hub of Developer Tools, what we call the web inspector. To turn on the developer tools all you need to do is go into the Advanced preferences in Safari and check this check box it says Show Develop menu, that turns on the Develop menu and all the tools.

In Safari 5 we have a new timeline panel and this shows you what's going on when you load a web page, or when you click on a button, or do anything and you can see network activity, you can see the time it takes for rendering, you can see your scripts running, everything that's going on, it's a great way to figure out exactly what's happening and speed up your website.

Now besides the timeline panel, we have edit as HTML in the web inspector so this lets you edit a tag and just change the markup around, it's really handy. Attribute editing lets you kind of tab through the different attributes, add a new one, just tab key and type in a few letters.

Color editing is great for tweaking colors and you can view them in different color spaces and now event listeners which used to be invisible in the web inspector can be seen in there so you can you've got an element that you click on you can see what codes going to run when it clicks. So these are a few of the improvements to Developer Tools in Safari 5. Now besides these five things that you need to know about Safari 5, there's actually a sixth that's just for you.

Safari 5 has extensions.

It's everything that developers need to make Safari extensions. So extension can add an extension bar like this one, or add a tool bar button like that. An extension can add like a balloon that points to a part of a page like the one you see up here, or remove something from a page, add something from a page, or move things around.

Safari extensions are easy to install. You don't have to quit the browser to install an extension or restart it, you can enable or disable an extension just with one click and you build Safari extensions with the same HTML5 that you use to make web pages, with a few additions to let you do things like add those bars. If you know how to make a webpage, you already know what you need to start writing an extension.

Extensions are signed with a digital signature and any update to the extension has to be signed with that same signature. That means that you know the updates came from the same developer who made the original and the HTML5 doesn't run with any native code so it's sandboxed, it can't get at the files on the users machine.

Safari 5 includes an extension builder tool and you use the web inspector while you're developing extensions but you're also going to use this extension builder. You don't have to create a text file listing all the scripts and files that you're going to work with; instead you just fill out a form and push a button to build your extension.

So we asked a handpicked set of developers to take a look at Safari extensions and see what they could do and I'm really happy to introduce you to a few of them and have them show you what they've done. So let's get started. Roustem Karimov from Agile Web Solutions, makers of 1Password is here.

Thanks Darin. Today every one of us has to remember many different passwords and to make sure all these passwords are secure. With our app you need to remember just one. We had just a few days to play with the extensions API and wanted to show some of the cool features that are possible with Safari 5. All information on 1Password is protected by a single master password and we're entering it right now to get access. This is the 1Password overview screen.

Everything you see here is built using open web standards. On the left, you see logins. They help you to quickly login to different websites. In the center identities they help with signing up for new online accounts and on the right credit cards. 1Password can fill them for you when you're shopping online. Okay let's say we're browsing the web and would like to check our email. Here we click on a login and instead of typing the URL, entering user name, password and clicking login button everything is done for us. As you can see [applause].

As you can see I was able to log in with just a single click. Great! Let's do something else. Let's try we want to create a new account at Apple Store. Again we can type everything ourselves but it's easier and much faster to simply drag and drop one of our identities.

Or you can try Wendy's identity instead.

Better! As you can see 1Password filled everything for you, it generates a strong password and all this data was saved in 1Password and the most amazing thing is just a week ago none of this existed. Let's applaud 1Password before we go.

Thank you.

Alright, Sandeep Gupta is here from Yahoo.

Thank you Darin. So hi I'm Sandeep. This is Michael we're here from Yahoo! to show you this extension we put together for new version Safari. So Yahoo! is the leading internet provider for sports, news and finance. So we thought it would be great to take a piece of that and put it into an extension bar so here's what we've got.

Here you see in the extensions bar all the quotes you usually track on the site and the easy way to get to. You can scroll through them individually, where you get the news headlines for that stock, or you can get the ticker mode. This is really so you can see how much money you're losing [laughter]. Usually it's my favorite mode.

Or you could click on a stock, it will take you to the finance page that you all know and love, you can click on a headline and go straight to that news article. It's that easy. Configuring this bar is just as easy. If I want to check out what's in my bar I could just go to the main site and then we automatically synch the bar to any stock you search for on the site before.

If I want to add a stock I simply search for it in the bar and it is automatically added to the bar, it's that easy. The goal here of course is making configuring the bar as easy as possible and getting access to information you need without the hassle. If you want to go further and dig more customized you go to details and from there you can manually add or delete stocks.

We also do a web search for you there just in place in case you want to look out what's on the web. So the amazing thing for us was how quickly this came together. We built on Yahoo's powerful YQL query language to cloud source all of this great data, then we hooked into the Safari extensions bar and there's full injected scripts to put this together in just a day or two. That's pretty amazing. That's it and I hope you get a lot of joy out of it thank you!

Just a few days, that's great. Charles Osborne from MLB Advanced Media.

Hi everyone I'm Charles Osborne this is Jon Ferrer we're from MLB Advanced Media and we are here today to show you the MLB Toolbar. The toolbar is a great way to keep track of the day's games and you see all the key information for each game in an easy to read and use toolbar so let's walk through it.

So I'll open up the tool bar you'll see the date, the score, if the game is live you'll see the inning, man on base indicator, and the count. One cool thing about the man on base indicator is if you roll over the base you'll see the players actually on the base [applause].

If you want to listen to the game you just click on the listen button and it launches the premium audio and stats app. If you want to watch the game, click the watch icon, it launches our MLBTV app. You'll see whose pitching; you'll see whose at bat and their records.

Now the toolbar automatically scrolls through the games in 5 second increments but if you want to pause on a specific game you just hit the pause button or you can manually go back and forth. Now another feature we really like about this and we're excited about is what we call live look-ins.

So what live look-ins are if there's something exciting going on right now in a game, let's say there's a no hitter in progress, we're able to broadcast a portion of that game to you live. So if a live look-in becomes available you'll see an alert come up on the tool bar, click the watch now button and the live look-in launches on our scoreboard page.

Love that. So using web standard technologies and the Safari extension API, we're able to pull this together with, you know it truly showcases some of the best of our live game coverage and multimedia capabilities in about two days, so that's the toolbar. Thank you very much [applause].

So next up Cabel Sasser is here from Panic.

Hello, hello! Super excited to be here right now. So at Panic we make an app called Coda and Coda is an all in one development environment, thanks clapping guy, for people who make web pages, for people who hand code web pages. So with Coda we feel like we're doing a pretty good job for the developer but when we first heard about Safari extensions we asked ourselves is there anything we can do for the client, the person who's paying the bills, or the marketing person, or the person who's most likely to leave you that voicemail and say hey I saw the new webpage but can you move that thing over to that other thing and can you make that one thing bigger and you know nobody likes getting those emails or phone calls so our idea for Safari extension is something we're calling Coda Notes.

So with Coda Notes when you click the new Coda Notes toolbar button you'll see that we've basically added some new features to Safari that let you annotate web pages right within the browser. So I can pull up our webpage and you know circle our logo and make a note that it's pretty old because it is and I would like to change it. We have a highlighter here so I can highlight a couple of sections.

We have of course sticky notes so I can come in here and say you know make the logo bigger, or you know add as many of those as you want on a page and one interesting thing that we did is we added a live text tool so there are times when marketing wants to change copy on a webpage but designers and developers are concerned about how that's going to look, like I only want it to be two sentences, don't put a bunch of words in there. With the live text tool you can come in and actually edit the text on the page directly, see how it looks right on the webpage without any technical knowledge whatsoever.

So I've done a...

I've done a pretty terrible job annotating this webpage so I will click the send notes button and without even leaving Safari it shrinks down onto this little postcard, you can add your comments, here's what I'm thinking, [applause] thanks, set your recipient, set who it's from, click this nice looking send notes button, of course the stamp comes down

I don't know why we did that yeah and that's it.

Yeah it's off, the developer gets an email with a screen shot of the annotation which is something we could never do before, thanks to the extensions we can actually take a screen shot of the tab, they can see my notes, they can see my drawings and in just a few seconds I've accomplished something that would have taken a long time to do before. So for us this took four days but that's cool but to me way cooler than that is the fact that we added a feature to Safari.

I mean that's unheard of. We did it in a way that's clean, it's not hacky, it's using web standards and you know we added something to the functionality of the browser. So that is awesome and we think you guys will also find it awesome so thanks for listening.

Beautiful, beautiful. Alright, Michael Gundlach is here from BetaFish.

Hi everybody. So the BetaFish thing is a lie actually they just needed something to put on the screen there. I'm a freelance developer. I'm the author of AdBlock for Chrome so I've been working on AdBlock since about December. It's getting more and more users. I'm not supposed to tell you how many users but it's the most popular extension for Chrome and over the weekend I ported it to Safari. So let's take a look.

So here's a page that had some ads all over it across the top on the sides and stuff and let's see how it looks when we turn on AdBlock.

So the cool thing about AdBlock is that unlike other extensions that you use for a particular task or on a particular website AdBlock is kind of a no brainer. It's a fire and forget you turn it on and by default it sucks down list of ads from the web and keeps it updated fro you so hopefully you'll just forget you have it installed at all, it just makes the world a better place. So we'll turn it on, we are protected, thank you AdBlock let's see how this works. Now we'll reload this page now that we turn on AdBlock and hopefully it will look better. There we go. Okay [applause] let's do the before and after here.

We have before we have some sort of flying toaster something and after that's much better. So not only does this look better, it actually loaded more quickly as well because there's a feature in Safari that isn't in Chrome yet which is you can prevent resources from being downloaded if you don't want them so in my case anything that's an ad we don't download yeah pretty cool [applause]. So this is good for your bandwidth. This is good for your bandwidth. It's good for your load time.

I did a test on Saturday on a domain and it took it 8.5 seconds to load the page with ads and with AdBlock it went to 1.5 seconds, just didn't download those resources, it's pure savings. It's also better for your privacy because you're not downloading things like web trackers that let people know that you're on the page. So in addition to the standard stuff that you get for free just by installing AdBlock if there's something you don't like on the page then you can block it with our custom blacklist rules.

So you can make a new blacklist rule and just say I don't want to see this part of the page. If you don't know AdBlock Plus's filter syntax or CSS selectors that's OK because most of our users are casual users, so we made a wizard for them to do this. So let's open up the blacklist wizard here.

Show the blacklist wizard and I just click on the thing on the page I don't like so maybe I don't like this launch this slideshow thing let's see how this works and the cool thing is you have this slider you just say how much of the page you don't want to see so maybe I'll say that I don't want to see the article body, maybe I don't like articles on this place, so it looks good.

Thank you blacklist wizard and it re-loads and now that's gone forever so you didn't have to know how to do CSS selectors, you don't have to do the filter syntax, it just works and if you are advanced you can create arbitrary blacklists and whitelists entries on your AdBlock options page.

So I don't have time to show you all of the options but I wanted to mention one thing in the options which is that if everyone hates image ads, everyone hates flash ads but if you like text ads and find them useful, and a lot of my users do then you can turn them on with one click here, I actually find it nice when you do a search on Google to see text ads so this way don't have to go searching through your filters to find what is or isn't related to text ads. Okay that's all I have time for. You can go to safariadblock.com later today to get the code.

Also I have a porting library if you want to use it to port your Chrome extensions to Safari it abstracts all of the differences between them and finally I'm one guy. I don't have Yahoo! behind me so I would love your help. This is open source and you could work on a common code base for Chrome and Safari and help lots of people who have this installed and make the world a better place. Thanks very much.

So just a few days these guys did all of this amazing work. Imagine what you can do. So Safari extensions: Customize Safari and modify web pages, install without quitting the browser, one click to turn it off, built with the same HTML5 standards that you use to make web pages, secure and a free developer program.

Well that's Safari 5. Over a dozen new HTML5 features. Blazing fast performance, fastest browser in the world, Reader, new options for search, improved developer tools and everything you need to develop Safari extensions.

So I'm pleased to announce that Safari 5 is available for download today.