ÿþ<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML"> <head> <title>Opera - Widgets Unite!</title> <link rel="stylesheet" media="screen,print,projection" href="style.css" /> <style> ul li {list-style-type: none} @media handheld { * { margin: 2px; padding: 2px } .slide {margin-bottom:1em; border: 1px black solid; background:url('operalittle.png')} #first {display:none} head,title {display:block} .screen {display:none}} </style> </head> <body> <div class="screen"> <p>Opera Unite requires <a href="http://my.opera.com/desktopteam/blog/">Opera 10.10</a>, but the slideshow is designed to render anywhere (except that it's XHTML at the moment :P )</p> <p>To see these in Opera presentation mode select "View" ->"Full Screen". To see how it works, use the source...</p> </div> <div class="slide" id="first"> <h1>Opera Unite</h1> <p>a server for the family</p> <p style="color:#ddd"><del>Charles McCathieNevile</del></p> <h3 style="margin-top:-1em">Chaals / '00;7</h3> <p><a href="http://widsith.chaals.operaunite.com">http://widsith.chaals.operaunite.com</a></p> </div> <div class="slide" id="widgets"> <h1>Widgets...</h1> <p>(Web technology applications)</p> <ul> <li>Locally installed</li> <li>Runs on the browser engine</li> <li>Works online or offline</li> <li>Only transfer <em>new</em> data</li> <li>Use any available Web Standards</li> <li>The simple things are simple</li> </ul> </div> <div class="slide"> <h1><a href="widgets.mht">How to make a widget...</a></h1> <p>HTML, called <var>index.html</var> and <var>config.xml</var>:</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>(Add <code>icon</code>, <code>author</code>, <code>version</code>, etc)</p> </div> <div class="slide"> <h1>Widget structure</h1> <ul> <li><var>index.html</var>, <var>config.xml</var>in a zip file</li> <li>And all the images, styles, etc</li> <li>(any web technology)</li> <li>Call it (name).wgt and open it...</li> <li>On your site, or at <a href="http://widgets.opera.com/upload">widgets.opera</a></li> </ul> </div> <div class="slide"> <h1>Extras for widgets</h1> <ul> <li><code>showNotification()</code></li> <li><code>moveTo(), moveBy()</code></li> <li><code>resizeTo(), resizeBy()</code></li> <li>[<code>set</code>]<code>preferenceForKey()</code></li> <li>Access to the file system</li> </ul> <p>(<a href="demos/widgets/testwidget/index.html">example</a>)</p> </div> <div class="slide"> <h1>Opera Unite - (in 10.10)</h1> <p class="notes">The big deal is that you have it with you, for things you want to do quickly and personally rather than going though some service. At this point I show the panel, how easy it is, and talk a bit about the default services available</p> <p>Simple, personal web-server</p> <ul> <li>Simple setup</li> <li>Drag and drop control</li> <li>Applications<ul> <li><a href="">Personal OpenID server</a></li> <li><a href="http://widsith.chaals.operaunite.com/webserver/slides/">My slides</a></li> </ul></li></ul> <h2>"Disposable web space"</h2> </div> <div class="slide"> <h1>Opera Unite Applications</h1> <ul> <li>A config.xml file</li> <li>Zip package called (name).ua</li> <li>Cross-site access available</li> <li>Download from the network</li> </ul> <p>(YA Server-side Javascript)</p> </div> <div class="slide"> <h1>Making an app...</h1> <p style="text-align:center="><img src="robots.png" alt="robots.txt v1 by chaals " /></p> <ul> <li>Don't index Unite!</li> <li>Learn by example...</li> </ul> <p>(Unite has better defaults :) )</p> </div> <div class="slide"> <h1>Service "robots.txt"</h1> <ul> <li>config.xml includes the function "webserver"<br/> <pre style="margin-left: -3em"><code>&lt;feature name="http://xmlns.opera.com/webserver"&gt; &lt;param name="type" value="service"/&gt; &lt;param name="servicepath" value="robots.txt"/&gt; &lt;/feature&gt;</code></pre> </li> </ul> </div> <div class="slide"> <h1>Serving pages</h1> <p>A <var>public_html</var> folder (like Apache) or script:</p> <pre><code>window.onload = function () { w = opera.io.webserver webserver.addEventListener( '_index', giveReply, false); 'page1.html', servePage1, false); }</code></pre> <p>(<code>_index</code> means the "root" directory <var>"& /"</var>)</p> </div> <div class="slide"> <h1>Dynamic pages</h1> <pre><code>function giveReply(e) { var r = e.connection.response; r.setResponseHeader( "Content-Type","text/plain"); r.write('Hello'); r.close(); }</code></pre> </div> <div class="slide"> <h1>Opera Unite and files</h1> <ul> <li>File I/O API</li> <li>Important for a server app</li> <li>Submitted to W3C in 2008</li> <li>Copied into OMTP/Bondi, JIL, & </li> </ul> <p><a href="demos/services/fileblog.us">Example of using it</a></p> </div> <div class="slide"> <h1>Documentation</h1> <ul> <li>Opera Unite <a href="docs/unitePrimer.mht">for developers</a> (<a href="docs/unite-po-russki.mht">?>-@CAA:89</a>)</li> <li>Gridnite, an Opera Unite spreadheet: <a href="docs/gridniteHowto.mht">how to</a>, <a href="demos/services/gridnite.us">service</a>, <a href="demos/services/gridnite/">code</a>)</li> <li><a href="docs/customdomains.mht">Use your own domain name</a></li> <li><a href="docs/usingFileIO.mht">Using File I/O</a></li> <li><a href="docs/unite/index.html">Opera Unite APIs</a></li> </ul> </div> <div class="slide"> <h1>Example</h1> <p><a href="demos/widgets/">Widgets</a></p> <dl> <dt><a href="demos/widgets/hello/">Hello</a></dt> <dd>Simple widget demo</dd> <dt><a href="demos/widgets/tuxgame">tuxgame</a></dt> <dd>A game in SVG, made into a widget</dd> <dd>Making the SVG was work. Making the widget was 10 minutes</dd> <dt><a href="demos/widgets/WidgetBits/">Widget Bits</a></dt> <dd>Demonstrating some widget capabilities</dd> </dl> </div> <div class="slide"> <h1>Examples</h1> <p><a href="demos/services/">Opera Unite apps</a></p> <dl> <dt><a href="demos/services/robots/">robots</a></dt> <dd>Simple Unite service</dd> <dt><a href="demos/services/fileblog">fileblog</a></dt> <dd>A simple blog-hosting service</dd> <dt><a href="demos/services/gridnite/">gridnite</a></dt> <dd>A collaborative spreadsheet</dd> <dd>(a <strong>private</strong> Web 2.0 service)</dd> </dl> </div> <div class="slide" id="last" > <h1>Thank you!</h1> </div> </body></html>