WWDC2013 Session 600

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ Silence ]
>> Hi, everyone.
Good morning.
Welcome to Session 600.
What's new in Safari and
WebKit for Web Developers?
I'm Beth Dakin and
I'm an engineer
on the Safari and WebKit team.
So, most of you probably know
that WebKit is the engine
that powers Safari
on all platforms.
It's responsible for loading,
parsing, interpreting, managing
and rendering web
content in Safari.
But not just Safari, you may
not know that WebKit is used
for key parts of user
interface and many
of the core apps
on OS X and iOS.
And of course WebKit is
used in a ton of apps
that are in the App Stores.
Many of you are using WebKit
for your website's apps
and digitals books.
So, it's important for you
to know about the latest
and greatest WebKit changes.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You're probably wondering
what we've been up to.
Well, WebKit is a thriving
open source community
where there have been over 3,000
changes since last year's WWDC.
So, there is a lot
to talk about.
We couldn't possibly cover all
of these topics in the next hour
and the number of these
things will be covered
in sessions later this week.
For this session, we have chosen
a subset of these features
to talk about that generally
fall into three categories.
First, we'll talk about some
exciting layout features
that are steps towards a future
where the web will be able
to replicate rich
magazine-like designs.
Then we'll discuss
some new media features
that offer enhanced
accessibility
and better integration
with other devices.
And finally, I'll tell you about
a bunch of smaller enhancements
that I think you'll
find very handy.
Before we dig in, I want
to take a moment to talk
about the dash WebKit prefix.
This is a technique that
we've been using for years
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to shipped experimental features
and production builds
as soon as possible.
It's really not safe to ship
a new feature without a prefix
until the specification
that it's in has matured
and the standards group
decides that it's OK.
That's often long after we have
a useful working implementation
so using this technique, these
features into your hands today.
Since we're talking about new
things today, you're going
to see this prefix on
a lot of my slides.
OK. So, again, we're going to
cover new features in WebKit
that generally fall into three
categories, new layout models,
media features and enhancements.
My goal is to give
you an overview
of all the exciting things
that are happening in WebKit
but this isn't going to be a
high level overview session.
We're going to dig in to these
technologies and you're going
to leave here today
ready to use them.
So, let's begin with
new layout models.
OK. I like to cover
three topics here today.
First, we'll talk about
Columns and Pagination.
Columns are obviously
very fundamental
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in Print Media Designs so
if you want your platform
to have rich layout like
Print Media then you need
to support Columns.
Next, we'll talk
about CSS regions.
This is a cool new
technology that makes it easy
to create Advanced Layout
templates in CSS for articles.
And finally, we'll talk
about Flexible Boxes.
This is a new CSS layout model
that makes it really easy
to create layouts that
have been popular for ages
with many fewer lines of code.
So, we'll begin with
Columns and Pagination.
Columns aren't actually a
brand new feature in Safari.
We've been shipping an
implementation for a few years,
but I want to go over them
briefly because we've never talk
about them at WWDC before
and because I think knowing
about them provides some
good background information
for our new iOS Pagination API.
So, when I talk about
Columns I'm referring
to CSS multi-column
layout defined
in the W3C's multi-column
layout specification.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Having a way to create rich
magazine-like designs has been a
goal and the browser and web
standards communities for years
and this came out of some
of those earlier efforts.
The concept is very simple.
The idea is just you can add
some CSS to this document
with just one line of CSS,
you can make this article
lay itself out into Columns.
There are few reasons
why this is compelling.
First as I mentioned
earlier Columns are essential
to mimic Print Media Design
but they really do offer more
than just visual interest.
It's actually quite
difficult to read really,
really super duper
long lines of text.
Your eye tends to get lost.
So, breaking text up into narrow
or columns can make
things easier to read.
Of course, most web pages
nowadays deal with that problem
by having a single relatively
narrow column for all
of their text and leaving lots
of white space on either side
or even we're spilling
up with adds,
but Columns do offer an
alternative design there.
So, the syntax is
incredibly simple.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
All I have to do is to start
laying out into columns is
to set a column width
or a column count either
of those things, you know, just
start laying out into columns.
So, there are a bunch of other
CSS properties that you can use
to style columns further and
really control the design.
I'm not going to dig
into this right now
because as I mentioned
I really want to focus
on brand new features.
There's a lot of
interesting use in Columns
for a paginated layout these
days especially on iOS.
Magazine-like layouts and
paginated apps are so popular
and so effective on iOS that
in iOS 7 we've decided to add,
some API to UIWebView that
lets you do this easily.
So, I'll explain at a high
level what the API does
and then we'll dig
in to some code.
All right.
So, the high level, this is
a UIWebView is a really long
document and of course this
document is long enough
that if I were looking at it
on a device I have to scroll
around to see the whole thing.
So, if we take this
really long UIWebView
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and set pagination parameters
on it using the new API,
then the document would break
itself up into section based
on the exact parameters
that I've set.
So, obviously, this is a very
simply design and something
that we could easily
achieve with CSS.
So, let's talk about
why you might want
to use the API instead
of using CSS.
So, this API is for
you if you want
to paginate your entire
UIWebView as a whole
and it's also for you if you
don't control the content
that your app displays.
And either of these situations
using this API is better
than injecting a Style Sheet
with some CSS column properties
because this way you can
avoid fighting with the styles
that are in the content
that you're paginating.
This is sort of just
a nice abstraction
between the overall
layout of our app,
something that paginates and
the content that is paginating.
OK. So, this is what
the new API looks like.
First you opt into or out
of pagination on UIWebView
by setting the pagination
mode parameter.
This property-- excuse me,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
this property takes an
enumeration as a value.
I'm using the value that
will paginate the pages
from left to right.
There's also a value that will
paginate from right to left
which you'll probably want
to use if you're content is
in a right to left
language, and there's a top
to bottom and bottom to top.
Next, I'm setting
the page length.
The page length corresponds to
the size of the page container
and the direction the
content is flowing.
Since I'm using a
horizontal mode that means
that the page length corresponds
to the width of each page.
Next, I'm setting the page gap,
it defaults to zero,
I'm setting it to 25.
And finally, I also want to set
the pagination breaking mode.
This is another property
that takes an enumeration
for a value.
There are two values,
page mode and column mode.
If the content that
you're paginating happens
to use any column related
CSS properties like the ones
that I enumerated a few
slides ago then the value
of this property will determine
whether those styles are honored
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or ignored.
So, that's-- this new API.
There's also a way to fetch
the total page count and note
that the API does not cover
a special interaction model.
So, by default, you'll
just be able
to scroll from page to page.
You may want to add a special
interaction model up to you.
OK. So, CSS Columns that have
been around for a little while,
iOS, API to paginate a
UIWebView is brand new.
Both of these technologies
provide a straight forward way
to get your content
laying out into columns
which is really a corner
stone of magazine layouts.
OK. Let's talk about
CSS Regions.
These are defined in the
W3C CCS Region specification
and they allow you
to indicate that some
of your markup is defining an
overall layout for your design.
So, think of that is
like a design template.
And they also allow you to
indicate that a different part
of your markup is being used to
define the content that you want
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to flow through that layout.
So, think of that
is like an article.
So, you'll have one
part of your content
where you're using block-level
container elements such as DIVs,
you'll arrange them and whatever
overall layout you want.
So, maybe you want to call
them say, you'll set them
up something like this, but you
can get a little crazy here.
Remember, I promise
magazine-like layouts.
So, maybe you want to
design more like this
where the blue block is an image
and you have a few different
blocks that surround the image
and you want your text
to flow through them.
Or maybe you want
a slight variation
on that design either way you
have one area of your markup
where you're using
block containers
to create a template
for your design.
And then you have
another area of markup
where you're defining
your content.
This is my article that I
want to fit into that layout.
So, if we take this design
and I use CSS to indicate
that the purple boxes
are meant to be regions
and I also indicate that
my article is the content
that is meant to flow through
these regions then instead
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of laying out just in a normal
document flow like this,
instead of that the
article will actually flow
through this regions.
So, I don't need to know
in advance which bits
of text will fit into which box,
that's a huge part
of what regions are.
When one region fills
up the content will just
continue on in the next.
So, this is really cool.
I think it makes it really easy
to treat your overall layout
and sort of a template that you
could reuse for other articles.
So, let's look at some code.
So, this is what my
markup looks like.
This is the markup
for my article
and here's my design template.
These are the regions
within that design template
and here's my image,
its interleaves
with the regions that's
fine, the regions don't need
to be contiguous
in the document.
Each of the reasons was
styled a little differently
with different widths
and heights
and different positioning so
I've given them a unique ID
so that I can control that
bit of styling with the ID.
I've also given them
a shared class name
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
so that they can share the CSS
that actually does
turn them into regions.
So, let's take a look
at what that looks like.
It's just one line of CSS,
I've truncated my markup here a
little obviously but all I need
to do to turn these boxes
into regions is top set the
flow from property in CSS.
So, takes an identifier for a
value so this is just a name,
it can be any name
that you choose.
I've given it a somewhat silly
name here, Pizza Manifesto just
to emphasize that this is
a name of my own choosing.
Now, I only have to do is
to indicate that the article
as the content that we want
to flow through the regions
and that is also very
simple again just one line
of CSS flow into property.
And note that I've given it
the same name that I gave
to the flow from
property, that's the key
that ties this 2 bits
together, that's what's says,
this is the article that's
flowing through this regions.
And that's all that I need
to achieve this unique
layout right in the browser.
So, another really cool
thing about regions
as it you can style content
based on which region
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that it's flowing through.
So, for example I can make
whatever content happens to fit
into my second region
have green text.
So, this will apply style to
just a fragment of the document.
And the CSS for this is
quite simple as well,
just using the @-webkit-region
rule.
And I'm supplying some style.
So, our implementation of
course is evolving along
with this spec right now.
We only support styling
background color and color
for a region styling but the
spec does indicate more values
should be supported so
as things evolve I'm sure
that will be picked up.
So, I feel like regions
really come to life
when you actually
interact with them.
So, I would like to invite
my colleague Enrica Casucci
on to the stage to show you
a bit more about regions.
[ Applause ]
>> Hi everyone.
My name is Enrica Casucci
and I'm an engineer
on the Safari WebKit team.
So, I prepared for you an
interactive region state mode
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to show you how flexible and
powerful CSS regions are.
Of course, since the theme of
the presentation is about pizza,
we will continue
along the same lines.
So, what we have here is
a fairly simple content
because I think it'll make
it easier for you to focus
on the flow of the content
without additional
visual distractions.
What we have here looks
like just like a page
that uses columns but
these are actually regions.
As Beth mentioned before,
columns can be considered a sort
of very constrained
type of regions.
But these are regions as I said
and they are a lot
more powerful.
So, I will start by
clicking on this gear icon
and we'll see the outline of
the three regions we have here.
The numbers on each
region indicate the order,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
the content flow
into the regions
which is actually the order
in which the regions
appear in the DOM.
So, the content flows
from its original element
into the first region here
and when that one fills up,
it flows into the second one and
it moves over to the third one.
As you can see clearly here at
the bottom of the third region,
we have more content that we can
fit into these three regions.
So, let's look at what happens
if I click on the Add button
and add a fourth
region and I'm going
to position it here
at the bottom.
As you can see, the
content has flown directly
into the fourth region.
So, using CSS regions allows you
to create a responsive layout.
You have more content, it flows
into the next region,
very, very simple.
To make it even clearer how the
content reflows from one region
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to another, pay attention as
I resize the region number one
and keep an eye on the MOG
and you will see the content
reflowing from region one
to region two to
region three and so on.
So, extremely simple.
So, now that we have a feel for
what we can do with regions,
we'll try to create a
nice layout for this page.
So, let's start by removing this
region and what I really want
to do is add a placeholder
for an image.
So, I'm going to reposition
this one here and I'm going
to move this one off to the side
and I can actually
resize the top one
to stretch it all the way across
the width of our viewport.
And then, I can add
an image placeholder
where I will later position
my image and stretch that over
to meet the region number 2.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So, what I want here
at the bottom is
to have like a two columns.
So, I'm going to add a
fourth region and resize it
and position it down
here and we'll try
to make them roughly
the same size.
OK, so that looks sort of OK.
Now, we can click on the gear
icon and remove the overlays
and now we have our
new layout very easy.
So, the markup and the CSS
behind this example is very
simple whereas previously,
you would have used CSS
to position your
content directly.
With regions, what you do is
position the region containers
and tell the content
to flow into that.
So, you have a very
responsive layout.
It's very easy to
manage and as the size
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the viewport changes,
all you have
to do is reposition your regions
and you don't have to worry
about repositioning your content
because it will flow
directly into the regions.
So, the content that appears
in region you can interact
with it the same way you
would interact with content
in any other type of element.
So, for example, I can select
text from the first region
and extend my selection and
the selection will continue
in the order in which
the content has flown
which is dictated by the
order of the regions.
So, since you don't have
to worry about relaying
out your content, you
can even do things
like increase your text size
and the content will
reflow automatically.
Very, very easy.
So, before I turn
it back to Beth,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I'd like to show you a
page that I've prepared
where I view CSS regions
to create a magazine
quality type of layout.
Again, this is about
pizza as usual.
So, this is my blog about pizza.
I'm very passionate about the
subject and as you can see,
I have a fairly sophisticated
layout where I go
from one column over to two.
I have images down back to
one single column and then
over to two, fairly rich layout.
But the most amazing thing about
this is actually the source HTML
that I would like
to show you here
because this is a very,
very simple markup.
We have our section here
that contains our entire text
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and the text is simply
divided into paragraphs.
All the part that pertains
to the actual layout
of the article is
in this section
where we position our regions
and images insert other DIVs
and we achieve this way,
a complete separation
between the content
and its presentation.
I hope I was able to share
my excitement for CSS regions
and I really can't wait to see
what you'll create with them.
Thank you.
[Applause]
>> Thank you Enrica.
That was really cool.
So, hopefully that
gives you an idea
of how powerful CSS regions are.
I think they are awesome.
I think they are
huge step forward
in creating really advanced
designs really easily.
OK. Let's talk about
flexible boxes.
Flexible boxes are defined
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in the W3Cs Flexible
Box Layout Module.
They are often just
called Flexbox
and this is a layout
model that's more similar
to layout models that you
often see in Native UI.
So, think springs and struts.
So, Flexbox is all about laying
out elements inside a container
so that they either
grow or shrink
to fill the available space.
And there are set of
properties that you can specify
on each element to indicate
how they should grow
and shrink relative
to other elements.
So, I've been calling Flexbox
a new feature in Safari.
But those of you who have really
been paying attention might know
that we have been shipping an
implementation since Safari 5.1.
That is true, but that syntax
and that implementation
is deprecated
and there is a new syntax
and new implementation new
in the new version of Safari.
So, if you're using the
old stuff, I encourage you
to please migrate your
code to the new stuff.
You should get better
performance and of course,
that's the version that
we will be improving
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and maintaining going forward.
But do note that it's
not a simple rename.
So, there is-- are some
behavior differences.
So, definitely, migrate
your code
but do migrate it carefully.
So, I think that this
app is a great example
of Flexbox in action.
This app should look
familiar to you.
It's the Mac App Store.
And all of the apps
in this grid here,
this little AppGrid are
implemented with Flexbox so that
at any window size, this layout
looks really nice and clean.
Now, of course from
a design perspective,
this layout isn't new.
Layouts like this have
been around for awhile.
But actually, achieving
a layout like this
without Flexbox requires a
whole lot of code to sort
of manipulate the block layout
and inline layout models
to like mashing together in a
way they don't really want to.
It actually gets
quite complicated.
So, let's analyze this design
so that we can discuss why this
is difficult without Flexbox.
All right, first of all at
the smaller window size,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we can clearly see that
there are three boxes
in each row of the AppGrid.
And this hero image at
the top is sized to be
about the same size
as the AppGrid.
It's aligned on the left.
It's actually a little
bit bigger.
On the right, it goes up
to this right hand column.
All right, at this
bigger window size,
we can see that now
there are four boxes
in each row of the AppGrid.
Here our image is still
sized relatively the same
to how it was with the AppGrid
before aligned on the left,
a little bit bigger, it goes
up to the right hand column
on the right and then the
right-hand column stayed the
same size.
And if we go back to that
smaller window size and look
at a window size that's
only slightly bigger,
we can clearly see that each
box in the AppGrid has grown
to fairly available space
even though there is not
yet enough room to add a fourth
box into each row of the grid.
So, all of this, it's always
filling the available space,
reflowing when possible,
and doing all of that
up until a certain point
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
at which time it's
reached some maximum width
in any additional space
just creates a margin
on either side of the window.
So, if you're going to
do this without Flexbox,
you would probably use CSS
float left for most of the boxes
in the AppGrid and then
you'd have like a whole bunch
of JavaScript to compute
the width of everything.
But that math would actually get
quite complicated as it interact
with the fact that
you're floating things
because the exact math depends
on whether there are three
or four boxes in
each row of the grid.
It would get very complicated.
It would be a whole lot of code,
it would probably require
more than a few hacks.
But Flexbox was invented
to solve this problem.
This is what Flexbox does.
This is its bread and butter.
So, let's look at the code.
So, as I mentioned, Flexbox
is all about elements growing
and shrinking inside
of container
to fill the available space.
So, these are the CSS
properties that you want to set
on the container itself.
So first, you definitely want
to set the display property
to either flex or inline flex.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And now, it will indicate
that this is a container
that will contain
flexing children.
You can also indicate
the flex-direction.
Here I'm using the
row direction.
This will cause my elements in
this case to layout from left
to right horizontally.
There is also row reverse
for right to left layout.
And if you want the
vertical layout,
instead you would use a
column or reverse column
for bottom to top layout.
So, those are the two
properties that you want
to specify on the container.
But the flexing magic really
happens with the children.
So, let's look at
properties that you want
to specify on the children.
So, there are three properties
that you can specify there.
First, you can specify
the flex basis.
This is the initial size
of the element before any
free space is distributed.
So, in this case, since we're
laying out in the row direction,
that will correspond
to the initial width.
If we were laying out
in the column direction,
it would correspond
to the initial height.
And in fact, in this case, if I
didn't specify a basis at all,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
then the basis would default
to be whatever the width was.
So, sort of think of it
as your size property.
So, in this case, let's say
that this container
is 600 pixels wide.
So, given the basis that I have
assigned to my triplets here
and the basis I assigned
to my big element,
once you include their margins,
this fits perfectly inside
this container right now.
There's no growing or shrinking.
When extra space does
become available,
how the elements change
their size will be based
on the flex grow property.
So, this is used to determine
how the elements should grow
when there is extra
space available.
So, it's kind of like a ratio
and bigger numbers here mean
that the element
wants to grow more.
So, in this case, I have
specified a grow value of zero
from my triplets which means
that I don't want them to grow
at all and I have specified a
value of one from my big element
which means that I wanted
to share extra space evenly
with other growing elements.
But in this example, there
are no other growing elements
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
so we'll take all of
the space for itself.
And when there is not a
lot of space to go around
and things need to
shrink down to fit,
how they do that
will be determined
by the flex shrink
value property.
So here, this is also of sort
of like a ratio, like flex-grow.
But with flex-grow
bigger numbers mean
that the elements
want to grow more.
Here, bigger numbers mean the
elements will shrink more.
So, I've given a shrink
value of one to my triplets
so they'll shrink evenly
and a shrink value of zero
to my big element because I
don't want it to shrink it all.
So, this is a really
quick overview
of how flexing works in Flexbox.
I can also simplify this
code using a Shorthand.
These values in the Shorthand
are ordered grow shrink basis
in that order.
But before we do move on
to Flexbox to other things,
I want to mention one more thing
that Flexbox is really
great for.
So, it's 2013 and CSS has
finally provided an easy way
to center something.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
As I'm sure you all
know [applause]--
I'm sure you all know it's
been shockingly difficult
up until now to center something
in CSS especially if you want
to center it vertically.
But Flexbox actually makes
that incredibly easy.
So, here in this example,
I wanted to center my darker
gray box inside the bigger light
gray box.
So, all I had to do was indicate
that the bigger box
is a flex container
and give my smaller thing that
I want to center margin auto
and that will truly
in all cases actually
for real center this box.
So, that's an overview
of how Flexbox works.
It really just scratches
the surface.
We could have an entire
section about flexible boxes.
There is a ton of stuff there.
So, I really encourage you
to go out and learn more.
I mean, even just
speaking of centering,
there are to Flexbox
specific CSS properties
that would also allow you to
center but can also be used
to just have much
finer grain control
over how things are positioned,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
aligned items in
justified content.
There is just a ton of stuff in
that spec. It's really great.
So, with these technologies
I really feel
like WebKits made huge
strides towards the future
where it will be able to
replicate really rich designs.
I'm really excited
about this stuff.
We're definitely still
working on all of these things.
So, I encourage you to play with
them, see if they work for you.
File bugs if you find any.
Let's move on to talking
about media features.
So, we'll cover two
topics here today.
First, we'll talk about
the iOS AirPlay API.
And then we'll talk
about styling captions.
We'll begin with
the AirPlay API.
So, we've been shipping
the HTML5 audio
and video elements
for a few years now.
They have been widely
adopted especially
for content targeting iOS.
And in sessions at past WWDCs,
we've talked extensively
about the many things
that you can do
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with these elements including
how you can use JavaScript
to create custom controls.
So here, I'm showing that the
default controls on iOS 7.
But there are some
great examples out there
of custom controls like this
HTML5 showcase video that's
playing inside a really cool
sublime video player made
by the folks of Jillian
[phonetic].
Their video players
are really great.
They are fully HTML5,
fully integrated
with iOS, all retina ready.
They're really, really cool.
But there is one thing
that's been missing
from videos with
custom controls.
If we go back to our default
controls, you'll see it,
it's the AirPlay button.
Up until now, if you chose
to create custom controls
for your video, you had
to miss out on AirPlay.
That is until now in iOS 7.
I'm really excited for
all of you with videos
that have custom
controls to adopt this.
This is going to be great.
So, this is some
really simple markup
for a video with
custom controls.
The video element itself is
lacking the control's attribute
and so that's how you
know that we intend
to provide customer controls.
And here I have some controls
for our Play and Pause button.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Custom controls are
really powerful.
You can have way
more than just a Play
and Pause button I encourage you
to look at past WWDC sessions
if you want to learn more
about custom controls.
But right now, we're just
going to focus on AirPlay
so we're keeping it simple.
And the first step to
supporting AirPlay here is
to actually add an element
for the AirPlay button.
Note that I've hidden
it by default
because I want my custom AirPlay
button to match the behavior
of the defaults AirPlay
button which means
that the button will only show
when AirPlay is available.
And for that matter,
I only want it to show
when the AirPlay
API is available.
So, here's some code that will
make it show at the right time.
Here's my feature detection.
This will make sure
that API is available.
And here, I am using
some of this new API.
This is a new event that you can
listen for on the video element.
It's called WebKit Playback
Target Availability Changed.
This will be called
whenever AirPlay availability
has changed.
So, whenever a new Apple TV
has come on to the network
or when one has left
the network.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And it's also guaranteed--
this event is also guaranteed
to fire soon after you
register for listening for it.
So, you don't have to worry.
This code will run when you're
just setting everything up too.
So, this is the function
that I want
to run whenever this event
fires, very straight forward.
Whenever AirPlay is
available, I want to show
and enable that button.
And whenever it's not available,
I want to hide and disable it.
So, there are some battery power
considerations with listening
to AirPlay availability.
So, you want to be a good
battery power citizen
on the system.
So, you should stop
listening for this event
when you no longer
care about it.
So, maybe when the
video stopped playing,
you can stop listening
for the event.
So, that's all we have to do
to get our custom
AirPlay button showing up.
Always at the right time too.
But we haven't made
it do anything yet.
So, here's some code to
make it do something.
First, I'm starting with
my feature detection.
Then down here, I'm
adding an EventListener
for the click event
on that button.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And whenever that
button is clicked,
I'm calling another new piece
of API on the video element.
This is WebKit Show
Playback Target Picker
and this will make
the native AirPlay,
a root picker actually show up.
So, that's all we have to do
to get our AirPlay
root picker to show up.
There is one more
part to this API.
If we go back to the
video of custom controls,
you can see that when this
video is playing over AirPlay,
that AirPlay button is actually
styled a little differently.
So, this last piece of the
API will let you emulate
that behavior with
your custom controls.
OK, here is the code for that.
This is another new
event that we can listen
for called WebKit
Current Playback Target is
Wireless Changed.
So, this will be-- this event
will fire whenever a video has
started or stopped
playing over AirPlay.
And I'm just updating some
styles whenever that changes.
OK, so that summarizes the new
AirPlay API available on iOS.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Let's talk about
styling captions.
So, providing captions with
your video is a great way
to widen your audience.
Captions are essential
for hearing impaired users
and they are great for users who
don't understand the language
that your video is
spoken in as well.
WebVTT is a file format
for captions defined
in the W3Cs WebVTT
specification.
We added support for WebVTT
captions in our last release.
And there's another session
happening this week that digs
into the topic of captions and
general including HTML captions.
And if you're really interested
in this topic, I encourage you
to attend that session
and learn even more.
So, there are few things
that we nearly support
with captions in this release.
First of all, we'll support
WebVTT that's embedded
in the movie file itself.
In the last release, we
only supported captions
that were in their own file.
And we've support
styling captions
with the Cue Sudo element.
There are a limited
set of CSS properties
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that you can use
to style captions.
But I think you'll find
they still offer a lot
of flexibility.
And I would like to invite
Enrica back to show you how
to style the captions.
[Applause]
>> Thank you Beth.
OK, here I have a video for
you that I'm going to play.
[ Foreign Language ]
Many of you probably do not
understand what I'm saying
since I'm speaking Italian.
So, for this reason, I'm going
to turn on the captions here
so that you can follow the
lesson on the croissant making.
Oops-- yes.
[laughs] OK.
This video actually has
support for multiple languages.
In fact, I can click
on the caption button
and switch the text to French
and I also have captions
in Italian.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The system will remember the
language that I choose here
as my preferred language.
So, that next time, I play a
video that has caption will try
to provide caption in that
language if they're available.
So, I would like to
show you how easy it is
to add captions in
another language.
My friend Anders [phonetic] has
kindly provided me with a text
in Swedish for this video.
So, we're going to add
Swedish to this video here.
So, let me bring up the
source for this page.
In here we have the
video element
that contains currently a three
track elements one for each
of the languages that
we currently support.
If I want to add
another one all I have
to do is add another track
element have the source
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
attribute point to the VTT
file that contains a text
in that language and the source
length attribute indicate what
language that is.
So, I'm going to save this
one and reload my page
and we can play the video.
And now, we'll have
captions in Swedish as well.
Extremely simple.
As Beth mentioned in order
to have captions that we need
to embed them in
the video stream.
And what we have to do
is author a VTT file.
Authoring captions can be a
fairly a time consuming task
but the format of the file
for VTT is very simple
and intuitive.
In fact, the VTT file is a plain
text file that you can author
with your favorite text editor
and its format is very simple.
Each entry of the VTT file is
one corresponds to one line
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the caption and
for each one--
you specify, the start
time and the end time.
Extremely easy.
With the new version of Safari,
we have added the ability
to style the captions.
In order to do that we can
use styles we added to our CSS
to style the Cue Sudo element.
So, let's go back to our source
here and add a rule for the cue.
We want to change the color
of the text to be yellow.
We want to use a different
font and a larger one,
and we want to add a
shadow to the text.
So, once we have done this.
We save, and we reload our
page, and we start playing.
And now, the caption have
a different look and feel,
extremely simple
but this is not all.
You can also style
separately individual elements
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the captions by
defining rules
that you applied
directly to the VTT file.
So, let's imagine we
want to emphasize.
For example, some words
in our caption stream.
So, what I'm going to do, I'm
going to add an emphasis rule
where the text is going to
be shown with the color red.
And then, I'll go
back to my VTT file.
And what I want to
do is highlight
for example the word dough
sheeter [phonetic] here.
So, here is what
I'm going to do.
I'll add the rule
right to the VTT file.
I will now save it
and reload our movie
and when I start playing
it the word should show
up in the second caption
and it should be red.
Very easy.
[Applause] So, this
is all for our demo.
I'll give it back to Beth
to continue the rest
of our session.
Request Timeout
The server timed out while waiting for the browser's request.
Reference #2.c6524817.1373787861.0
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
which comes in all of this
different variants depending
on what you're using
the text for.
And of course there's
a system wide setting
where the user can control what
size of the font is comfortable
to them and that will be
reflected in all of the apps
that are using dynamic type.
Well, I'm delighted to
tell you that you can opt
into using dynamic
type in WebKit on iOS.
So, that you're app and or
your websites can reflect all
of those settings that
the user has selected
and it will really mix in with
the look and feel of iOS 7.
So, we've added a bunch of new
values to the CSS Font Property.
They can reflect all of
these different types of--
all of these different
variants of the dynamic type.
And so here I'm showing
them in the larger font size
but if the user selects the
medium size or small size,
the WebView will
honor that setting
and it will update dynamically
whenever the user changes
the setting.
So, this is a nice little
way to integrate with iOS 7,
if that's a goal
for your content.
So, if you had a
chance to browse the web
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with Safari 7 yet, you
may have noticed the text
on websites looks more
beautiful and more readable
than ever before and that's
because we've enabled kerning
and ligatures by default.
So, you don't have to do
anything to opt into this.
This is on automatically
for all websites.
If you're not familiar
with these technologies,
these are two different
technologies
that make text more readable
by adjusting the amount
of space between characters.
So, kerning will actually
programmatically adjust the
amount of space between glyphs.
So, here's a series of
glyphs with no kerning
and this is what the
same text that looks
like with kerning applied.
You can see that glyphs
are much closer together.
It's much easier to tell that
they're meant to be a part
of the same admittedly
made up word.
Ligatures on the other hand
are actually specially glyphs
in the font itself
that combine two
or more characters
into a single glyph.
So, FI is a classic example
here on the left to have F and I
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as two separate glyphs and
on the right is a glyph
for a ligature that
combines F and I.
That's a really common ligature
if a font contains
any ligatures at all.
It usually contains one for
FI, but some fonts contain lots
of other ligatures too lobster
is a great example of a font
with lots of interesting
ligatures.
If you look at the
FIX and fixing--
oh, and the top row there has
no kerning and no ligatures.
Bottom row has both.
So, we can see the FIX
and fixing the transition
between those letters and
the bottom row is just
so much smoother, it's
using that ligature instead
and the EX an example is another
great example or the transition
between those letters is just
so much smoother using the
ligature, so much less jarring.
So, over the most part we
think that this change is going
to be a huge win for
you and your content.
Everything should just look more
beautiful but as you can see
on these slides sometimes
when kerning
and ligatures are enabled,
text will take up less space.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So, if you were expecting your
text in your app or your website
to be some exact size it may
be different now that kerning
and ligatures are on by default.
And if that's a problem for you
that you want to fix as soon
as possible, you can
disable them using the WebKit
Font-Kerning CSS Property
and the WebKit
Font-Variant-Ligature
CSS Property.
So, those are two nice
little font enhancements.
I think both are huge when
it is for readability.
Let's talk about
some new CSS things.
So, Safari 7 now supports the
CSS Calc Function from the CSS--
the W3C CSS Values and
Units specification.
So, this is an incredibly
useful new feature and we know
that web developers have been
clamoring for it for years.
This will allow you to define
any numerical CSS value in terms
of a mathematical equation.
So, you can use addition,
subtraction, multiplication,
division, and you can even
mix units like I'm doing here
or I'm setting something to be
100 percent minus 80 pixels.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Our clients at Apple have
already started using this
and they've come back
to us just so excited
about how much calc has
simplified their lives that's--
let people get rid of lots of
complicated JavaScripts that had
to run on resize much
easier code to follow
and they've been telling
us they're getting better
performance out of it as well.
Another cool new CSS
Property's WebKit Clip-Path
from the W3C CSS Masking Module.
It allows you to clip
an element to a path.
So, for example, in my
Pizza Manifesto I could clip
that image to a shape.
The syntax is really simple.
It takes a shape as
a parameter defined
in the CSS Shapes Module.
The first two numbers here
are the X and Y coordinates
for the origin of the circle and
the third number is the radius.
And there are few other shapes
that we support right now,
rectangle, ellipse and polygon.
OK. So, those are two
cool new CSS features.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
There are so many more I wish
that I had time to
tell you about.
One of my personal favorite
CSS enhancements that's not
in this slides is that
they've added a new value
for the position property
called WebKit Sticky.
It's really, really
cool and super useful.
My colleague Simon Fraser
will be covering it tomorrow
in his session about power
and performance in Safari.
So, I strongly encourage you
to go to that session and learn
about sticky position.
All right.
Let's talk about graphics.
So, we've also added a
few new JavaScript API's
for the HTML Canvas Element
that I'd like to tell you about.
We now support name blending
modes for compositing colors.
So, if one really simple
line of JavaScript,
I can composite these colors.
I just want to set the
global composite operation
to a named mode.
Here I'm using multiply,
there are number
of other name mode as well.
Another super cool new canvas
API is the path object.
So, this is a great new API
that will let you store paths
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as variables up until now
if you were creating paths
and canvas you could
only have one at a time.
If you wanted to create a new
path then you would lose your
old one entirely.
So, this is a really
trivial example
or I'm just creating two paths
upfront and drawing them later.
Another great part of
this API is that they're--
is going to really
simply hit testing
with the path object
you can just ask it,
is point in path that's a
function, that's prior to API
to hit jus that path up
until now, if you wanted
to do hit testing which I'm
sure a lot of you are doing
for your canvas games and your
canvas interactive widgets.
You'd have to actually rebuild
every path that might be hit.
And then see if the point was
in that path, throw it away,
rebuild your next path.
It's just a whole bunch of code.
I anticipate this,
simplifying a lot of things.
OK. I also want to take a moment
to talk about canvas on retina,
if you were at WWDC last year,
then you may have seen a session
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that we gave all about higher
resolution web content creating
web content for high
resolution displays.
In that session we talked a
lot about canvas and that's
because if you want to have
a beautiful sharp canvas
on a retina display.
You actually need to give
that canvas a backing store
that is what we call doubled.
So, twice the width, twice the
height actually four times the
number of pixels.
So, if you want a beautiful
sharp canvas on a retina device.
You need what we call
a 2X backing store.
So, if you were here last year
you also would have learned
that Safari 6 was going to
auto double to ensure this.
This means that we are
automatically creating a backing
store with twice the
width and twice the height
that you are asking for
when it was rendering
on a retina display.
We also told you that
iOS would not auto double
because there are more memory
constraints on that platform,
it might be a problem that we
were automatically requesting
so much more space.
Well, people got
confused and sad
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and that was definitely
not our goal.
Our goal is to have beautiful
canvases, canvi [phonetic]
on retina displays
for all of you.
And so, we've decided
in Safari 7
that we will no longer
auto double.
So, Safari 7 will match what
iOS is been doing all along
and no auto doubling will happen
will give you a backing store
of exactly the size
that you request.
The good news is that if you
followed our instructions last
year about how to
create a canvas
that would be the right size
on a none retina display
and on a retina display that
advice all still totally works
and still will do the right
thing on all platforms.
So, I still encourage you to
look at that session if you want
to know how to create a high
resolution canvas element.
OK. So, that covers
graphics enhancements,
I think there is some new
API's that will be super useful
for those of you using
canvas and I think
that hopefully we've cleared up
some confusion by getting rid
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of the auto doubling that
you were doing on OS X.
OK. So, we at Apple and we
in the WebKit Open Source
Project consider compatibility
to be among the most
important of our goals.
So, we never want to
intentionally introduce
that compatibility problem
but sometimes to make a cake,
you have to break a few eggs.
So, here's a summary of changes
that we made for good reasons
that we think will be awesome
for your most of the time
but they do run the
risk of running
into some problems for you.
So, we've covered the first
couple of this already.
First is that canvas no longer
auto doubles on the Mac,
if you did not follow
our advice from last year
and you're depending on Safari
to automatically create a
bigger backing store for you,
then you might have some blurry
canvi on retina these days.
Another thing to make
note of is that kerning
and ligatures are on by default.
Again, we've talked about
this, so now text might take
up less space than it used to.
So, just something
to be on the lookout
for if you were depending
on a specific size.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Another change that we made is
that the CSS background
shorthand will now overwrite
earlier settings.
So, this is a change that we
made to match the specification
and it was a change that
was added to the spec
because the CSS Community
really wanted it.
So, this is again something that
we think you'll really like.
So, it solving this
problem where people wanted
at some later point in
their cascade to be able
to say background none
and to have it reset
all background values.
But it didn't actually do that.
This background size
would not have been reset
in prior versions of Safari.
Now, it will be.
So, that's the great news.
If you were writing
code like this though,
you may have expected that
background size to be honored,
but it won't be honored anymore.
So, that's a little bit of a
gotcha to be on the lookout
for here, but for the
most part we think
that you're going
to really like this.
This is something that
a lot of people wanted.
I'm delighted to tell you
that we've unprefixed
transition as we call it.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The transition specification
has reached a level of maturity
that we can ship a
version of transition
without the WebKit prefix.
So, I think this is--
again, another thing that it's
going to be great for you.
It should simplify
some of your CSS.
The only gotcha here is
that there is some code,
out in the wild that
assumes that if transition is
on prefix then CSS
animation is also on prefix
which is not a safe assumption
and it's not the
case in Safari 7.
So, that's just a
little something
to be on the lookout for.
OK. So, that covers
the enhancements
that we have time for today.
There are so many other
things that I wish
that I had time to
tell you about.
But there are many
other sessions this week
that will cover a lot of them.
So, there are three things
that I would like you
to leave here today with.
First, rich magazine-like
layouts are coming to the web,
this is something that it's
very important to us something
that we're working on a lot.
We're always looking to
have better integration
with our platform
and our devices.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I think that the AirPlay
API and our support
for dynamic type are two
great examples of that.
And finally, there's tons of new
stuff in WebKit all the time.
There's so many things-- we
talked about so many things
or so many more things
I wish we had time for,
if you're interested in keeping
up with our activity and WebKit,
we've actually been doing
a pretty good job lately
of summarizing the most
exciting changes each week
on our blog webkit.org/blog.
I encourage you to check it out.
If you have more
questions there are a lot
of resources available to you.
And I mentioned several times
many other sessions this week.
Right after this session, in a
different room, there are going
to be two fantastic sessions
about the improvements
that we've made to our
developer tools this year.
I really encourage
you to go to them
up in Russian Hill tomorrow
morning on the session
about power and performance.
I referenced this
earlier or you'll learn
about position Sticky
in this session and lots
of other really great
tips and tricks
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
for having a really
fast responsive website.
If you want to learn more about
captions there's the session
about preparing and presenting
media for accessibility.
And on Friday, we have two more
great sessions you can learn all
about how to make push
notifications for your websites
which was shown in the keynote
yesterday and you can learn all
about our new objectives,
see JavaScript API.
That's it.
Thank you all for coming.
Thank you for listening.
[Applause]