MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

In the table, note that 80% scale tile graphics are used in specific cases like low DPI modes (generally
when the DPI is less than 130 and the resolution is less than 2560 x 1440) and should be provided with
other scaled images. Note also that there are additional graphics besides the Packaging Logo (first item
in the table) that you’ll need when uploading an app to the Windows Store. See the App images topic in
the docs under “Promotional images” for full details.
When saving these files, append .scale-80, .scale-100, .scale-140, and .scale-180 to the filenames,
before the file extension, as in splashscreen.scale-140.png. This allows you, both in the manifest and
elsewhere in the app, to refer to an image with just the base name, such as splashscreen.png, and
Windows will automatically load the appropriate variant for the current scale. Otherwise it looks for one
without the suffix. No code needed! This is demonstrated in the HereMyAm3b example, where I’ve
added all the various branded graphics (with some additional text in each graphic to show the scale). To
test these different graphics, use the set resolution/scaling button in the simulator—refer to Figure 2-5
in Chapter 2—to choose different pixel densities on a 10.6” screen (1366 x 768 =100%, 1920 x 1080 =
140%, and 2560 x 1440 = 180%). You’ll also see the 80% scale used on the other display choices,
including the 23” and 27” settings. In all cases, the setting affects which images are used on the Start
screen and the splash screen, but note that you might need to exit and restart the simulator to see the
new scaling take effect.
One thing you might also notice is that full-color photographic images don’t scale down very well to
the smallest sizes (store logo and small logo). This is one reason why such logos are typically simpler
with Windows Store app design, which also keeps them smaller when compressed. This is an excellent
consideration to keep your package size smaller when you make more versions for different contrasts
and languages. We’ll see more on this in Chapter 17, “Apps for Everyone.”
Tip Two other branding-related resources you might be interested in are the Branding your Windows
Store app topic in the documentation (covering design aspects) and the CSS styling and branding your
app sample (covering CSS variations and dynamically changing the active stylesheet).
Activation Event Sequence
As the app host is built on the same parsing and rendering engines as Internet Explorer, the general
sequence of activation events is more or less what a web application sees in a browser. Actually, it’s
more rather than less! When you launch an app from its tile, here’s the process as Windows sees it:
1. Windows displays a splash screen using information from the app manifest.
2. Windows launches the app host, identifying the app to launch.
3. The app host retrieves the app’s Start Page setting (see the Application UI tab in the manifest
editor), which identifies the HTML page to load.
4. The app host loads that page along with referenced stylesheets and script (deferring script
loading if indicated in the markup). Here it’s important that all files are properly encoded for
best startup performance. (See the sidebar below.)
101