23.01.2018 Views

MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

in the topic linked to above, 66 are really composed of two sections that are each the size of the whole<br />

tile, as shown below for square tiles (left) and wide tiles (right):<br />

With peek templates you effectively get to show twice the content as the other templates. When a<br />

peek update is shown on a live tile, the upper portion will appear first and then the tile will flip or give<br />

you a “peek” at the lower portion, and then it will switch back to the upper portion, after which the live<br />

tile will switch to the next update in the cycle, if one exists. (The Travel app uses peek templates if you<br />

want an example; and the animation that’s employed here is again similar to WinJS.UI.Animation.-<br />

createPeekAnimation.) Of course, both sections should contain related content because they are part of<br />

the same singular update.<br />

There are several important notes with the template layouts. First, in many of the templates at<br />

present, the last line of text will not display if you’re also showing a logo or a short name on the tile (to<br />

avoid overlaps). This will likely be changed in the future, but it’s the reality for Windows 8.<br />

Second, images are limited to 1024x1024 and 200KB maximum; if any image exceeds these limits,<br />

the entire update will not appear at all. Clearly, it’s better to avoid large images if you can help it<br />

because such images just increase memory consumption and possibly network usage (if the image is<br />

being downloaded). It’s also good to take the 80%, 100%, 140%, and 180% scale factors into account<br />

for tile images. However, if you don’t want to deal with individual scaling factors, size your tile images<br />

for 180% and let the system scale them down (which uses a high-quality algorithm so that images will<br />

look as good as if you scaled them down with photo-editing software). Also, for photograph, consider<br />

using JPEG instead of PNG as the former has better compression for such images.<br />

66 A more succinct list of templates is also found on the reference page for TileTemplateType. This includes the name of the<br />

template and a representative image, but doesn’t include the XML.<br />

578

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!