ÿþ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>Web Standard Futures</title> <link rel="stylesheet" media="screen,print,projection" href="style.css"> <style> li {list-style-type: none} :visited {color:white} @media handheld { * { margin: 2px; padding: 2px } .slide {margin-bottom:1em; border: 1px black solid; background:url('operalittle.png')} #first,.notes,.screen {display:none} head,title {display:block} } </style> </head> <body> <div class="screen"> <p>This slideset is designed for Opera, and some demos use features only available in the Opera Video Builds or Opera 10 alpha. The basic content should work in any browser.</p> <p>To see this in presentation mode using Opera, simply select "View" ->"Full Screen". To see how all this is done, view the source...</p> <h2 class="notes">The notes are not rendered in mobile, print or projection media</h2> </div> <div class="slide" id="first"> <h1>Standard futures</h1> <h2><del>Charles McCathieNevile</del><br />chaals</h2> <h3>Opera Software</h3> </div> <div class="slide"> <h1>Topics</h1> <dl style="font-size:.8em"> <dt>Ads...</dt> <dt>Old stuff</dt> <dd>MathML, SVG</dd> <dd>XmlHttpRequest - a standard</dd> <dt>New stuff</dt> <dd>ARIA - accessibility</dd> <dd>HTML5 - video, canvas, webforms</dd> <dd>Widgets - File I/O, Dragonfly</li> <dd>CSS, Webfonts, Canvas3D</dd> </ul> </div> <div class="slide"> <h1>Opera: Browsers</h1> <ul> <li>Portable fast browser code</li> <li>Browsers on 20-30 Systems</li> <li>Plus <ul> <li>my.opera</li> <li>widgets.opera</li> <li>Opera Mini server</li></ul></li> </ul> </div> <div class="slide"> <h1>Opera the company</h1> <ul> <li>1994: 2 guys in dad's kitchen in Oslo</li> <li>2009: ~ 650 people from 50 countries<br/> (and hiring more)</li> <li>Russia, Ukraine, top for Opera users</li> </ul> </div> <div class="slide"> <h1>Why standards?</h1> <ul> <li>Standards made the Web grow</li> <li>The Web works everywhere</li> <li>Easiest place to build software</li> <li>Good standards help developers</li> <li>The right standards help creators</li> </ul> <p>"The Web is the platform"</p> </div> <div class="slide"> <h1>Standards @ Opera</h1> <p>25 employees work on standards</p> <ul> <li>Mostly at W3C - a big player</li> <li>Working on many standards</li> <li>Bringing new work to W3C</li> <li>Implementing Standards properly</li> </ul> <p>(Web Standards Curriculum)</p> </div> <div class="slide"> <h1>MathML</h1> <iframe style="float:right;width:35%;height:60%;background:#fff;color:#000" src="torture.xhtml"></iframe> <ul> <li>Giorgi Chavchanidze</li> <li><a href="torture.xhtml">MathML for CSS</a></li> <li>Solve the 80% case</li> <li>Uses CSS, XML, SVG|PNG</li> <li>From Opera 9.5 on...</li> </ul> </div> <div class="slide"> <h1>SVG</h1> <p>(Scalable Vector Graphics)</p> <p class="notes">Does what it says on the box. The tiger, zoomed, is me at the end of a week of W3C meetings</p> <object data="tiger.svg" class="right"></object> <ul> <li>XML format from W3C</li> <li>10 years old...</li> <li>Common in Phones<br/> (500+ million phones...)</li> <li>Now in Web Browers too</li> </ul> </div> <!--div class="slide"> <h1>more SVG</h1> <h2>Scalable Vector Graphics</h2> <p>Rich interactive graphics, video, etc</p> <object data="clock.svg" class="right"></object> <ul> <li>Declarative animation</li> <li>Can be hand-written<br /> (even by dummies)</li> <li>Or come from PHP</li> <li>or XSLT / Javascript</li> </ul> </div> <div class="slide"> <h1>Inside some SVG</h1> <p>(The minute hand...) <pre><code>&lt;g id="m"&gt; &lt;line stroke-width="4" y2="95" stroke="red" opacity=".9" /&gt; &lt;animateTransform type="rotate" <span style="color:#aaa"> attributeName="transform" repeatCount="indefinite"</span> dur="60min" by="360" /&gt; &lt;circle r="6" fill="red"/&gt; &lt;/g&gt;</code></pre> </div--> <div class="slide"> <h1>Standards at work</h1> <p class="notes">What it is like to work in W3C - meetings, meetings, feedback, asking people for more feedback (including students), ...</p> <p>XMLHttpRequest (the "Ax" in Ajax)</p> <ul> <li>10 years old, from IE (!)</li> <li>No <em>standard</em> until now</li> <li>Anne van Kesteren, editor</li> <li><a href="http://www.w3.org/TR/xmlhttprequest">In final phases</a> now...<br />...so we started on level 2</li> </ul> </div> <div class="slide"> <h1>ARIA - accessible Web 2.0</h1> <ul> <li>New controls - <a href="http://test.cita.uiuc.edu/aria/checkbox/checkbox3.php" target="_blank">images + javascript</a> <br /> - but it doesn't work in screenreaders</li> <li>"tag" the code: <code>&lt;... aria-role="checkbox"></li> <li>The browser knows what a checkbox is<br /> - so it can tell the screenreader</li> <li>A hack for HTML - needed for SVG</li> </ul> </div> <div class="slide"> <h1>HTML 5</h1> <p>Upgrading the train tracks</p> <ul> <li>Developed 2005 - ???</li> <li>Parsing model that works</li> <li>New features <ul> <li>Web forms</li> <li>Audio/Video, Canvas</li> </ul></li> </ul> <p>(+ inline SVG/MathML, new APIs, ...)</p> </div> <div class="slide"> <h1>Video and canvas</h1> <ul> <li>Making video simple:<br /> <a href="controls.html" target="_blank"><code>&lt;video src="foo.ogg" controls&gt;</code></a></li> <li><code>&lt;canvas width="100" height="100"&gt;></code> <ul> <li>Plus a <a href="canvasgame/index.html" target="_blank">fast drawing API</a></li> <li><code>toDataURL()</code> and more</li> </ul></li> </ul> </div> <div class="slide"> <h1>More video demos</h1> <dl> <dt>in HTML5</dt> <dd>The <a href="controls.html" target="_blank">simple example</a> again</dd> <dd><a href="demos/opacity2.html" target="_blank">With author-styled controls</a></dd> <dt>in SVG</dt> <dd>Using <a href="demos/vidfilter.svg" target="_blank">filters</a></dd> <dd>Using <a href="pinkvid.svg" target="_blank">Animation</a>, (<a href="demos/svganim/demo.svg" target="_blank"><em>My</em> animation</a>)</dd> <dd>Scripts for <a href="clip-move.svg" target="_blank">dynamic</a> <a href="pvideo2.svg" target="_blank">interactivity</a> </dl> </div> <div class="slide"> <h1>Video Politics</h1> <ul> <li>Most Video is not free to make or use</li> <li>Ogg/Theora is (in Opera/Firefox)</li> <li>So is DIRAC, from the BBC</li> <li>Will they be standards we can use?<br /> (on mobiles?)</li> </ul> </div> <div class="slide"> <h1>Web forms</h1> <ul> <li>Better than HTML4, simpler than Xforms</li> <li><code>&lt;input type="date"&gt;</code>: <input type="date"></li> <li><code>&lt;input type="url"&gt;</code>: <input type="url"></li> <li>Simple validation, more types</li> <li><a href="demos/webformsdemo.html" target="_blank">Repeating model (?)</a></li> </ul> </div> <div class="slide"> <h1>Widgets...</h1> <p>(little web technology applications)</p> <ul> <li>Installed to the machine</li> <li>Use the browser as an engine</li> <li>Work offline or online</li> <li>Only download the data that changes</li> <li>Use any available Web standards</li> <li>Simple examples are very simple...</li> </ul> </div> <div class="slide"> <h1><a href="widgets.mht">Widgets...</a></h1> <p>This simple:</p> <pre><code>&lt;widget&gt; &lt;widgetname&gt;Hello&lt;/widgetname&gt; &lt;width&gt;320&lt;/width&gt; &lt;height&gt;100&lt;/height&gt; &lt;/widget&gt;</code></pre> <p>(plus an HTML page)</p> </div> <div class="slide"> <h1>Widgets and Standards</h1> <ul> <li><a href="http://www.w3.org/TR/widgets">W3C Version 1.0</a> nearly done</li> <li>Widgets work on phones already</li> <li>Web power, plus (coming): <ul> <li>File system access (Opera demo version)</li> <li>System functions (Camera, SMS ...)</li> </ul></li> </ul> </div> <div class="slide"> <h1>New stuff - File I/O</h1> <p>A <strong>real file space</strong> for Web applications</p> <ul> <li>Try File I/O (for widgets) in Opera</li> <li>Beware of security risks</li> <li><a href="http://labs.opera.com">Labs.opera.com</a>: docs and demos</li> <li>Proposed to W3C Web Apps group</li> </ul> <p>Build a video sharing app with BitTorrent?</p> </div> <div class="slide"> <h1><a href="http://dragonfly.pera.com">Dragonfly</a> - widgets plus...</h1> <h2>Dragonfly</h2> <p>Developer tools. Think Firebug, evolved.</p> <h2>Scope</h2> <p>The cool bit. Looking into a remote device.</p> </div> <div class="slide"> <h1>Why Dragonfly?</h1> <ul> <li>Debugging is important</li> <li>Remote debugging is hard</li> <li>An emulator is not the same</li> <li>Because we can...</li> <li>We like cool stuff :)</li> </ul> </div> <div class="slide"> <h1>Inside Dragonfly</h1> <ul> <li>It's a web application</li> <li>But it works as a <strong>widget</strong></li> <li>Has a live update</li> <li>Open source, BSD-style license</li> </ul> <p>(try it in Opera 9.5 + <br /> <kbd>Tools -> Advanced -> Developer Tools</kbd></p> </div> <div class="slide" id="dom"> <h1>What Dragonfly does</h1> <h2>Developer stuff</h2> <dl> <dt><img class="right" src="dfly/dom.png" alt="" title="screenshot"/>DOM inspection</dt> <dd>Export current DOM</dd> <dd>Live edit the DOM</dd> <dt>Step through scripts</dt> <dd>Insert breakpoints</dd> <dd>Use command line</dd> </dl> </div> <div class="slide" id="style"> <h1>What else it does</h1> <dl> <dt><img class="right" src="dfly/style.png" alt="" title="screenshot"/>Style inspector</dd> <dd>Style sheets</dd> <dd>Style rules</dd> <dd>Computed style</dd> </dl> </div> <div class="slide" id="console"> <h1>Wait! There's more...</h1> <dl> <dt><img class="right" src="dfly/console.png" alt="" title="screenshot"/>Error console</dt> <dd>CSS errors</dd> <dd>SVG errors</dd> <dd>Network problems</dd> <dd>Mail issues</dd> <dd>etc etc</dd> </dl> </div> <div class="slide"> <h1>How it works</h1> <h2>"Scope" - an inspection API</h2> <object class="right" data="dfly/single.svg"></object> <ul> <li>Dragonfly...</li> <li>...proxy...</li> <li>...Scope</li> </ul> <p>Typically, all in one instance</p> </div> <div class="slide"> <h1>2 instances</h1> <div class="centre"><object data="dfly/local.svg"></object></div> <p>But you can run 2 instances locally</p> </div> <div class="slide"> <h1>Go Remote</h1> <div class="centre"><object data="dfly/remote.svg"></object></div> <p>Or debug across the network</p> <p>For example, edit my DOM live!</p> </div> <div class="slide"> <h1>Dragonfly and standards</h1> <p>(standardise <code>Console</code> already!)</p> <p>A standard scope API?</p> <ul> <li>Debug different browsers</li> <li>Choose your dev environment</li> <li>More efficient testing</li> </ul> <p> =&gt; Making good development faster</p> </div> <div class="slide"> <h1>New stuff in CSS</h1> <ul> <li><a href="demos/text-shadow.htm" style="text-shadow: .1em .1em .3em white" target="_blank">Text Shadows</a></li> <li><code>border-radius</code> (rounded corners)</li> <li>Lots of little things...</li> <li>Transitions? (like SVG animations)</li> <li>Web fonts - make your own font</li> </ul> </div> <div class="slide"> <h1>Web fonts</h1> <p>(<a href="http://my.opera.com/desktopteam">get Opera 10 alpha</a> to try this)</p> <ul> <li>Few fonts are common</li> <li>Many free fonts available</li> <li>CSS2, SVG - 10 year old standards...</li> <li>Let's make them work in pages...<br /> - use SVG or TTF fonts</li> </ul> </div> <div class="slide"> <h1>Using Web fonts</h1> <pre><code>@font-face { font-family: "My SVG font"; src: url("http://www.myweb.com/fonts/myfont.svg#myFont") format("svg"); font-style: normal, italic; font-weight: 500; } </code></pre> </div> <div class="slide"> <h1>Experiments - 3D <code>&lt;canvas&gt;</code></h1> <object data="3dstuff/canvas3d_example2.html" class="right" style="height:60%"></object> <p>Not yet proposed for standardisation</p> <ul> <li>Experimental builds</li> <li>From <a href="http://labs.opera.com">labs.opera.com</a></li> <li>Examples and explanations</li> <li>Feedback matters</li> </ul> <p>Another <a href="3dstuff/3dsnake.htm" target="_blank">test example</a>...</p> </div> <div class="slide"> <h1>Build links</h1> <p>Video, File I/O, 3Dcanvas demos need an Opera experimental build.</p> <p>To learn more read <a href="/news/2008/07/18/">All together now: Video, 3D, File access</a>.</p> <h4>Download:</h4> <ul> <li><a href="http://snapshot.opera.com/unix/snapshot_io_video_3d-2069/">Opera 9.52 preview for Linux/UNIX</a></li> <li><a href="http://snapshot.opera.com/windows/o952s_io_video_3d_10093m.exe">Opera 9.52 preview for Windows</a> (MSI installer)</li> <li><a href="http://snapshot.opera.com/windows/o952s_io_video_3d_10093.exe">Opera 9.52 preview for Windows</a> (Classic installer)</li> <li><a href="http://snapshot.opera.com/mac/o952s_io_video_3d_4899.dmg">Opera 9.52 preview for Mac</a></li> </ul> </div> <div class="slide"> <h1>Build links</h1> <p>Webfonts need an Opera 10 alpha build.</p> <p>To learn more read <a href="http://my.opera.com/desktopteam">Desktop Team Blog</a> (at <a href="http://my.opera.com">My.Opera.com</a>, of course ;) )</p> <h4>January 2009 builds:</h4> <ul> <li><a href="http://snapshot.opera.com/unix/snapshot-4126/">Opera 10 alphas for Linux/BSD/etc</a> (various architectures)</li> <li><a href="http://snapshot.opera.com/windows/o100s_1229m.exe">Opera 10 alpha for Windows</a> (MSI installer)</li> <li><a href="http://snapshot.opera.com/windows/o100s_1229.exe">Opera 10 alpha for Windows</a> (Classic installer)</li> <li><a href="http://snapshot.opera.com/mac/o100s_6195.dmg">Opera 10 alpha for Mac</a> (universal)</li> <li><a href="http://snapshot.opera.com/mac/o100s_6195_Intel.dmg">Opera 10 alpha for Mac</a> (intel-only)</li> </ul> </div> <div class="slide" id="last"> <h1>Thank you</h1> <ul> <li><a href="http://dev.opera.com">dev.opera.com</a></li> <li><a href="http://labs.opera.com">labs.opera.com</li> <li><a href="https://bugs.opera.com/wizard">bugs.opera.com/wizard</a></li> <li><a href="mailto:chaals@opera.com">chaals@opera.com</a> </ul> <p>There are no foolish questions<br/>Only fools who do not question</p> </div> </body></html>