--- a/splashscreen/Overview.html Fri May 11 18:29:13 2012 +0100
+++ b/splashscreen/Overview.html Fri May 11 18:30:58 2012 +0100
@@ -1,38 +1,21 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=http://www.w3.org/1999/xhtml><head>
-<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
+<html><head>
+<meta charset=UTF-8>
+<link href=http://www.whatwg.org/style/specification rel=stylesheet>
<title>Splash screen for native web apps</title>
-<style type=text/css>
-em.ct {
- text-transform:uppercase;
- font-style:normal;
- font-weight:normal;
-}
-em.ct-samp {
- text-transform:uppercase;
- font-style:normal;
- font-weight:normal;
-}
-a.bibref {
- text-decoration: none;
-}
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal;
- color: #900;
+<style>
+span{
+ border-bottom: 1px solid #CCC
+
}
</style>
+
<link href=http://www.w3.org/StyleSheets/TR/base rel=stylesheet type=text/css>
-<style type=text/css>
-a.internalDFN { color: inherit;
- border-bottom: 1px solid #99c;
- text-decoration: none;
-}
-</style>
+
</head>
<body>
-<div class=head><!--end-logo-->
+<div class=head>
+<p class=logo><a href=http://www.w3.org/><img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72></a></p>
<h1>Splash screen for native web apps</h1>
<p><a href=http://dvcs.w3.org/hg/nativeapps/raw-file/tip/splashscreen/Overview.html>Latest Draft</a> | <a href="http://dvcs.w3.org/hg/nativeapps/raw-file/tip/splashscreen/test-suite/Overview.html
@@ -45,83 +28,121 @@
<dd>Brian LeRoux, Scott Wilson</dd>
<dt>Quality assurer:</dt>
<dd>Marcos Cáceres</dd>
- <dt>Provenance:</dt>
+ <dt>Provenance of specification:</dt>
<dd><a href=http://lists.w3.org/Archives/Public/public-native-web-apps/2011Dec/0002.html>Call for Consensus </a></dd>
</dl>
- <p class=copyright><a href=http://creativecommons.org/publicdomain/zero/1.0/ rel=license><img alt=CC0 src=http://i.creativecommons.org/p/zero/1.0/80x15.png></a>
-To the extent possible under law, the editor has waived all copyright and
-related or neighboring rights to this work. In addition, as of
-12 December 2011, the editors have made this specification available
-under the
-<a href=http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0 rel=license>Open Web Foundation Agreement Version 1.0</a>,
-which is available at
-http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
-<!-- XXX
-When published on W3C TR, the following paragraph applies as well.
--->
-<!-- XXX copyright-->
-</p></div>
+ <!-- the following paragraph added by request of Ian Jacobs and David Singer -->
+ <p class=copyright> Copyright ©2011 the Contributors to the <cite>Splash Screen for Native Web Apps Specification</cite>, published by the <a href=http://www.w3.org/community/native-web-apps/>W3C Native Web Apps Community Group</a> under the
+ <a href=http://www.w3.org/community/about/agreements/cla/>W3C Community Contributor License Agreement (CLA)</a>.
+ A human-readable <a href=http://www.w3.org/community/about/agreements/cla-deed/>summary</a> is available. </p>
+
+ <p class=copyright>This specification is not a W3C Standard nor
+ is it on the W3C Standards Track. Please note that under the <a href=http://www.w3.org/community/about/agreements/cla/>W3C
+ Community Contributor License Agreement (CLA)</a> there is a
+ limited opt-out and other conditions apply. Learn more about <a href=http://www.w3.org/community/>W3C Community and Business
+ Groups</a>.</p>
+</div>
<h2 class="no-num no-toc" id=toc>Abstract</h2>
-<p>TBW... </p>
+<p>This document specifies a number of ways to give an application a splash screen (known also as a "launch image"). A splash screen is an image that appears while a game or application is loading. </p>
<h2 class="no-num no-toc" id=table-of-contents>Table of Contents</h2>
<!--begin-toc-->
<ol class=toc>
- <li><a href=#status-of-this-document><span class=secno>1 </span>Status of this document</a></li>
+ <li><a href=#status-of-this-document><span class=secno>1 </span>Status of this document</a>
+ <ol>
+ <li><a href=#issues><span class=secno>1.1 </span>Issues</a></li></ol></li>
<li><a href=#introduction><span class=secno>2 </span>Introduction</a>
<ol>
- <li><a href=#example:-using-the-default-splash-screen-file><span class=secno>2.1 </span>Example: using the default splash screen file</a></li>
- <li><a href=#example:-using-the-content-element><span class=secno>2.2 </span>Example: using the content element</a></li></ol></li>
+ <li><a href=#example:-using-the-splash-element><span class=secno>2.1 </span>Example: using the splash element</a></li></ol></li>
<li><a href=#use-cases-and-requirements><span class=secno>3 </span>Use cases and requirements</a></li>
<li><a href=#conformance><span class=secno>4 </span>Conformance</a></li>
<li><a href=#user-agents><span class=secno>5 </span>User Agents</a></li>
<li><a href=#splash-screen><span class=secno>6 </span>Splash screen</a></li>
- <li><a href=#the-splash-attribute><span class=secno>7 </span>The <code>splash</code> attribute</a></li>
+ <li><a href=#the-splash-element-and-its-attributes><span class=secno>7 </span>The <code>splash</code> element and its attributes</a>
+ <ol>
+ <li><a href=#the-src-attribute><span class=secno>7.1 </span>The <code>src</code> attribute</a></li>
+ <li><a href=#the-width-attribute><span class=secno>7.2 </span>The <code>width</code> attribute</a></li>
+ <li><a href=#the-height-attribute><span class=secno>7.3 </span>The <code>height</code> attribute </a></li></ol></li>
<li><a href=#the-default-splash-screen><span class=secno>8 </span>The default splash screen</a></li>
- <li><a href=#finding-the-splash-screen><span class=secno>9 </span>Finding the splash screen</a>
+ <li><a href=#finding-the-splash-screens><span class=secno>9 </span>Finding the splash screens</a>
<ol>
- <li><a href=#processing-the-splash-attribute><span class=secno>9.1 </span>Processing the splash attribute</a></li>
+ <li><a href=#processing-splash-elements><span class=secno>9.1 </span>Processing splash elements</a></li>
<li><a class="no-num done" href=#locate-the-default-splash-screen-file>Locate the default splash screen file</a></li></ol></li>
<li><a href=#rendering-the-splash-screen><span class=secno>10 </span>Rendering the splash screen </a></li></ol>
<!--end-toc-->
<h2 id=status-of-this-document><span class=secno>1 </span>Status of this document</h2>
<p>This document is undergoing rapid development and is changing frequently. It is inappropriate to cite this document as anything other than a work in progress. </p>
+<h3 id=issues><span class=secno>1.1 </span>Issues</h3>
+<p>The following is a list of issues we are still trying to resolve:</p>
+<ul>
+ <li>Should width and height matter? </li>
+</ul>
<h2 id=introduction><span class=secno>2 </span>Introduction</h2>
<p><em>This section is non-normative.</em></p>
-<p>TBW</p>
-<h3 id=example:-using-the-default-splash-screen-file><span class=secno>2.1 </span>Example: using the default splash screen file</h3>
-<p> </p>
-<h3 id=example:-using-the-content-element><span class=secno>2.2 </span>Example: using the content element</h3>
-<p>The following example shows how to use the <code>splash</code> attribute. </p>
-<pre><widget xmlns="http://www.w3.org/ns/widgets">
- <content splash="logo.png"/>
+<p>Because of the limited processing capabilities of some devices and the amount of time it takes to initialize a Web runtime, there can be a small - yet noticeably perceivable - delay between when the end-user starts an application and the application actually becoming available and interactive to the end-user. </p>
+<p>Depending on the complexity of the application and the processing power of the device, this delay can range from a few milliseconds to a couple of seconds. When applications take more than a few seconds to load, it can be disorienting to end-users as nothing is displayed on the screen; leading to a poor user experience. Native applications overcome this issue by allowing developers to use a media file that is displayed the instant the application is launched. Such a file is commonly referred to as a "splash screen" or "launch image". </p>
+<p>This document defines two ways for a native web application to include a <a href=#splash-screen-0>splash screen</a>: </p>
+<ul>
+ <li>Including a <a href=#default-splash-screen>default splash-screen</a> image at the root of the widget package. </li>
+ <li>Declaring one or more <code>splash</code> elements in the configuration document of an application.</li>
+</ul>
+<h3 id=example:-using-the-splash-element><span class=secno>2.1 </span>Example: using the splash element</h3>
+<p>The following example shows how to use multiple <code>splash</code> elements. </p>
+<pre><widget xmlns="http://www.w3.org/ns/widgets">
+ <splash src="splash/320x480.png"/>
+ <splash src="splash/640x960.png"/>
+ <splash src="splash/768x1004.png"/>
+ <splash src="splash/1024x748.png"/>
</widget>
</pre>
<p>Might appear as the following in a conforming user agent: </p>
<p><img alt="Loading screen" height=228 src=images/device_portrait.png width=209></p>
<h2 id=use-cases-and-requirements><span class=secno>3 </span>Use cases and requirements</h2>
<p><em>This section is non-normative.</em></p>
-<p>TBW</p>
+<ul>
+ <li>R1. Must be localizable.</li>
+ <li>R2. should follow existing practice. </li>
+ <li>Must allow multiple files to be defined</li>
+ <li>Must make it easy for developers, so they don't need to have to deal with width and heights. </li>
+</ul>
<h2 id=conformance><span class=secno>4 </span>Conformance</h2>
-<p>Everything is this specification is normative except sections marked as non-normative, diagrams, examples, and notes.</p>
+<p>Everything in this specification is normative except sections marked as non-normative, diagrams, examples, and notes.</p>
<p>The key words <em class=rfc2119 title=must>must</em>, <em class=rfc2119 title="must not">must not</em>, <em class=rfc2119 title=required>required</em>, <em class=rfc2119 title=should>should</em>, <em class=rfc2119 title="should not">should not</em>, <em class=rfc2119 title=recommended>recommended</em>, <em class=rfc2119 title=may>may</em>, and <em class=rfc2119 title=optional>optional</em> in this specification are to be interpreted as described in <cite>RFC2119</cite>.</p>
<p> This specification defines conformance criteria that apply to a single product: a <a href=#product-ua>user agent</a>. </p>
<h2 id=user-agents><span class=secno>5 </span>User Agents</h2>
-<p>A <dfn id=product-ua title="user agent">user agent</dfn> a software application that implements this specification and
+<p>A <dfn id=product-ua title="user agent">user agent</dfn> is a software application that implements this specification and
the <cite>Widget Packaging</cite> specification and its dependencies. </p>
<h2 id=splash-screen><span class=secno>6 </span>Splash screen</h2>
-<p>TBW: define what splash screen is.</p>
-<h2 id=the-splash-attribute><span class=secno>7 </span>The <code>splash</code> attribute</h2>
-<p>The <dfn id=splash-attribute>splash attribute</dfn> is <span>path attribute</span> of the <code>content</code> element that allows an author to point to a <span>file</span> within the <span>widget package</span>. This file is then used as the splash screen for an application. </p>
+<p>A <dfn id=splash-screen-0>splash screen</dfn> is a media file, typically an image, that is displayed to the user while the application is being asynchronously loaded in the background. It's purpose is to give an end user immediate feedback that an application is starting and loading in the background. </p>
+<h2 id=the-splash-element-and-its-attributes><span class=secno>7 </span>The <code>splash</code> element and its attributes</h2>
+<p>The splash element allows an author to declare a <a href=#splash-screen-0>splash screen</a> for an application. </p>
+<dl>
+ <dt>Context in which this element is used:</dt>
+ <dd>As a child of the <code title="widget element">widget</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd>Empty.</dd>
+ <dt>Occurrences:</dt>
+ <dd>Zero or more.</dd>
+ <dt>Localizable via <code>xml:lang</code>:</dt>
+ <dd>No. Relies on <span>folder-based localization</span>.</dd>
+ <dt>Attributes:</dt>
+ <dd><span title="global attributes">Global attributes</span>, <code title="icon src">src</code>, <code title="icon width">width</code>, <code title="icon height">height</code>. </dd>
+ </dl>
+<h3 id=the-src-attribute><span class=secno>7.1 </span>The <code>src</code> attribute</h3>
+<p>The <code>src</code> attribute is <span><a href=http://www.w3.org/TR/widgets/#path-attribute>path attribute</a></span> of the <code>splash</code> element that allows an author to point to a <span>file</span> within the <span><a href=http://www.w3.org/TR/widgets/#widget-package>widget package</a></span>. This file is then used as the <a href=#splash-screen-0>splash screen</a> for an application. </p>
+<h3 id=the-width-attribute><span class=secno>7.2 </span>The <code>width</code> attribute</h3>
+<p>A <a href=http://www.w3.org/TR/widgets/#valid-non-negative-integer title="valid non-negative integer">numeric attribute</a> greater than 0 that represents, in <a href=http://www.w3.org/TR/CSS21/syndata.html#length-units>CSS pixels</a>, the author's preferred width for the splash screen. </p>
+<h3 id=the-height-attribute><span class=secno>7.3 </span>The <code>height</code> attribute </h3>
+<p>A <a href=http://www.w3.org/TR/widgets/#valid-non-negative-integer title="valid non-negative integer">numeric attribute</a> greater than 0 that represents, in <a href=http://www.w3.org/TR/CSS21/syndata.html#length-units>CSS pixels</a>, the author's preferred height for the splash screen. </p>
<h2 id=the-default-splash-screen><span class=secno>8 </span>The default splash screen</h2>
-<p>A <dfn id=default-splash-screen>default splash-screen </dfn> is a <span>reserved</span> <span>image</span>, either at the <span>root of the widget package</span> or at the root of a <span>locale
+<p>A <dfn id=default-splash-screen>default splash-screen </dfn> is a <a href=http://www.w3.org/TR/widgets/#reserved>reserved</a> <span>image</span>, either at the <span>root of the widget package</span> or at the root of a <span>locale
folder</span>, whose file
- name case-sensitively and exactly matches a file name given in the file name column of
+ name case-sensitively matches a file name given in the file name column of
the <a href=#default-splash-screen-table>default splash-screen table</a>.</p>
-<table>
+<table class=simple>
<caption>
<dfn id=default-splash-screen-table>Default Splash-Screen Table</dfn>
</caption>
@@ -147,15 +168,17 @@
</tr>
</tbody></table>
<p>It is <em class=ct>optional</em> for a <a href=#product-ua>user agent</a> to <span title=supported>support</span> the <span title="media type">media types</span> listed in the <a href=#default-splash-screen-table>default splash-screen table</a>.</p>
-<p>Authoring guideline: At the time of writing, there is limited support on devices for displaying SVG as a splash screen. We recommend you include a splash screen in one of more of the other formats listed in the <a href=#default-splash-screen-table>default splash-screen table</a>.</p>
-<h2 id=finding-the-splash-screen><span class=secno>9 </span>Finding the splash screen</h2>
-<p>Firstly, when processing the splash attribute in the configuration document, a user agent behaves as if the <a href=#splash-file-defaults-table>splash file defaults table</a> had been defined as part of the <a href=http://www.w3.org/TR/widgets/#table-of-configuration-defaults>Table of Configuration Defaults</a> in <a href=http://dev.w3.org/2006/waf/widgets/#step-3--set-the-configuration-defaults>Step 3</a> of the <cite>Widget Packaging</cite> specification.</p>
+<p class=note> At the time of writing, there is limited support on devices for displaying SVG as a splash screen. We recommend you include a splash screen in one of more of the other formats listed in the <a href=#default-splash-screen-table>default splash-screen table</a>.</p>
+<h2 id=finding-the-splash-screens><span class=secno>9 </span>Finding the splash screens</h2>
+<p>TODO: write how to hook into processing algorithm. </p>
+<h3 id=processing-splash-elements><span class=secno>9.1 </span>Processing splash elements</h3>
+<p>A user agent behaves as if the <a href=#splash-file-defaults-table>splash file defaults table</a> had been defined as part of the <a href=http://www.w3.org/TR/widgets/#table-of-configuration-defaults>Table of Configuration Defaults</a> in <a href=http://dev.w3.org/2006/waf/widgets/#step-3--set-the-configuration-defaults>Step 3</a> of the <cite>Widget Packaging</cite> specification.</p>
<table class=simple style="border: 1px solid black" summary="The configuration defaults that a user agent must set prior to instantiation.">
<caption>
- <dfn id=splash-file-defaults-table>Splash file defaults table</dfn>
+ <dfn id=splash-file-defaults-table>Splash file defaults table</dfn>
</caption>
<thead>
- <tr>
+ <tr>
<th scope=col>Variable</th>
<th scope=col>Type</th>
<th scope=col>Default Value</th>
@@ -164,38 +187,42 @@
</thead>
<tbody>
<tr>
- <th scope=row><dfn id=dfn-access-request-list><var>splash file</var></dfn></th>
- <td>path</td>
+ <th scope=row><dfn id=dfn-access-request-list><var>splashscreens</var></dfn></th>
+ <td>List</td>
<td><code>null</code></td>
<td><a href=http://dev.w3.org/2006/waf/widgets/#step-7--process-the-configuration-docume>Step 7</a></td>
</tr>
</tbody>
</table>
-<p>Secondly, the user agent MUST run the <a href=#steps-to-process-the-splash-attribute>steps to process the <code>splash</code> attribute</a> at
- the appropriate point in the <a href=http://dev.w3.org/2006/waf/widgets/#algorithm-to-process-a-configuration-doc>algorithm to process a
-configuration document</a>: the appropriate point is after all other attributes of the <code>content</code> element defined in the Widgets Packaging specification have been processed by the user agent. </p>
-<p>Thirdly, if no splash screen file was found by running the <span>steps to locate the splash screen file</span>, the user agent MUST attempt to locate </p>
-<h3 id=processing-the-splash-attribute><span class=secno>9.1 </span>Processing the splash attribute</h3>
-<p>The <dfn id=steps-to-process-the-splash-attribute>steps to process the splash attribute</dfn> is given by the following algorithm. </p>
+<p>The <dfn id=steps-to-process-splash-elments>steps to process splash elments </dfn> is given by the following algorithm:</p>
<ol>
- <li>
- <p>If the content element does not have an attribute whose name is "splash", then terminate this algorithm. </p>
+ <li><p>For each <code>splash</code> element in tree order:</p>
+ <ol>
+ <li>
+ <p>If the <code>splash</code> element does not have a <code>src</code> attribute, then terminate this algorithm. </p>
+ </li>
+ <li>Let <var>path</var> be the result of applying the <a href=http://www.w3.org/TR/widgets/#rule-for-getting-a-single-attribute-value-0>rule for getting a
+ single attribute value</a> to the <code title="icon src">src</code> attribute of this <code title="icon element">splash</code> element. If <var>path</var> is
+ not a <a href=http://www.w3.org/TR/widgets/#valid-path>valid path</a> or is an empty string, then terminate this algorithm. </li>
+ <li>
+ <p> Let <var title="">file</var> be the result of applying the <a href=http://www.w3.org/TR/widgets/#rule-for-finding-a-file-within-a-widget-package-0>rule for
+
+ finding a file within a widget package</a> to <var>path</var>. If <var title="">file</var> is not a <a href=http://www.w3.org/TR/widgets/#processable-file>processable file</a>, as
+ determined by applying the <a href=http://www.w3.org/TR/widgets/#rule-for-identifying-the-media-type-of-a-file-0>rule for identifying the media type of a
+ file</a>, then terminate this algorithm.
+ </p>
+ </li>
+ <li>
+ <p>If the <code>height</code> attribute is used, then let <var> height</var> be the result of applying the <a href=http://www.w3.org/TR/widgets/#rule-for-parsing-a-non-negative-integer-0>rule for parsing a non-negative integer</a> to the attribute's value. If the<var> height</var> is not <a href=http://www.w3.org/TR/widgets/#in-error>in error</a> and greater than 0, then <a href=http://www.w3.org/TR/widgets/#associate>associate</a> the <var>height</var> with <var>file</var>. Otherwise, the <code>height</code> attribute is <a href=http://www.w3.org/TR/widgets/#in-error>in error</a> and the <a href=http://www.w3.org/TR/widgets/#user-agent>user agent</a> <em>MUST</em> <a href=http://www.w3.org/TR/widgets/#ignore>ignore</a> the <code>height</code> attribute.</p>
+ </li>
+ <li>
+ <p>If the <code>width</code> attribute is used, then let <var> width</var> be the result of applying the <a href=http://www.w3.org/TR/widgets/#rule-for-parsing-a-non-negative-integer-0>rule for parsing a non-negative integer</a> to the attribute's value. If the <var>width</var> is not <a href=http://www.w3.org/TR/widgets/#in-error>in error</a> and greater than 0, then <a href=http://www.w3.org/TR/widgets/#associate>associate</a> the <var>width</var> with <var>file</var>. Otherwise, the <code>width</code> attribute is <a href=http://www.w3.org/TR/widgets/#in-error>in error</a> and the <a href=http://www.w3.org/TR/widgets/#user-agent>user agent</a> <em>MUST</em> <a href=http://www.w3.org/TR/widgets/#ignore>ignore</a> the <code>width</code> attribute.</p>
+ </li>
+ <li>
+ <p>Add <var>file</var> and any <a href=http://www.w3.org/TR/widgets/#associate title=associate>associated</a> <var>width</var> and/or <var>height</var> to the list of <a href=#dfn-access-request-list><var>splashscreens</var></a>.</p>
+ </li>
+ </ol>
</li>
- <li>
- <p>Let <var>path</var> be the result of applying the <span>rule for getting a
- single attribute value</span> to the <code title="icon src">splash</code> attribute of this <code title="icon element">content</code> element. If <var>path</var> is
- not a <span>valid path</span> or is an empty string, then terminate this algorithm. </p>
- </li>
- <li>
- <p> Let <var title="">file</var> be the result of applying the <span>rule for
-
- finding a file within a widget package</span> to <var>path</var>. If <var title="">file</var> is not a <span>processable file</span>, as
- determined by applying the <span>rule for identifying the media type of a
- file</span>, then terminate this algorithm.
- </p>
-
- </li>
- <li>Otherwise, if the file is a processable file, then let <a href=#dfn-access-request-list><var>splash file</var></a> be file.</li>
</ol>
<h3 class="no-num done" id=locate-the-default-splash-screen-file>Locate the default splash screen file</h3>
<p>The <dfn id=algorithm-to-locate-the-default-splash-screen-file>algorithm to locate the default splash-screen file </dfn> is given by the following algorithm:</p>
@@ -206,21 +233,20 @@
agent:</p>
<ol>
<li>
- <p>Let <var>potential-splash</var> be the result of applying the <span>rule for
- finding a file within a widget package</span> to <var>file name</var>.</p>
+ <p>Let <var>potential-splash</var> be the result of applying the <a href=http://www.w3.org/TR/widgets/#rule-for-finding-a-file-within-a-widget-package-0>rule for
+ finding a file within a widget package</a> to <var>file name</var>.</p>
</li>
<li>
- <p>If the <var>potential-splash</var> is a <span>processable file</span>, determined
- by the <span>media type</span> given in the media type column of thedefault splash screen table<span></span>, then let splash screen be <var>potential-splash</var><span></span> and terminate this algorithm. </p>
- </li>
- <li>
- <p>Otherwise, move onto the next <var>file name</var> in thedefault splash screen table<span></span>. If no default splash screen file is found, then terminate this algorithm. </p>
+ <p>If the <var>potential-splash</var> is a <a href=http://www.w3.org/TR/widgets/#processable-file>processable file</a>, determined
+ by the <a href=http://www.w3.org/TR/widgets/#media-type-0>media type</a> given in the media type column of the default splash screen table<span></span>, then append <var>potential-splash</var><span></span> to the <a href=#dfn-access-request-list><var>splashscreens</var></a> list and terminate this algorithm. </p>
+ <p>Otherwise, move onto the next <var>file name</var> in the default splash screen table<span></span>. If no default splash screen file is found, then terminate this algorithm. </p>
</li>
</ol>
</li>
</ol>
<h2 id=rendering-the-splash-screen><span class=secno>10 </span>Rendering the splash screen </h2>
-<p>TBW: We should provide some non-normative guidelines.</p>
+<p>A splash screen will generally cover the entire drawable area of a screen or simply a rectangle near the center of the screen. The splash screens of some applications that expect to be run full-screen usually cover the entire screen. </p>
-
+<h2 class="no-toc no-num" id=attributions>Attributions</h2>
+ <p>This article uses material from the <cite>Wikipedia</cite> article <a href=http://en.wikipedia.org/wiki/Splash_screen>"Splash screen"</a>, which is released under the <a href=http://creativecommons.org/licenses/by-sa/3.0/>Creative Commons Attribution-Share-Alike License 3.0</a>.</p>
</body></html>
\ No newline at end of file
--- a/splashscreen/Overview.src.html Fri May 11 18:29:13 2012 +0100
+++ b/splashscreen/Overview.src.html Fri May 11 18:30:58 2012 +0100
@@ -1,40 +1,22 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html>
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta charset=UTF-8>
+<link href=http://www.whatwg.org/style/specification rel=stylesheet>
<title>Splash screen for native web apps</title>
-<style type="text/css">
-em.ct {
- text-transform:uppercase;
- font-style:normal;
- font-weight:normal;
-}
-em.ct-samp {
- text-transform:uppercase;
- font-style:normal;
- font-weight:normal;
-}
-a.bibref {
- text-decoration: none;
-}
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal;
- color: #900;
+<style>
+span{
+ border-bottom: 1px solid #CCC
+
}
</style>
+
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/base"/>
-<style type="text/css">
-a.internalDFN { color: inherit;
- border-bottom: 1px solid #99c;
- text-decoration: none;
-}
-</style>
+
</head>
<body>
-<div class="head"><!--end-logo-->
+<div class="head">
+<p class=logo><a href=http://www.w3.org/><img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72></a></p>
<h1>Splash screen for native web apps</h1>
<p><a href="http://dvcs.w3.org/hg/nativeapps/raw-file/tip/splashscreen/Overview.html">Latest Draft</a> | <a href="http://dvcs.w3.org/hg/nativeapps/raw-file/tip/splashscreen/test-suite/Overview.html
@@ -47,65 +29,98 @@
<dd>Brian LeRoux, Scott Wilson</dd>
<dt>Quality assurer:</dt>
<dd>Marcos Cáceres</dd>
- <dt>Provenance:</dt>
+ <dt>Provenance of specification:</dt>
<dd><a href="http://lists.w3.org/Archives/Public/public-native-web-apps/2011Dec/0002.html">Call for Consensus </a></dd>
</dl>
- <p class="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="http://i.creativecommons.org/p/zero/1.0/80x15.png"></a>
-To the extent possible under law, the editor has waived all copyright and
-related or neighboring rights to this work. In addition, as of
-[DATE], the editors have made this specification available
-under the
-<a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
-which is available at
-http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
-<!-- XXX
-When published on W3C TR, the following paragraph applies as well.
--->
-<!-- XXX copyright-->
+ <!-- the following paragraph added by request of Ian Jacobs and David Singer -->
+ <p class=copyright> Copyright ©2011 the Contributors to the <cite>Splash Screen for Native Web Apps Specification</cite>, published by the <a href=http://www.w3.org/community/native-web-apps/>W3C Native Web Apps Community Group</a> under the
+ <a href=http://www.w3.org/community/about/agreements/cla/>W3C Community Contributor License Agreement (CLA)</a>.
+ A human-readable <a href=http://www.w3.org/community/about/agreements/cla-deed/>summary</a> is available. </p>
+
+ <p class=copyright>This specification is not a W3C Standard nor
+ is it on the W3C Standards Track. Please note that under the <a href=http://www.w3.org/community/about/agreements/cla/>W3C
+ Community Contributor License Agreement (CLA)</a> there is a
+ limited opt-out and other conditions apply. Learn more about <a href=http://www.w3.org/community/>W3C Community and Business
+ Groups</a>.</p>
</div>
</div>
<h2 class="no-num no-toc" id="toc">Abstract</h2>
-<p>TBW... </p>
+<p>This document specifies a number of ways to give an application a splash screen (known also as a "launch image"). A splash screen is an image that appears while a game or application is loading. </p>
<h2 class="no-num no-toc">Table of Contents</h2>
<!--toc-->
<h2>Status of this document</h2>
<p>This document is undergoing rapid development and is changing frequently. It is inappropriate to cite this document as anything other than a work in progress. </p>
+<h3>Issues</h3>
+<p>The following is a list of issues we are still trying to resolve:</p>
+<ul>
+ <li>Should width and height matter? </li>
+</ul>
<h2>Introduction</h2>
<p><em>This section is non-normative.</em></p>
-<p>TBW</p>
-<h3>Example: using the default splash screen file</h3>
-<p> </p>
-<h3>Example: using the content element</h3>
-<p>The following example shows how to use the <code>splash</code> attribute. </p>
+<p>Because of the limited processing capabilities of some devices and the amount of time it takes to initialize a Web runtime, there can be a small - yet noticeably perceivable - delay between when the end-user starts an application and the application actually becoming available and interactive to the end-user. </p>
+<p>Depending on the complexity of the application and the processing power of the device, this delay can range from a few milliseconds to a couple of seconds. When applications take more than a few seconds to load, it can be disorienting to end-users as nothing is displayed on the screen; leading to a poor user experience. Native applications overcome this issue by allowing developers to use a media file that is displayed the instant the application is launched. Such a file is commonly referred to as a "splash screen" or "launch image". </p>
+<p>This document defines two ways for a native web application to include a <span>splash screen</span>: </p>
+<ul>
+ <li>Including a <span>default splash-screen</span> image at the root of the widget package. </li>
+ <li>Declaring one or more <code>splash</code> elements in the configuration document of an application.</li>
+</ul>
+<h3>Example: using the splash element</h3>
+<p>The following example shows how to use multiple <code>splash</code> elements. </p>
<pre>
-<widget xmlns="http://www.w3.org/ns/widgets">
- <content splash="logo.png"/>
+<widget xmlns="http://www.w3.org/ns/widgets">
+ <splash src="splash/320x480.png"/>
+ <splash src="splash/640x960.png"/>
+ <splash src="splash/768x1004.png"/>
+ <splash src="splash/1024x748.png"/>
</widget>
</pre>
<p>Might appear as the following in a conforming user agent: </p>
<p><img src="images/device_portrait.png" width="209" height="228" alt="Loading screen" /></p>
<h2>Use cases and requirements</h2>
<p><em>This section is non-normative.</em></p>
-<p>TBW</p>
+<ul>
+ <li>R1. Must be localizable.</li>
+ <li>R2. should follow existing practice. </li>
+ <li>Must allow multiple files to be defined</li>
+ <li>Must make it easy for developers, so they don't need to have to deal with width and heights. </li>
+</ul>
<h2 id="conformance">Conformance</h2>
-<p>Everything is this specification is normative except sections marked as non-normative, diagrams, examples, and notes.</p>
+<p>Everything in this specification is normative except sections marked as non-normative, diagrams, examples, and notes.</p>
<p>The key words <em class="rfc2119" title="must">must</em>, <em class="rfc2119" title="must not">must not</em>, <em class="rfc2119" title="required">required</em>, <em class="rfc2119" title="should">should</em>, <em class="rfc2119" title="should not">should not</em>, <em class="rfc2119" title="recommended">recommended</em>, <em class="rfc2119" title="may">may</em>, and <em class="rfc2119" title="optional">optional</em> in this specification are to be interpreted as described in <cite>RFC2119</cite>.</p>
<p> This specification defines conformance criteria that apply to a single product: a <span>user agent</span>. </p>
<h2>User Agents</h2>
-<p>A <dfn id="product-ua" title="user agent">user agent</dfn> a software application that implements this specification and
+<p>A <dfn id="product-ua" title="user agent">user agent</dfn> is a software application that implements this specification and
the <cite>Widget Packaging</cite> specification and its dependencies. </p>
<h2>Splash screen</h2>
-<p>TBW: define what splash screen is.</p>
-<h2>The <code>splash</code> attribute</h2>
-<p>The <dfn>splash attribute</dfn> is <span>path attribute</span> of the <code>content</code> element that allows an author to point to a <span>file</span> within the <span>widget package</span>. This file is then used as the splash screen for an application. </p>
+<p>A <dfn>splash screen</dfn> is a media file, typically an image, that is displayed to the user while the application is being asynchronously loaded in the background. It's purpose is to give an end user immediate feedback that an application is starting and loading in the background. </p>
+<h2>The <code>splash</code> element and its attributes</h2>
+<p>The splash element allows an author to declare a <span>splash screen</span> for an application. </p>
+<dl>
+ <dt>Context in which this element is used:</dt>
+ <dd>As a child of the <code title="widget element">widget</code> element.</dd>
+ <dt>Content model:</dt>
+ <dd>Empty.</dd>
+ <dt>Occurrences:</dt>
+ <dd>Zero or more.</dd>
+ <dt>Localizable via <code>xml:lang</code>:</dt>
+ <dd>No. Relies on <span>folder-based localization</span>.</dd>
+ <dt>Attributes:</dt>
+ <dd><span title="global attributes">Global attributes</span>, <code title="icon src">src</code>, <code title="icon width">width</code>, <code title="icon height">height</code>. </dd>
+ </dl>
+<h3>The <code>src</code> attribute</h3>
+<p>The <code>src</code> attribute is <span><a href="http://www.w3.org/TR/widgets/#path-attribute">path attribute</a></span> of the <code>splash</code> element that allows an author to point to a <span>file</span> within the <span><a href="http://www.w3.org/TR/widgets/#widget-package">widget package</a></span>. This file is then used as the <span>splash screen</span> for an application. </p>
+<h3>The <code>width</code> attribute</h3>
+<p>A <a href="http://www.w3.org/TR/widgets/#valid-non-negative-integer" title="valid non-negative integer">numeric attribute</a> greater than 0 that represents, in <a href="http://www.w3.org/TR/CSS21/syndata.html#length-units">CSS pixels</a>, the author's preferred width for the splash screen. </p>
+<h3>The <code>height</code> attribute </h3>
+<p>A <a href="http://www.w3.org/TR/widgets/#valid-non-negative-integer" title="valid non-negative integer">numeric attribute</a> greater than 0 that represents, in <a href="http://www.w3.org/TR/CSS21/syndata.html#length-units">CSS pixels</a>, the author's preferred height for the splash screen. </p>
<h2>The default splash screen</h2>
-<p>A <dfn>default splash-screen </dfn> is a <span>reserved</span> <span>image</span>, either at the <span>root of the widget package</span> or at the root of a <span>locale
+<p>A <dfn>default splash-screen </dfn> is a <a href="http://www.w3.org/TR/widgets/#reserved">reserved</a> <span>image</span>, either at the <span>root of the widget package</span> or at the root of a <span>locale
folder</span>, whose file
- name case-sensitively and exactly matches a file name given in the file name column of
+ name case-sensitively matches a file name given in the file name column of
the <span>default splash-screen table</span>.</p>
-<table>
+<table class="simple" >
<caption>
<dfn>Default Splash-Screen Table</dfn>
</caption>
@@ -131,15 +146,17 @@
</tr>
</table>
<p>It is <em class="ct">optional</em> for a <span>user agent</span> to <span title="supported">support</span> the <span title="media type">media types</span> listed in the <span>default splash-screen table</span>.</p>
-<p>Authoring guideline: At the time of writing, there is limited support on devices for displaying SVG as a splash screen. We recommend you include a splash screen in one of more of the other formats listed in the <span>default splash-screen table</span>.</p>
-<h2>Finding the splash screen</h2>
-<p>Firstly, when processing the splash attribute in the configuration document, a user agent behaves as if the <span>splash file defaults table</span> had been defined as part of the <a href="http://www.w3.org/TR/widgets/#table-of-configuration-defaults">Table of Configuration Defaults</a> in <a href="http://dev.w3.org/2006/waf/widgets/#step-3--set-the-configuration-defaults">Step 3</a> of the <cite>Widget Packaging</cite> specification.</p>
+<p class="note"> At the time of writing, there is limited support on devices for displaying SVG as a splash screen. We recommend you include a splash screen in one of more of the other formats listed in the <span>default splash-screen table</span>.</p>
+<h2>Finding the splash screens</h2>
+<p>TODO: write how to hook into processing algorithm. </p>
+<h3>Processing splash elements</h3>
+<p>A user agent behaves as if the <span>splash file defaults table</span> had been defined as part of the <a href="http://www.w3.org/TR/widgets/#table-of-configuration-defaults">Table of Configuration Defaults</a> in <a href="http://dev.w3.org/2006/waf/widgets/#step-3--set-the-configuration-defaults">Step 3</a> of the <cite>Widget Packaging</cite> specification.</p>
<table summary="The configuration defaults that a user agent must set prior to instantiation." class="simple" style="border: 1px solid black">
<caption>
- <dfn>Splash file defaults table</dfn>
+ <dfn>Splash file defaults table</dfn>
</caption>
<thead>
- <tr>
+ <tr>
<th scope="col">Variable</th>
<th scope="col">Type</th>
<th scope="col">Default Value</th>
@@ -148,38 +165,42 @@
</thead>
<tbody>
<tr>
- <th scope="row"><dfn id="dfn-access-request-list"><var>splash file</var></dfn></th>
- <td>path</td>
+ <th scope="row"><dfn id="dfn-access-request-list"><var>splashscreens</var></dfn></th>
+ <td>List</td>
<td><code>null</code></td>
<td><a href="http://dev.w3.org/2006/waf/widgets/#step-7--process-the-configuration-docume">Step 7</a></td>
</tr>
</tbody>
</table>
-<p>Secondly, the user agent MUST run the <span>steps to process the <code>splash</code> attribute</span> at
- the appropriate point in the <a href="http://dev.w3.org/2006/waf/widgets/#algorithm-to-process-a-configuration-doc">algorithm to process a
-configuration document</a>: the appropriate point is after all other attributes of the <code>content</code> element defined in the Widgets Packaging specification have been processed by the user agent. </p>
-<p>Thirdly, if no splash screen file was found by running the <span>steps to locate the splash screen file</span>, the user agent MUST attempt to locate </p>
-<h3>Processing the splash attribute</h3>
-<p>The <dfn>steps to process the splash attribute</dfn> is given by the following algorithm. </p>
+<p>The <dfn>steps to process splash elments </dfn> is given by the following algorithm:</p>
<ol>
- <li>
- <p>If the content element does not have an attribute whose name is "splash", then terminate this algorithm. </p>
+ <li><p>For each <code>splash</code> element in tree order:</p>
+ <ol>
+ <li>
+ <p>If the <code>splash</code> element does not have a <code>src</code> attribute, then terminate this algorithm. </p>
+ </li>
+ <li>Let <var>path</var> be the result of applying the <a href="http://www.w3.org/TR/widgets/#rule-for-getting-a-single-attribute-value-0">rule for getting a
+ single attribute value</a> to the <code title="icon src">src</code> attribute of this <code title="icon element">splash</code> element. If <var>path</var> is
+ not a <a href="http://www.w3.org/TR/widgets/#valid-path">valid path</a> or is an empty string, then terminate this algorithm. </li>
+ <li>
+ <p> Let <var title="">file</var> be the result of applying the <a href="http://www.w3.org/TR/widgets/#rule-for-finding-a-file-within-a-widget-package-0">rule for
+
+ finding a file within a widget package</a> to <var>path</var>. If <var title="">file</var> is not a <a href="http://www.w3.org/TR/widgets/#processable-file">processable file</a>, as
+ determined by applying the <a href="http://www.w3.org/TR/widgets/#rule-for-identifying-the-media-type-of-a-file-0">rule for identifying the media type of a
+ file</a>, then terminate this algorithm.
+ </p>
+ </li>
+ <li>
+ <p>If the <code>height</code> attribute is used, then let <var> height</var> be the result of applying the <a href="http://www.w3.org/TR/widgets/#rule-for-parsing-a-non-negative-integer-0">rule for parsing a non-negative integer</a> to the attribute's value. If the<var> height</var> is not <a href="http://www.w3.org/TR/widgets/#in-error">in error</a> and greater than 0, then <a href="http://www.w3.org/TR/widgets/#associate">associate</a> the <var>height</var> with <var>file</var>. Otherwise, the <code>height</code> attribute is <a href="http://www.w3.org/TR/widgets/#in-error">in error</a> and the <a href="http://www.w3.org/TR/widgets/#user-agent">user agent</a> <em>MUST</em> <a href="http://www.w3.org/TR/widgets/#ignore">ignore</a> the <code>height</code> attribute.</p>
+ </li>
+ <li>
+ <p>If the <code>width</code> attribute is used, then let <var> width</var> be the result of applying the <a href="http://www.w3.org/TR/widgets/#rule-for-parsing-a-non-negative-integer-0">rule for parsing a non-negative integer</a> to the attribute's value. If the <var>width</var> is not <a href="http://www.w3.org/TR/widgets/#in-error">in error</a> and greater than 0, then <a href="http://www.w3.org/TR/widgets/#associate">associate</a> the <var>width</var> with <var>file</var>. Otherwise, the <code>width</code> attribute is <a href="http://www.w3.org/TR/widgets/#in-error">in error</a> and the <a href="http://www.w3.org/TR/widgets/#user-agent">user agent</a> <em>MUST</em> <a href="http://www.w3.org/TR/widgets/#ignore">ignore</a> the <code>width</code> attribute.</p>
+ </li>
+ <li>
+ <p>Add <var>file</var> and any <a href="http://www.w3.org/TR/widgets/#associate" title="associate">associated</a> <var>width</var> and/or <var>height</var> to the list of <var>splashscreens</var>.</p>
+ </li>
+ </ol>
</li>
- <li>
- <p>Let <var>path</var> be the result of applying the <span>rule for getting a
- single attribute value</span> to the <code title="icon src">splash</code> attribute of this <code title="icon element">content</code> element. If <var>path</var> is
- not a <span>valid path</span> or is an empty string, then terminate this algorithm. </p>
- </li>
- <li>
- <p> Let <var title="">file</var> be the result of applying the <span>rule for
-
- finding a file within a widget package</span> to <var>path</var>. If <var title="">file</var> is not a <span>processable file</span>, as
- determined by applying the <span>rule for identifying the media type of a
- file</span>, then terminate this algorithm.
- </p>
-
- </li>
- <li>Otherwise, if the file is a processable file, then let <var>splash file</var> be file.</li>
</ol>
<h3 class="no-num done">Locate the default splash screen file</h3>
<p>The <dfn>algorithm to locate the default splash-screen file </dfn> is given by the following algorithm:</p>
@@ -190,20 +211,19 @@
agent:</p>
<ol>
<li>
- <p>Let <var>potential-splash</var> be the result of applying the <span>rule for
- finding a file within a widget package</span> to <var>file name</var>.</p>
+ <p>Let <var>potential-splash</var> be the result of applying the <a href="http://www.w3.org/TR/widgets/#rule-for-finding-a-file-within-a-widget-package-0">rule for
+ finding a file within a widget package</a> to <var>file name</var>.</p>
</li>
<li>
- <p>If the <var>potential-splash</var> is a <span>processable file</span>, determined
- by the <span>media type</span> given in the media type column of thedefault splash screen table<span></span>, then let splash screen be <var>potential-splash</var><span></span> and terminate this algorithm. </p>
- </li>
- <li>
- <p>Otherwise, move onto the next <var>file name</var> in thedefault splash screen table<span></span>. If no default splash screen file is found, then terminate this algorithm. </p>
+ <p>If the <var>potential-splash</var> is a <a href="http://www.w3.org/TR/widgets/#processable-file">processable file</a>, determined
+ by the <a href="http://www.w3.org/TR/widgets/#media-type-0">media type</a> given in the media type column of the default splash screen table<span></span>, then append <var>potential-splash</var><span></span> to the <var>splashscreens</var> list and terminate this algorithm. </p>
+ <p>Otherwise, move onto the next <var>file name</var> in the default splash screen table<span></span>. If no default splash screen file is found, then terminate this algorithm. </p>
</li>
</ol>
</li>
</ol>
<h2>Rendering the splash screen </h2>
-<p>TBW: We should provide some non-normative guidelines.</p>
-</body>
-</html>
+<p>A splash screen will generally cover the entire drawable area of a screen or simply a rectangle near the center of the screen. The splash screens of some applications that expect to be run full-screen usually cover the entire screen. </p>
+
+<h2 class="no-toc no-num">Attributions</h2>
+ <p>This article uses material from the <cite>Wikipedia</cite> article <a href="http://en.wikipedia.org/wiki/Splash_screen">"Splash screen"</a>, which is released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</a>.</p>