Difference between revisions of "Shared Media and data URIs"

Revision as of 10:55, 16 March 2010

add versioning

About

Data: URIs can be used with Shared Media. If you're not a geek, why should you care?

In short, one possible use is: say you have some content you want to show on a prim face, but you don't want to go through the trouble of creating an HTML file and uploading it to a webserver. (Or, you don't have a server.)

You can use a data: URI tool to convert web content into a long link you can paste into Shared Media. It saves time and trouble.

Here's a simple example:

In your web browser, go to The data: URI kitchen. This is an easy tool to convert HTML into a data: URI.
Insert your HTML between the <body> tags. Change  to This is a test!
Click the Generate button.
Copy the full data: URI in your web browser's address bar. It should look like this: data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A <title>Test<%2Ftitle>%0D%0A <style type%3D"text%2Fcss">%0D%0A <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A This is a test!<%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A
Using the steps described in "Adding Shared Media to an object", paste that exact URI into Shared Media on a prim.
The result should look like this:

Tip: The maximum length of an URI/URL in the Viewer is 1024 characters.

Feel free to use more advanced code to gain familiarity. This shows several lines of styled text:

data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A  <title>Test<%2Ftitle>%0D%0A  <style type%3D"text%2Fcss">%0D%0A  <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A  <p>This is a test!<%2Fp>%0D%0A%0D%0A<p><strong>But it gets fancier because we're using styled text.<%2Fstrong><%2Fp>%0D%0A%0D%0A<p><em>Feel free to play with HTML snippets and jazz it up.<%2Fem><%2Fp>%0D%0A%0D%0A<h2><font color%3D"%23ff0080"><strong>That's why we call it rich content%2C yeah%3F<%2Fstrong><%2Ffont><%2Fh2>%0D%0A%0D%0A<p><strike>This line has intentionally been struck out.<%2Fstrike><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A

This embeds a Flash video:

data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A  <title>Test<%2Ftitle>%0D%0A  <style type%3D"text%2Fcss">%0D%0A  <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A  <p><object width%3D"640" height%3D"480"><param name%3D"allowfullscreen" value%3D"true" %2F><param name%3D"allowscriptaccess" value%3D"always" %2F><param name%3D"movie" value%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" %2F><embed src%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" type%3D"application%2Fx-shockwave-flash" allowfullscreen%3D"true" allowscriptaccess%3D"always" width%3D"640" height%3D"480"><%2Fembed><%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A

This embeds an SVG (scalable vector graphic) of three interlocking, colored circles:

http://tinyurl.com/yd5uyfa

Since SVGs are vectors, they can scale smoothly to any size.

Those data: URIs are so long! Can I shorten them?

Yes, an URL-shortener can make them a lot easier to copy-and-paste, although most popular ones (like bit.ly and snurl.com — no relation to SLurl) have troubles, and reliability is dependent on the specific service. TinyURL appears to work, as shown above.

Can I embed other data types too?

Yes, like images. The Image to data URI convertor can convert small PNG, JPG, or GIF images into a data URI. The resulting code may appear quite lengthy but give it a try.

As shown above, SVGs can work, too.

Can I make pure JavaScript work in a data: URI?

Possibly. This needs to be tested more, so please feel free to report your findings here.

What's the difference between a URI and a URL?

This gets fairly technical, but "URL vs. URI vs. URN, in More Concise Terms" has a good explanation.

@@ Line 1: / Line 1: @@
-{{KBmaster}}
+{{KBmaster}} {{TOCright}}
+== About ==
 '''[http://en.wikipedia.org/wiki/Data_Uri Data: URIs] can be used with [[Shared Media]].''' If you're not a geek, why should you care?
@@ Line 28: / Line 30: @@
 : <code><nowiki>data:text/html;charset=utf-8,<!DOCTYPE HTML PUBLIC "-%2F%2FW3C%2F%2FDTD HTML 4.0%2F%2FEN">%0D%0A<html lang%3D"en">%0D%0A <head>%0D%0A  <title>Test<%2Ftitle>%0D%0A  <style type%3D"text%2Fcss">%0D%0A  <%2Fstyle>%0D%0A <%2Fhead>%0D%0A <body>%0D%0A  <p><object width%3D"640" height%3D"480"><param name%3D"allowfullscreen" value%3D"true" %2F><param name%3D"allowscriptaccess" value%3D"always" %2F><param name%3D"movie" value%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" %2F><embed src%3D"http%3A%2F%2Fvimeo.com%2Fmoogaloop.swf%3Fclip_id%3D9656041%26amp%3Bserver%3Dvimeo.com%26amp%3Bshow_title%3D0%26amp%3Bshow_byline%3D0%26amp%3Bshow_portrait%3D0%26amp%3Bcolor%3DFF0080%26amp%3Bfullscreen%3D1" type%3D"application%2Fx-shockwave-flash" allowfullscreen%3D"true" allowscriptaccess%3D"always" width%3D"640" height%3D"480"><%2Fembed><%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A</nowiki></code>
-This embeds an SVG (scalable vector graphic):
+This embeds an SVG (scalable vector graphic) of three interlocking, colored circles:
+: <code><nowiki>http://tinyurl.com/yd5uyfa</nowiki></code>
-: <code><nowiki>data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8%2BCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgCiAgICAgICAgICAgICAgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCiAgICBjaXJjbGU6aG92ZXIge2ZpbGwtb3BhY2l0eTowLjk7fQogIDwvc3R5bGU%2BCiAgPGcgc3R5bGU9ImZpbGwtb3BhY2l0eTowLjc7Ij4KICAgIDxjaXJjbGUgY3g9IjYuNWNtIiBjeT0iMmNtIiByPSIxMDAiIHN0eWxlPSJmaWxsOnJlZDsgc3Ryb2tlOmJsYWNrOyBzdHJva2Utd2lkdGg6MC4xY20iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsNTApIiAvPgogICAgPGNpcmNsZSBjeD0iNi41Y20iIGN5PSIyY20iIHI9IjEwMCIgc3R5bGU9ImZpbGw6Ymx1ZTsgc3Ryb2tlOmJsYWNrOyBzdHJva2Utd2lkdGg6MC4xY20iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLDE1MCkiIC8%2BCiAgICA8Y2lyY2xlIGN4PSI2LjVjbSIgY3k9IjJjbSIgcj0iMTAwIiBzdHlsZT0iZmlsbDpncmVlbjsgc3Ryb2tlOmJsYWNrOyBzdHJva2Utd2lkdGg6MC4xY20iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MCwxNTApIi8%2BCiAgPC9nPgo8L3N2Zz4K</nowiki></code>
+Since SVGs are vectors, they can scale smoothly to any size.
 == Those data: URIs are so long! Can I shorten them? ==
-Yes, an URL-shortener can make them a lot easier to copy-and-paste, although most popular ones (like bit.ly and snurl.com — no relation to [[SLurl]]) have troubles, and reliability is dependent on the specific service. '''[http://tinyurl.com TinyURL]''' appears to work.
+Yes, an URL-shortener can make them a lot easier to copy-and-paste, although most popular ones (like bit.ly and snurl.com — no relation to [[SLurl]]) have troubles, and reliability is dependent on the specific service. '''[http://tinyurl.com TinyURL]''' appears to work, as shown above.
 == Can I embed other data types too? ==