Transcript
[ Music ]
[ Applause ]
>> Hello. Welcome to the
Apple News Format Session.
My name's Casey and today my
colleague Dan and I are going
to show you how you can
create some beautiful
and engaging articles for news
using the Apple News Format.
By the end of today's session,
you will have a detailed
understanding
of all the design capabilities
of the Apple News Format,
as well as an understanding
of all the code used
to construct those stories.
Believe it or not,
we're even going
to identify some efficiencies
between your design
and your markup.
Dan's going to cover a variety
of features that will allow you
Dan's going to cover a variety
of features that will allow you
to create some beautiful
layouts that are reminiscent
of magazine-type style,
including features
like drop caps, side bars,
galleries, and animations.
With the Apple News Format,
your articles are going
to look amazing on the iPad
and they will effortlessly
adapt to every screen size.
That's because the Apple News
Format is inherently responsive.
It ensures that your stories are
always going to look their best.
So, obviously there's a
lot of features to dive
into here today, but first
it's really important
that I give you a bit of context
around the News Application
itself.
And that's because
news is the foundation
for how users are
going to discover
and experience your stories.
News is a news aggregator
application,
it comes preinstalled on the iOS
in the US, UK, and Australia.
Okay. That's really
stuffy though, right?
Okay. That's really
stuffy though, right?
News aggregator.
I prefer to think of news as
a kind of matchmaker service.
News helps readers find stories
that they're going to love.
And that's really great news for
publishers, because that means
that they get to find new fans.
News makes its recommendations
based on channels and topics
that a reader chooses to follow.
And then it places
relevant stories
into the readers For You feed.
And that For You feed is
the key to content discovery
for users, and publishers alike.
As a reader, I can find anything
that interests me there,
from CNN to craft beer.
Oh, this is Eddy's For You Feed,
so Formula 1 racing
and super cars.
At any case, the point
is, is that there's
such a breadth of
content in news.
And that breadth, it
speaks to the fact
that anybody can
publish to the News app.
that anybody can
publish to the News app.
You can publish today and
begin to connect with readers
and begin earning revenue.
And you can do that using
several different methods.
Including RSS, the News
Publisher Authoring Tool,
and the Apple News Format.
If you haven't checked it
out already, you should check
out the Getting Started
in Apple News Session,
it was earlier this week.
It's available on video now.
That session reviews all
three of these methods.
This section focuses just
on the Apple News Format.
And that's because the Apple
News Format is superhelpful
for any number of things
you're going to want to do,
including HAN authoring
articles,
maybe creating a translation
layer on top of your CMS
so that you can programmatically
deliver content, and articles,
and stories from your CMS to
the Apple News Application.
Or, even for contributing to
some of the plugins out there
for platforms, like
WordPress or Drupal.
Knowing the Apple News Format is
going to prove really helpful.
Knowing the Apple News Format is
going to prove really helpful.
And, it's just JSON.
The Apple News Format uses
JSON to create powerful designs
that are both performant
and responsive.
JSON is also really great for
converting between formats,
and it allows us to have
an extensible format.
And that extensible nature
of the Apple News
Format is superimportant
because it allows us to
develop features at a quick pace
without any additional
dependencies.
So I feel like we've given you
a pretty good background here
around News.
So now we can really jump
into the nuts and bolts
of the Apple News Format.
Here's Dan to take it away.
>> Thank you Casey.
So now that you have
a sense of the world
in which these articles
live, let's dig into the nuts
and bolts of how you
actually make an article
with Apple News Format.
So what we're going to
do today is we're going
to take this sample
article and we're going
to take this sample
article and we're going
to tear it down to the skeleton.
And then we're going
to build it back
up so we understand
the fundamentals.
We're going to make
it responsive.
And then finally we're going
to add some animations.
So here's our article skeleton.
Let's dig into some of
the properties here.
Our first property is title.
And this is a title as
it will appear to users
who are browsing the feed.
Next, we have excerpt, our
first piece of metadata.
And this is the snippet
of text that appears
with the title also in the feed.
And finally, you get to
define the thumbnail image,
using a thumbnail URL.
Now let's step back
for a second and talk
about a few thumbnail
image tips.
So first of all,
the accepted formats
for thumbnails are JPEG and PNG.
Second, definitely send
us high resolution art.
We'll take care of
down-sampling on our backend.
The pizel size is
300 by 300 pixels.
If you go smaller than that your
image isn't going to show up.
So definitely sent us your best.
And we do have a few
moderate requirements in terms
of width height ratios.
So for thumbnail
images, you need to be
at least as wide as 1 to 2.
But no wider than 3 to 1.
Moving on.
Our last piece on metadata
that we're going to talk
about today is cannonicalURL.
And this is simply a web
version of your article.
And if you have one, definitely
include this metadata.
It's going to be really
important if a user say,
shares your article to a friend
who doesn't have
access to Apple News.
Having that one version
to fall back
on will make a much
better experience.
So we talked about metadata.
Let's dive into the content.
So, content lives
in a top-level array
in your article,
called components.
And, each of your pieces
of content is represented
by a JSON object which
is the component.
Each one has a semantic
rule, like heading1, title,
intro, byline, and body.
Choosing the most
appropriate role
for your content is
critical for accessibility.
So we touched on semantics,
but what if you want
to style your text?
So this is where
component textiles come in.
And component textiles is
a top-level dictionary.
And we're going to
make our styles
in three different layers.
So the first one we're
going to do is we're going
to make a default style, that's
going to lay the baseline styles
for all of our text components.
Then, we're going to define a
number of rule-specific styles
that are going to
build on default.
And finally we're going to
make it a non-default style.
And this is for when you need
an exception for the rule.
Okay, so here's our
default style.
And let's take a look at
the properties inside.
First we have font name.
And one thing to keep in mind
is that font name is not,
declare your font is not
quite the same as in say CSS.
So keep two things in mind.
First of all, when referencing
fonts, you need to call them
by their postscript name,
not by their family name.
by their postscript name,
not by their family name.
And two, the fonts that you use
need to be available on iOS.
So, if you wanted to channel
those sweet nineties design
skills, you could make the real
use of the Chalkboard family,
using these postscript names.
Next we have text color.
Text color takes a hex value.
You can use the shorter
form if you want.
Or if you need alpha, you can
use the 8-character version.
Then we have font size.
And font size is
declared in points.
But we shorthand
that to an integer.
Now, just because
it's in points,
don't think of this
as an absolute value.
The app's going to take your
font size and when users look
at it on different devices, it's
going to make some adjustments
to optimize legibility.
And that said, a good
rule of thumb is try not
to go below 16 points
for your body copy.
On a similar note, line height's
also declared in points.
And you want to define
your line height relative
to the font size you've
chosen, we'll maintain
to the font size you've
chosen, we'll maintain
that ratio across devices.
And finally we have
length style.
So this is where you get
to define some overrides
for any links that appear in
the text in your component.
Here [inaudible]
find a text color,
but there's certainly
nothing stopping me
from adding an underline.
So now that we have
our default style,
let's add our first
role specific default.
So this one has a special
name, just like default.
It's called default body.
And this is going to lay
down the baseline styles
for any body component, with
two new properties here.
We have ParagraphSpacingBefore
and ParagraphSpacingAfter.
And as you would hope, they
affect paragraph spacing.
But what does it mean
to have paragraphs
in a component based system.
So let's take a look at
our first body component.
And this one component actually
has two paragraphs inside of it.
That's our first one.
And that's our second one.
And we divide them with two
new lines, markdown style.
And we divide them with two
new lines, markdown style.
And speaking of which,
you may have noticed this
format declaration.
In Apple News Format, you get
to choose between plain text
and markdown for
your text formatting.
And in this case, we're taking
advantage of that right now
with this markdown
style, links and text.
Whether you choose plain
text or markdown though,
you can use these
paragraph spacing properties
to effect the spacing
between the paragraphs inside
your component.
So now that we've seen how to
make a role specific default,
let's just quickly hammer
out the rest of them.
So for our heading up top,
I've added some tracking,
so to give some breathing
room to letters.
Kicked up the size of the
title, added some color,
lightened up the intro.
So, subtle changes
for our byline,
as well as for our
subheading, further down.
So now that we got
that out of the way,
let's move onto something
more interesting.
Let's make our first
non-default style.
Let's make our first
non-default style.
And we're going to take this
opportunity to add a drop cap.
So, one thing to keep in mind
is because we're doing this
in three tiers, we've already
covered most of the styles
that we want for
our body components
in default and default body.
So with this third layer,
with this custom style,
all we're going to do is define
how the drop cap should look.
And we're going to do that in
a special drop cap property.
And inside of that you get to
define some style overrides
for the first character
in the first paragraph
of that component.
And the interesting thing here,
is this number of
lines property.
This is where you get
to define how many lines
of text your drop
cap should span.
And as you can see
here, I'm just going
with a very simple
two-line drop cap.
So we made our style,
but because there's no
semantic relationships
between this component textile
and any particular component,
we need to call it out.
We do that by adding a textile
property to our component.
We do that by adding a textile
property to our component.
And naming the name of
the style that is made.
In this case it's called
body first drop cap.
And once you do that,
on the right you can see we
get our two-line drop cap.
So, stepping back, compared
to our raw text dump
at the beginning, now that
we have some textiles,
things are looking a lot better.
But it's a bit jumbled.
We definitely need
some margins here.
And this is where
component layouts come in.
So, component layout is our
next top-level dictionary
we're adding.
And inside we can
set define layouts,
which gives us the
ability to add top
and bottom margins
to our components.
We also do a few more things,
which we'll touch on layer.
And we have flag component
layouts to a component
by adding a layout property.
Once we do that, we've got some
breathing room in our article,
and topography, things
are looking a lot better.
But, let's take advantage of
another simple and cool way
to add more control over
our vertical spacing.
Let's add a divider.
And let's put it between
our heading, up top,
and the title of the article.
So, there's our divider.
And you can see we have some
control over the stroke.
We can change the
width and the color.
But, personally what I
think is really cool,
here is what's happening
in the layout.
So take a look at the divider
and see how it extends
all the way
to the right side of the screen.
This is nothing that's
inherent to divider.
It's something that we're doing
inside the component layout.
We're using a special property
called ignoreDocumentMargin.
And you can see I've
given it a value of right,
which means just
ignore the margin
and go all the way to the edge.
So now we've got
component textiles,
we've got component
layouts, we have a divider.
Things are looking
pretty good from,
you know, a text perspective.
Now it's time to
add some fun stuff.
And, the best way to start
that is with a photo.
So, got my photo component.
Below that I added
a caption component.
But, inside the footer
component,
you might see this caption
property, which appears
to be sort of replicating
the caption component.
And what's really happening
here is we're defining a caption
as it will appear if
the user taps the photo,
goes into full screen view,
as you can see on the right.
This is also a critical
thing to include for reasons
of accessibility, as the caption
here is what will be read
to VoiceOver users.
Next, returning to our layout,
you can see that this
photo is full bleed,
it's going all the way from
the left side of the screen
to the right side of the screen.
And again, this is not
something that's inherent
to the photo component,
we're making use
of the ignoreDocumentMargin
property again.
This time though, instead
of a value of right,
I've given a value of true,
which just means
ignore both margins.
And then finally,
we have our URL,
which points to the image asset.
And I'll step back and talk
about some requirements
And I'll step back and talk
about some requirements
for images that appear
inside the article view.
So images can be referenced
both locally or remote,
just use the correct scheme.
Again, just like
with thumbnail URL,
definitely send us
high resolution art.
We'll take care of down
sampling on a per device basis.
For images inside the article
view, you can use JPEG, PNG,
as well as GIF, and we
definitely support anime GIFs.
So, that's photo.
But what if you have
a number of photos
that all go together
thematically?
This is where the gallery
component comes in.
And implementation
is a piece of cake.
You simply specify
a role of gallery.
You feed it an array of images.
And what you get is a
great user experience
where the user can engage
with the slide show
in the article view.
They can tap, go to
full screen view,
see the image specific captions.
And when they're done, the
swipe out and continue reading.
Now, building on that we have an
alternative to standard gallery,
Now, building on that we have an
alternative to standard gallery,
called the mosaic gallery.
And this has the
same implementation,
except you switch the roll
from gallery to mosaic,
and what you get is this
really cool composite image
of your images that you
can see on the right.
And best of all, users
retain the ability to tap
into the gallery and get this
same full screen experience.
Next, we have social
media embeds.
Apple New Format has
support for a number
of these including
Facebook, Vine,
and as you can see here Twitter.
And implementation is really
as simple as knowing the URL
of the thing that
you want to embed.
Next, getting into
more involved embeds,
we have support for Apple Maps.
And here's a really good example
from Travel making cool use
of the Apple Maps feature.
Including one of these
is a great when you want
to show your user a location
but give them the opportunity
to get some context
on their own terms.
So if you're adding all
of these great features
So if you're adding all
of these great features
and interesting content, you
might be looking for a way
to monetize your efforts and
that's where ads come in.
So let's just touch real
quickly on the two ways
that you can add ads into your
Apple News Format Article.
So first if you need control,
ad components are the way to go.
So you literally place these in
your content, at opportunities
where you think it
would be appropriate
to have an ad appear.
If you don't need that
much control, though,
the easier option is to use
the Dynamic ads feature.
And with this, all
you really have
to do is specify the frequency
with which you'd like ads
to appear, and the app will
handle placement for you.
And so far what we have is a
really good mobile experience
for the phone, but what happens
when we put this on the iPad?
So our mobile first
approach, at this point,
has left us with a few
design opportunities.
We could be definitely making
better use of white space.
And this is kind of like a
big, boring block of text.
It would be nice to
add some visual variety
to keep our readers engaged.
And, we have a really
bad line length problem,
especially when you put the
iPad into landscape orientation.
So the solution to all
these problems lies
in the Apple News
Format column system.
And this is really our
take on the classic problem
of the digital age, which is how
do you design for many screens.
And of course there are
some existing methodologies.
Notably, responsive design,
which you react to
your screen size.
There's mobile first design, in
which you enhance the experience
as you gain more real estate.
And these are both tried
and true approaches,
but making them actually
work is tough.
It's not easy.
And sometimes you end
up basically redesigning
your article, or your content
for different situations.
And with Apple News
Format, we really want you
to design your article once.
But more than that,
we want you to design
for the richest experience.
We want you to focus on the
big, beautiful version of it.
And we don't want you to get
caught up in media queries,
and breakpoints because the app
is inherently designed to handle
and breakpoints because the app
is inherently designed to handle
that kind of scaling for you.
So how does it work?
Well, it starts with an iPad
in landscape orientation.
Then what we're going
to as content creators is
divide the screen into columns.
Now, here I've divided it into
10, but as a content creator,
you get to choose how many
columns you want to use.
There's no hard and
fast mind on how many,
just keep in mind the
more columns you add,
the more complexity you're
adding to your design.
So, once we've decided how
many columns in total we want
for our article, next we have
to assign some columns
spans to the content.
So, in this example
here, our main block
of body content is consuming
the first 7 of our 10 columns.
And the caption on the
right is consuming the last.
So then when we take that
design, and we start looking
at it on different
orientations, different devices,
what we see is that the app
automatically collapses the
what we see is that the app
automatically collapses the
number of available columns
to fit the screen size.
And then likewise,
where the real magic is,
is how intelligently
decides, figure that how
to adapt the components to
that new amount of real estate.
So as you can see like when
you go to the iPad in portrait,
things get narrower,
but then on the phone
where that wouldn't
be appropriate,
everything falls back
into a stacking order.
So at this point,
you could be tempted
to start doing some arithmetic.
Figuring out for such and
such screen width, with such
and such layout, what
would the column spans be?
That can get very complicated
and kind of annoying.
That's really not in the
spirit of Apple News Format.
Because we want you to focus
on the visual effects
of your designs.
To help you do that, we
made a great OS X app called
News Preview.
So as a designer, or developer,
or both, you need to be able
to iterate quickly in your
designs, and competently
and know they're
going to look great.
and know they're
going to look great.
And that's where News
Preview comes in.
Because it allows you to
see, get a visual update
on how your articles
are going to look,
while you're messing
around with the code.
And best of all it
leverages the Xcode simulator
so you can see multiple devices,
multiple orientations
all updating live,
simultaneously while you work.
And it's available for
all Apple developers
at developer.apple.com.
So, returning to our JSON,
we talked about the concepts
of the column system, now let's
put how we actually make these
happen, in the article JSON.
So now we're going to go
back to our article skeleton,
we're going to look
at a top-level property
called layout.
And this is your
document layout.
It's got four properties.
And with these properties,
what you're saying is
for a given width, say 1024,
for an iPad in landscape,
I want to divide the
screen into 10 columns
with a 20-point gutter
in between.
And then to the left
and to the right,
I'm going to have
an 85-point margin.
And of course these
numbers are configurable,
And of course these
numbers are configurable,
this is what was
chosen for this demo.
Next, once we have
our document layout,
now we need to start
applying some column spans
to our individual components.
And, because of the very obvious
line length legibility problem
we had with our body components,
I'm going to focus on those.
So, we see here on our
first body component,
we're using a layout
named noMarginLayout.
So let's take a look
at that definition.
And let's add two
new properties.
Our first new property
is columnStart.
And this simply says, going from
left to right on the screen,
what's the first column that
this content should occupy.
I've chosen zero
my first column.
Then we have columnSpan, which
unsurprisingly is where you get
to say how many columns in
total this content should span.
And I've set it to 10, which
is also the total number
of columns in our document.
And you probably won't
be surprised to see
that nothing changed
in our article.
The default is for all
components to expand
The default is for all
components to expand
to the full-width
of their containers.
So let's make it
more interesting.
Let's implement a centered
layout for our 10-column layout.
That looks a lot better already.
So, what's going on here?
I've set it so that
the first column
that our body content
occupies is the third column
in our 10-column layout.
And of course if you start
from zero the third
column has an index of two.
And then I've reduced
the width of the content
so it only occupies six
out of our 10 columns.
And that looks pretty good.
But personally, I like a more
asymmetric design, so I'm going
to go ahead and kick it
over to left and switch it
to occupy the first
seven columns.
Now, if we take this
and we start applying it
to our other components,
starting to see our design
really come together.
We switch the orientation
it still looks great.
And we've retained that
awesome level of experience
that we had from the start.
So our one designed scaled
seamlessly across devices.
A piece of cake.
And now let's take that
foundation, let's build on it.
So before we were talking
about the fact that we had kind
of a long block of
text, a little boring.
We can use some visual variety.
And of course the
classic solution
to that problem is
to add a pullquote.
So let's extract some text
from one of our body components
and let's drop a pullquote in.
Next, let's use our component
layout and take that pullquote
and just like push it
over into the margin.
So I chose a column start
and a column span value
to allow the pullquote to
clear all the body components.
And what you can see is
it successfully did that
and then it sort of floated
up until it hit and obstacle,
which isn't quite the
look we were going for.
So what we need is we need
to make a visual relationship
between our pullquote
and something.
And fortunately, we have an
inherent semantic relationship
between the pullquote
and the text
from which it was extracted.
So, what we're going
to do is we're going
to use something called
anchoring in Apple New Format,
and we're going to anchor our
pullquote to the body component
that contains the
text that we've pulled
out for the pullquote.
Step one in doing this is we're
going to add an identifier
to our body component
so we can call it out.
Then we're going to
add an anchor property
to our pullquote component.
And inside of there, that's
where we're going to call
out the identifier we just made.
And then we get to
define how do we want
to align these two things.
So in this case what
we're saying is we want
to align the top of our
origin, the pullquote,
to the top of our target,
the body component.
And once we do that, we
get a pretty cool effect.
We've got the pullquote
hanging out in the margin,
right next to it the most
relevant piece of content
that it could be near.
We have much more
interesting use of white space.
But because we have an
inherent textual relationship
But because we have an
inherent textual relationship
between the pullquote
and the text
from which it was extracted,
we can actually take
this another step further
and actually anchor
to the text itself.
So this is going to
be a two-step process.
First what we're going to do is
go back to our pullquote layout,
and we're going to update it
so that it overlaps the body
components by one column.
And then we're going to
call out the range of text
from which the pullquote
was extracted.
And once we do that, we get this
really cool sort of embedded
into the text pullquote look.
And then of course when
we take that and put it
on other orientations
and devices it always
does the right thing,
whether it's reducing the width,
or in the case of the phone,
falling back into a
logical stacking order.
So, at this point, things
are really coming together.
We could probably call it
quits and start using this
as a template for our content.
But if we look at the experience
of scrolling through our article
so far, it's kind of
missing something.
For instance, check out this
cool article from Harper's.
Now, watch how the body
content sort of slides
up over the lead image.
And how as you get to each
photo the fades in just
as it gets to the view port.
It's a really cool effect,
so I think we can take
some inspiration from them.
So let's add some
motion to our article.
What we're going to do today is
we're going to take advantage
of a really cool Apple News
Format feature called a
scene animation.
So, step one in doing this,
we're going to take our photo
and we're going to move it
so that it's the first
component in our article.
Now, next what we're
going to do is we're going
to do a little transformation.
We're going to take this photo.
We're going to change it
from being a photo component
to being a background
fill on a container.
So to do that first, we're
going to add a container.
And we're using a semantic
container component
And we're using a semantic
container component
called header.
Now, nothing actually changed
because we just have an
empty container there.
So for debugging purposes,
I'm going to go ahead
and add some height and
add a background color
so we can see our container.
There. Now we've got
a lovely gray box.
A few things to note
in the JSON here.
First of all, I added
the background color
with a new property
called style.
This allows us to find
a component style.
And component styles
give you access
to some higher level
design elements
like background fills
and borders.
The next interesting
thing here is the fact
that it actually
defined our style inline,
which is something I
haven't done before.
On a technical level,
there's really no difference
between defining things
inline, versus calling them
out elsewhere as
a main reference.
It's really just a matter of
organization and convenience.
And then we have our height.
So I've manipulated the
height on the container
with a property called
minimumHeight inside our
with a property called
minimumHeight inside our
component layout.
And I gave it a value of 44vmax.
And what that means is we
want this container to be
at least 44 percent of
the longest viewport side.
And this vmax unit is one of
several special sizing units
that are available
in Apple News Format.
So, now that we have our lovely
size gray box, let's go ahead
and switch it from
being a background color
to being an image fill.
And doing this is
a piece of cake.
We just add a fill
property to our style.
And now that we have that,
we can get rid of our photo.
And we've completed
our transformation,
we're a little be closer
to our scene animation.
Next step, we need to
actually establish a scene.
And the way we're
going to do that is
by actually dividing our entire
article into two containers,
semantic containers
called sections.
So our first section is
going to be our scene,
So our first section is
going to be our scene,
where the animation
is going to happen.
So I'm going to put our
header container in there.
And then everything else in
the article, I'm going to dump
into our second section.
Now to make our scene
actually happen.
So, again, this is pretty easy.
You simply add a scene
property to the first section.
And then you define what
kind of animation you want.
And here, I'm using one
called fading sticky header.
And what that means
is it's going
to take our header container,
and as the user scrolls,
it's going to stick to
the top of the viewport,
the rest of the article is
going to slide up over it.
And then the background fill
on the header is going to fade.
Let's see it in action.
So here's our article.
User scrolls, and the text
slides up over the image
and starts to fade away.
That's the gist of the effect,
but it's not quite
what I was going for.
We have that naked text
is sort of sliding up over
and becoming illegible.
Not the effect I want.
Fortunately, the solution
is really, really easy.
Fortunately, the solution
is really, really easy.
All we need to do is
add a background color
to our second section.
We're just going to let the
rest of the content retain
that white background
and slide up over neatly.
So again, let's see
it in action.
So we still get our animation
with a fading background
but it's still legible.
Much better experience.
So now that we've
dialed in our animation,
we need to pay a
little more attention
to some design elements.
In our top of article experience
just to make it look nice.
And the first issue I'd
like to tackle is the fact
that when we moved our photo,
suddenly the captions got
this awkwardness and a bunch
of things between it and
the thing it describes.
And there are a few different
approaches to this problem.
The one I'm going to use today
is to take our anchoring skills
and sort of kick it
out into the margin.
So this has the effect of
making the association clearer
with a clean vertical line.
But also, it makes our white
space a bit more interesting
up top.
And then the next thing
I want to do is I want
to take advantage of the fact
that we're using a container
with an image fill up top
now instead of a photo.
And one of the coolest
things about that is you get
to put things inside
of containers.
Mainly text.
Meaning we can layer some
text on top of the image,
and add a much more interesting
look to our top of article.
So, I've taken our title and the
caption, the heading above it,
and I've put them into
our header container,
which looks pretty cool,
except that now they're sort
of awkwardly floating up top.
It'd be nice if I could align
them to the bottom of that.
And I can, using another
ability of the anchor property.
So if you use an anchor
on an object that's inside
of a container, you get
to adjust the alignment
of it relative to its container.
So in this case I'm using
a target anchor position
at bottom.
And as you can see, my
text sticks to the bottom
of the header container.
And it looks a heck
of a lot better.
And it looks a heck
of a lot better.
So, we're really, really close.
We've got some interesting
layering of text over images,
we've got nice white
space usage,
we've got good topography.
The last thing I want to
do before I call our top
of article experience
done is I want
to add some inline text styles.
So we're going to go one more
time to your article skeleton.
And we're going to add a
new top-level dictionary
called textStyles.
And textStyles is similar
to componentTextStyles,
except that instead of styling
all the text in a component,
textStyles allows you to
do style to just a range
of text and make two styles.
One for gray text,
and one for bold text.
And to apply these I'm
going to take advantage
of a really cool
markdown extension we have
in Apple News Format.
So here's the two components
that I want to effect.
We've got our title component
and our first body component.
And to apply my stiles, all I
do is a wrap the text I want
to effect in square
brackets and I follow
to effect in square
brackets and I follow
that with the style I want
to apply in curly braces.
And once you do that, as you can
see in the case of the title,
I've given some gray text
color to a few of the words.
And then I've got a
nice run in bold look
for our first body component.
So, now I'm satisfied.
Ready to call our top of
article experience done.
There's just one more tweak I'd
like to make before I call
the whole article done.
I want to add some
motion to a few elements
that are further
down in the article.
So, for instance the
pullquote there on the right.
It'd be cool if that
slid in from the right.
And it would also be cool
if the galleries slide in.
But as for the mosaic
and the captions,
I think it would be cool as
if those faded in as you got
to them in the viewport.
So implementing this
is really, really easy.
Here's our pullquote.
And all I have to do to
add the animation is add an
animation property.
Inside I declare
what kind I want.
I want a move in
animation this time.
With move in, I get to say from
which direction it comes in.
I'm going to have it
slide in from the right.
Now, I'm going to
take that same thing
and apply it to our gallery.
Then I'm going to add
a fade in animation
to the mosaic, and
our two captions.
And let's see it
all come together.
So we've got our
scene animation,
here comes the pullquote.
Slide in. You can put
the gallery mosaic,
caption, fade, fade.
Looks a whole lot better.
With just a few animations
we made the act of scrolling
through the article more
fun and more dynamic.
And that seems like a
pretty appropriate place
to end our crash course
on the finer points
of Apple News Format.
So, we covered a lot.
We added some text
and graphical content.
We saw how to make layouts
that work across all devices.
We used anchoring to make
visual relationships.
And with just a few lines
of code we added some
really cool animations.
Of course this is just the tip
of the iceberg, I encourage you
Of course this is just the tip
of the iceberg, I encourage you
to download the tools,
check out the docs,
and play around with
it yourself.
We love to see what our
content creators come up with.
Back to Casey.
[ Applause ]
>> Hey, Dan gave you
a great introduction
to the Apple News Format
and showed you how you can
use the News Preview Tool
to create stories that are going
to look great on every device.
I hope we've inspired you today
to sign up with news publisher.
Check out the documentation,
publish your stories,
earn revenue, help writers
get exposure, and contribute
to plugins for the platform.
This link will take you to
everywhere you need to go
in order to have those
materials to get started,
including your documentation
and some of the example code
that Dan showed you today.
Be sure you check out that other
News Session that covered all
of our different ways that
you can get published.
And thank you for
coming here this week.
It's been great having you
here, and that's a wrap.
[ Applause ]