https://microformats.org/wiki/api.php?action=feedcontributions&user=CharlesIliyaKrempeaux&feedformat=atomMicroformats Wiki - User contributions [en]2024-03-28T21:16:07ZUser contributionsMediaWiki 1.38.4https://microformats.org/wiki/index.php?title=widget-examples&diff=2492widget-examples2005-10-27T07:58:32Z<p>CharlesIliyaKrempeaux: Added stuff about XBL</p>
<hr />
<div>= widget examples =<br />
<br />
== Contributor(s) ==<br />
<br />
* [http://lawver.net Kevin Lawver]<br />
* [http://changelog.ca Charles Iliya Krempeaux]<br />
* ...<br />
<br />
== Apple's Dashboard ==<br />
<br />
* Uses an XML Manifest file to specify data about the "widget" (width, height, thumbnail image, title and version).<br />
* No requirements for markup around widgets.<br />
<br />
=== Dashboard Example (plist) ===<br />
<br />
<pre>&lt;?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34;?&gt;<br />
&lt;!DOCTYPE plist PUBLIC &#34;-//Apple Computer//DTD PLIST 1.0//EN&#34; &#34;http://www.apple.com/DTDs/PropertyList-1.0.dtd&#34;&gt;<br />
&lt;plist version=&#34;1.0&#34;&gt;<br />
&lt;dict&gt;<br />
&lt;key&gt;AllowNetworkAccess&lt;/key&gt;<br />
&lt;true/&gt;<br />
&lt;key&gt;CFBundleDisplayName&lt;/key&gt;<br />
&lt;string&gt;AIM Fighter&lt;/string&gt;<br />
&lt;key&gt;CFBundleIdentifier&lt;/key&gt;<br />
&lt;string&gt;com.aimfight.widget&lt;/string&gt;<br />
&lt;key&gt;CFBundleName&lt;/key&gt;<br />
&lt;string&gt;AOL Fighter&lt;/string&gt;<br />
&lt;key&gt;CFBundleShortVersionString&lt;/key&gt;<br />
&lt;string&gt;2.0&lt;/string&gt;<br />
&lt;key&gt;CFBundleVersion&lt;/key&gt;<br />
&lt;string&gt;2.0&lt;/string&gt;<br />
&lt;key&gt;CloseBoxInsetX&lt;/key&gt;<br />
&lt;integer&gt;5&lt;/integer&gt;<br />
&lt;key&gt;CloseBoxInsetY&lt;/key&gt;<br />
&lt;integer&gt;5&lt;/integer&gt;<br />
&lt;key&gt;MainHTML&lt;/key&gt;<br />
&lt;string&gt;fight.html&lt;/string&gt;<br />
&lt;/dict&gt;<br />
&lt;/plist&gt;</pre><br />
<br />
== AOL's Channel Content Modules - [http://sports.aol.com|AOL Sports example] ==<br />
<br />
* Each module (widget) has a markup envelope and some required elements that make it a module and allow for consistent styles across products.<br />
<br />
=== Example ===<br />
<br />
<pre>&lt;div class=&#34;module themedList&#34;&gt;<br />
&lt;div class=&#34;header&#34;&gt;&lt;h3&gt;Kevin&#39;s List Of Fruit&lt;/h3&gt;&lt;/div&gt;<br />
&lt;div class=&#34;body&#34;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;Apples&lt;/li&gt;<br />
&lt;li&gt;Oranges&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;</pre><br />
<br />
== Konfabulator ==<br />
<br />
* (need someone else to fill this in, have never built one or taken them apart)<br />
<br />
== WSRP ==<br />
<br />
* [http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=wsrp|WSRP Spec]<br />
* SOAP envelopes to transport modules, but there is no specific formatting required for the actual content of the "portlet" (module or widget).<br />
<br />
=== Module Response Example ===<br />
<br />
<pre>&lt;urn:getMarkupResponse xmlns:urn=&#34;urn:oasis:names:tc:wsrp:v1:types&#34;&gt;<br />
&lt;urn:markupContext&gt; <br />
&lt;urn:mimeType&gt;text/html; charset=UTF-8&lt;/urn:mimeType&gt;<br />
&lt;urn:markupString&gt;&lt;![CDATA[ <br />
&lt;form method=&#34;post&#34; <br />
action=&#34;wsrp_rewrite?wsrp-urlType=blockingAction/wsrp_rewrite&#34;<br />
id=&#34;wsrp_rewrite_stockForm&#34;&gt;<br />
&lt;table border=&#34;0&#34; width=&#34;100%&#34;&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;Enter Stock Symbol&lt;/td&gt;<br />
&lt;td&gt;&lt;input name=&#34;symbol&#34;&gt;&lt;/td&gt;<br />
&lt;/tr&gt; <br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;input type=&#34;submit&#34; value=&#34;Submit&#34;&gt;&lt;/td&gt;<br />
&lt;/tr&gt; <br />
&lt;/table&gt;<br />
&lt;/form&gt; <br />
]]&gt;&lt;/urn:markupString&gt;<br />
&lt;urn:locale&gt;en-US&lt;/urn:locale&gt;<br />
&lt;urn:requiresUrlRewriting&gt;true&lt;/urn:requiresUrlRewriting&gt;<br />
&lt;urn:preferredTitle&gt;Portfolio Manager&lt;/urn:preferredTitle&gt;<br />
&lt;/urn:markupContext&gt; <br />
&lt;urn:sessionContext&gt; <br />
&lt;urn:sessionID&gt;sessionID_1&lt;/urn:sessionID&gt; <br />
&lt;urn:expires&gt;300&lt;/urn:expires&gt; <br />
&lt;/urn:sessionContext&gt; <br />
&lt;/urn:getMarkupResponse&gt;</pre><br />
<br />
<br />
== XBL ==<br />
'''XBL''' ('''Extensible Binding Language''') is technology developed [http://mozilla.org Mozilla]. Although often used with XUL for making widgets, it can also be used with HTML. XBL somewhat serves the same role as CSS or XSL, but much much more powerful!<br />
<br />
For example, I could create a new HTML (or XUL or whatever) element/tag; let's say I create the new element: '''<shake>'''. The way the new '''<shake>''' element would work is that what the user puts the mouse over the element (on the page) it shakes whatever is in it. So for example, we might have the following HTML snipped with the '''<shake>''' element:<br />
<br />
<nowiki><br />
<html><br />
<head><br />
<style type="text/css"><br />
<!--<br />
<br />
shake {<br />
</nowiki>'''<nowiki>-moz-binding : url("myxbl.xml#shake-it-baby")</nowiki>'''<nowiki><br />
}<br />
<br />
--><br />
</style><br />
</head><br />
<br />
<body><br />
I want you to </nowiki>'''<nowiki><shake>shake this</shake>.</nowiki>'''<nowiki><br />
</body><br />
<br />
</html><br />
</nowiki><br />
<br />
Note the '''-moz-binding''' CSS code. This is NOT standard CSS but a Mozilla extension. (CSS extensions have a prepending hyphen.)<br />
<br />
Also note that the '''-moz-binding''' refers to an XBL file named "myxbl.xml". Here's how it could look:<br />
<br />
<nowiki><br />
<?xml version="1.0"?><br />
<br />
<bindings xmlns="http://www.mozilla.org/xbl"><br />
<binding id="shake-it-baby"><br />
<content><br />
<children /><br />
</content><br />
<handlers><br />
<handler event="mouseover" action="a_javascript_function_that_shakes_it();" /><br />
</handlers><br />
</binding><br />
</bindings><br />
</nowiki><br />
<br />
Here's another example. I'll create a new element/tag that draws a circle around the text inside of it. I'll call the new element/tag <incircle>. For, this we might have the HTML code:<br />
<br />
<nowiki><br />
<html><br />
<head><br />
<style type="text/css"><br />
<!--<br />
<br />
shake {<br />
</nowiki>'''<nowiki>-moz-binding : url("somexbl.xml#put-it-in-a-circle")</nowiki>'''<nowiki><br />
}<br />
<br />
--><br />
</style><br />
</head><br />
<br />
<body><br />
</nowiki>'''<nowiki><incircle>I'm in a circle</incircle></nowiki>'''<nowiki><br />
</body><br />
<br />
</html><br />
</nowiki><br />
<br />
For this example, the "somexbl.xml" file could look like:<br />
<br />
<nowiki><br />
<?xml version="1.0"?><br />
<br />
<bindings xmlns="http://www.mozilla.org/xbl"<br />
xmlns:svg="http://www.w3.org/2000/svg"<br />
><br />
<binding id="put-it-in-a-circle"><br />
<content><br />
<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/><br />
<children /><br />
</content><br />
</binding><br />
</bindings><br />
</nowiki><br />
<br />
Notice that I used SVG to draw circle. (OK, that SVG code is probably really bad. And if you use that XBL code it won't look good. In real life, I'd want to use JavaScript to figure out the radius of the circle, where the x and y coordinates of the circle should be, etc. But this is just an example to show you how the XBL <content> element could be used. I could have probably use the HTML <canvas> element to do this too.)</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=3246User:CharlesIliyaKrempeaux2005-10-27T06:29:57Z<p>CharlesIliyaKrempeaux: Got rid of table of contents</p>
<hr />
<div>= [http://changelog.ca Charles Iliya Krempeaux], B.Sc =<br />
<br />
<br />
I've written some articles about Microformats (on my blog):<br />
* [http://changelog.ca/log/2005/10/16/thoughts_on_video_and_audio_microformats Thoughts on Video and Audio Microformats] (2005-10-16)<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics Microformats Proposal for Reputation and Trust Metrics] (2005-09-12)<br />
<br />
<br />
== Microformat Interests ==<br />
Currently, I'm interested Microformats that relate to IPTV and with Trust Metrics. So I find the following of interest:<br />
* [[media-metadata-examples|Media Metadata Examples]]<br />
* [[video-metadata-model|Video Metadata Model]]<br />
<br />
<br />
== Microformats in the Works ==<br />
Also, currently I am working on:<br />
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001684.html rel-xxx]<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rel-peer]<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rel-meme]<br />
<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rev-tag]<br />
<br />
<br />
== More ==<br />
You can get to my homepage and blog at [http://changelog.ca changelog.ca]<br />
<br />
__NOTOC__</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2440User:CharlesIliyaKrempeaux2005-10-27T06:29:30Z<p>CharlesIliyaKrempeaux: Added some more stuff to my wiki user page</p>
<hr />
<div>= [http://changelog.ca Charles Iliya Krempeaux], B.Sc =<br />
<br />
<br />
I've written some articles about Microformats (on my blog):<br />
* [http://changelog.ca/log/2005/10/16/thoughts_on_video_and_audio_microformats Thoughts on Video and Audio Microformats] (2005-10-16)<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics Microformats Proposal for Reputation and Trust Metrics] (2005-09-12)<br />
<br />
<br />
== Microformat Interests ==<br />
Currently, I'm interested Microformats that relate to IPTV and with Trust Metrics. So I find the following of interest:<br />
* [[media-metadata-examples|Media Metadata Examples]]<br />
* [[video-metadata-model|Video Metadata Model]]<br />
<br />
<br />
== Microformats in the Works ==<br />
Also, currently I am working on:<br />
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001684.html rel-xxx]<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rel-peer]<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rel-meme]<br />
<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics rev-tag]<br />
<br />
<br />
== More ==<br />
You can get to my homepage and blog at [http://changelog.ca changelog.ca]</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2439User:CharlesIliyaKrempeaux2005-10-27T06:09:13Z<p>CharlesIliyaKrempeaux: Added some stuff to my wiki user page</p>
<hr />
<div>= [http://changelog.ca Charles Iliya Krempeaux], B.Sc =<br />
<br />
<br />
I've written some articles about Microformats (on my blog):<br />
* [http://changelog.ca/log/2005/10/16/thoughts_on_video_and_audio_microformats Thoughts on Video and Audio Microformats] (2005-10-16)<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics Microformats Proposal for Reputation and Trust Metrics] (2005-09-12)<br />
<br />
<br />
Currently, I'm interested Microformats that relate to IPTV and with Trust Metrics. So I find the following of interest:<br />
* [[media-metadata-examples|Media Metadata Examples]]<br />
* [[video-metadata-model|Video Metadata Model]]<br />
<br />
<br />
Also, currently I am working on:<br />
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001684.html rel-xxx]</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2438User:CharlesIliyaKrempeaux2005-10-26T21:03:05Z<p>CharlesIliyaKrempeaux: Add stuff about rel-xxx to my wiki user page</p>
<hr />
<div>= [http://changelog.ca Charles Iliya Krempeaux], B.Sc =<br />
<br />
<br />
I've written some articles about Microformats (on my blog):<br />
* [http://changelog.ca/log/2005/10/16/thoughts_on_video_and_audio_microformats Thoughts on Video and Audio Microformats] (2005-10-16)<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics Microformats Proposal for Reputation and Trust Metrics] (2005-09-12)<br />
<br />
<br />
Currently, I'm interested Microformats that relate to IPTV. So I find the following of interest:<br />
* [[media-metadata-examples|Media Metadata Examples]]<br />
* [[video-metadata-model|Video Metadata Model]]<br />
<br />
<br />
Also, currently I am working on:<br />
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001684.html rel-xxx]</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2426User:CharlesIliyaKrempeaux2005-10-26T20:38:56Z<p>CharlesIliyaKrempeaux: Added some more stuff to my wiki user page</p>
<hr />
<div>= [http://changelog.ca Charles Iliya Krempeaux], B.Sc =<br />
<br />
<br />
I've written some articles about Microformats (on my blog):<br />
* [http://changelog.ca/log/2005/10/16/thoughts_on_video_and_audio_microformats Thoughts on Video and Audio Microformats] (2005-10-16)<br />
* [http://changelog.ca/log/2005/09/12/proposed-microformats-for-reputation-and-trust-metrics Microformats Proposal for Reputation and Trust Metrics] (2005-09-12)<br />
<br />
<br />
Currently, I'm interested Microformats that relate to IPTV. So I find the following of interest:<br />
* [[media-metadata-examples|Media Metadata Examples]]<br />
* [[video-metadata-model|Video Metadata Model]]</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2423User:CharlesIliyaKrempeaux2005-10-26T20:29:30Z<p>CharlesIliyaKrempeaux: Put some stuff on my wiki user page.</p>
<hr />
<div>= Charles Iliya Krempeaux, B.Sc =<br />
<br />
For now, for more info on me see my homepage and weblog at: [http://changelog.ca/ changelog.ca].</div>CharlesIliyaKrempeauxhttps://microformats.org/wiki/index.php?title=User:CharlesIliyaKrempeaux&diff=2419User:CharlesIliyaKrempeaux2005-10-26T19:27:04Z<p>CharlesIliyaKrempeaux: </p>
<hr />
<div><pre><br />
Charles Iliya Krempeaux, B.Sc.<br />
<br />
charles @ reptile.ca<br />
supercanadian @ gmail.com<br />
<br />
developer weblog: http://ChangeLog.ca/<br />
</pre></div>CharlesIliyaKrempeaux