<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Opera's position on Web Application Formats</title>
  <style>
   section { display:block }
  </style>
  <style media="projection">
   /* margin handling basically sucks, perhaps the spec can be changed.
      It's not that anyone has proper printing support. */
   html { height:100%; font:1em/1 Verdana, sans-serif; background:#000; color:#fff }
   body { margin:0; padding:0; height:100% }
   section { height:100%; padding:4em 2em 2em; box-sizing:border-box; page-break-after:always; color:#000 }
   section#position { background:url(position.jpg) }
   section#needs { background:url(needs.jpg) }
   section#how { background:url(how.jpg) }
   section#what { background:url(what.jpg) }
   section#what svg { margin-top:-5em; float:left }
   section#not-yaml { background:url(not-yaml.jpg) }
   h1 { margin:0; padding:.2em; text-align:right; text-transform:uppercase; font-size:5em; background:url(half-transparent.png); }
   ul { margin:2em 0 0; padding:1em 1em 1em 50px; clear:both; font-size:2.5em; line-height:1.5; background:url(half-transparent.png) }
   p { margin:2em 0 0; padding:1em; font-size:2.5em; line-height:1.5; background:url(half-transparent.png) }
   p + p { margin-top:0; padding-top:0 }
   abbr { border:none }
  </style>
 </head>
 <body>
  <section xml:id="position">
   <h1>Opera's position on <abbr title="Web Application Formats">WAF</abbr></h1>
   <p>By Anne van Kesteren</p>
   <p>2 March 2006</p>
  </section>
  <section xml:id="needs">
   <h1>Needs</h1>
   <ul>
    <li>One Web</li>
    <li>Desktop to the Web</li>
    <li>Native Look and Feel</li>
    <li>Secure</li>
   </ul>
  </section>
  <section xml:id="how">
   <h1>How</h1>
   <ul>
    <li><abbr title="HyperText Markup Language">HTML</abbr> or <abbr title="Extensible HyperText Markup Language">XHTML</abbr></li>
    <li><abbr title="Cascading Style Sheets">CSS</abbr></li>
    <li><abbr title="Document Object Model">DOM</abbr></li>
    <li>ECMAScript</li>
   </ul>
  </section>
  <section xml:id="what">
   <!-- presentation markup inside content markup... -->
   <svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(160 150)">
     <circle id="circle1" style="fill:gray;stroke-width:1;opacity:.8" cx="0" cy="0" r="30">
      <animateTransform attributeName="transform" type="rotate" values="0;360" additive="sum" dur="3s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="scale" values="4 1;0.5 1;4 1" additive="sum" dur="4s" repeatDur="indefinite"/>
     </circle>
     <circle id="circle2" style="fill:#b21719;stroke-width:3;opacity:.7" cx="0" cy="0" r="30">
      <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="rotate" values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="7s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="scale" values="1 5;3 0.5;1 5" additive="sum" dur="3s" repeatDur="indefinite"/>
     </circle>
     <circle id="circle3" style="fill:#8d919b;stroke-width:3;opacity:.5" cx="0" cy="0" r="30">
      <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="rotate" values="0;20;-30;190;90;170;220;190;210;170;0" additive="sum" dur="7s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="scale" values="1 5;3 0.5;1 5" additive="sum" dur="3s" repeatDur="indefinite"/>
     </circle>
     <circle id="circle4" style="fill:#b21719;stroke-width:3;opacity:.7" cx="0" cy="0" r="20">
      <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="rotate" values="0;30;-30;190;90;70;120;290;110;170;0" additive="sum" dur="8s" repeatDur="indefinite"/>
      <animateTransform attributeName="transform" type="scale" values="4 1;0.5 1;4 1" additive="sum" dur="3s" repeatDur="indefinite"/>
      </circle>
    </g>
   </svg>
   <h1>What</h1> <!-- not to be confused with WHATWG -->
   <ul>
    <li>Opera Platform</li>
    <li>Opera Widgets</li>
   </ul>
   <!-- insert some opera platform image -->
  </section>
  <section xml:id="not-yaml">
   <h1>Not <abbr title="Yet Another Markup Language">YAML</abbr></h1>
   <ul>
    <li>Applications for Mobiles are Built Today</li>
    <li>Need for Incremental Innovation</li>
   </ul>
  </section>
 </body>
</html>

