Difference between revisions of "Shared Media and data URIs"
Jump to navigation
Jump to search
m (moved Shared Media and data URI to Shared Media and data URIs) |
Aztral Aeon (talk | contribs) |
||
| (18 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
== 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? | '''[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? | ||
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.) | 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.) | ||
| Line 13: | Line 13: | ||
# Click the '''Generate''' button. | # Click the '''Generate''' button. | ||
# Copy the ''full'' data: URI in your web browser's address bar. It should look like this: <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>This is a test!<%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A</nowiki></code> | # Copy the ''full'' data: URI in your web browser's address bar. It should look like this: <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>This is a test!<%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>%0D%0A</nowiki></code> | ||
# Using the steps described in '''[[Adding Shared Media to an object]]''', paste that exact URI into Shared Media on a prim. | # 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: | # The result should look like this: | ||
[[File:Data_URI_with_Shared_Media.png|640px]] | [[File:Data_URI_with_Shared_Media.png|640px]] | ||
Feel free to use more advanced code to gain familiarity. This shows several lines of styled text: | Feel free to use more advanced code to gain familiarity. | ||
{{KBtip|A data: URI can be up to 32 kilobytes. The maximum length of an URI/URL in the Viewer is 1024 bytes, although an URL-shortening service (as described below) can prevent this limit from being reached.}} | |||
== Examples == | |||
This shows several lines of styled text: | |||
: <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>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</nowiki></code> | : <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>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</nowiki></code> | ||
| Line 25: | Line 31: | ||
: <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> | : <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) of three interlocking, colored circles. Since SVGs are vectors, they can scale smoothly to any size: | |||
: <code><nowiki>http://tinyurl.com/yd5uyfa</nowiki></code> | |||
This embeds a Flash panorama of a Second Life scene, [https://blogs.secondlife.com/community/community/tnt/blog/2010/03/17/viewer-2-tip-shared-media-add-custom-content-with-data-uri-no-webpage-upload-needed as explained here]: | |||
: <code><nowiki>data:text/html;charset=utf-8,<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 marginheight%3D"0" marginwidth%3D"0" topmargin%3D"0" leftmargin%3D"0" rightmargin%3D"0" bottommargin%3D"0" style%3D"overflow%3Ahidden">%0D%0A <p align%3D"center"><object width%3D"100%25" height%3D"100%25">%0D%0A<param name%3D"movie" value%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf">%0D%0A<embed src%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf" width%3D"100%25" height%3D"100%25" type%3D"application%2Fx-shockwave-flash">%0D%0A<%2Fembed>%0D%0A<%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml></nowiki></code> | |||
== 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, as shown above. | |||
== Can I embed other data types too? == | == Can I embed other data types too? == | ||
Yes, like images. The '''[http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ 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. | Yes, like images. The '''[http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ 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? == | |||
Absolutely. | |||
In fact, data: URI is best for displaying limited (up to 1024 chars), but constantly updated information without having to send a bunch of httprequests and bogging down a server. For example, updating a Media on a Prim speedometer on a .2sec timer interval. | |||
//Copy and Paste the below directly into the homepage URL for a prims media. | |||
<nowiki>data:text/html,<html><head><style>#ADiv{background-color:#EEE;width:100px;height:100px;}</style><script>function doit(){alert('Hi');}</script></head><body bgcolor='#222' onload='doit()'><div id='ADiv'></div></body></html></nowiki> | |||
== What's the difference between a URI and a URL? == | == What's the difference between a URI and a URL? == | ||
This gets fairly technical, but "[http://www.damnhandy.com/2009/08/26/url-vs-uri-vs-urn-in-more-concise-terms/ URL vs. URI vs. URN, in More Concise Terms]" has a good explanation. | This gets fairly technical, but "[http://www.damnhandy.com/2009/08/26/url-vs-uri-vs-urn-in-more-concise-terms/ URL vs. URI vs. URN, in More Concise Terms]" has a good explanation. | ||
== See also == | |||
* '''[[User:Kelly_Linden/lsl_hacks|Shared Media and HTTP-In]]''' - Kelly Linden compiled these clever tech tricks on making Shared Media integrate SL and the web better, including data: URIs. | |||
* '''[https://blogs.secondlife.com/community/community/tnt/blog/2010/03/17/viewer-2-tip-shared-media-add-custom-content-with-data-uri-no-webpage-upload-needed <nowiki>[VIEWER 2 TIP]</nowiki> Shared Media: Add custom content with data: URI (no webpage upload needed!)]''' - Blog post referring to this article. | |||
[[Category:Shared Media]] | |||
[[Category:Media, music, and sound]] | |||
Latest revision as of 12:31, 29 June 2014
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<p></p>to<p>This is a test!</p> - 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 <p>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:
Feel free to use more advanced code to gain familiarity.
 |
Tip: A data: URI can be up to 32 kilobytes. The maximum length of an URI/URL in the Viewer is 1024 bytes, although an URL-shortening service (as described below) can prevent this limit from being reached. |
Examples
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. Since SVGs are vectors, they can scale smoothly to any size:
http://tinyurl.com/yd5uyfa
This embeds a Flash panorama of a Second Life scene, as explained here:
data:text/html;charset=utf-8,<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 marginheight%3D"0" marginwidth%3D"0" topmargin%3D"0" leftmargin%3D"0" rightmargin%3D"0" bottommargin%3D"0" style%3D"overflow%3Ahidden">%0D%0A <p align%3D"center"><object width%3D"100%25" height%3D"100%25">%0D%0A<param name%3D"movie" value%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf">%0D%0A<embed src%3D"http%3A%2F%2Ftorley.s3.amazonaws.com%2Fpanoramas%2FAmbiant-Waters-S.swf" width%3D"100%25" height%3D"100%25" type%3D"application%2Fx-shockwave-flash">%0D%0A<%2Fembed>%0D%0A<%2Fobject><%2Fp>%0D%0A <%2Fbody>%0D%0A<%2Fhtml>
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?
Absolutely.
In fact, data: URI is best for displaying limited (up to 1024 chars), but constantly updated information without having to send a bunch of httprequests and bogging down a server. For example, updating a Media on a Prim speedometer on a .2sec timer interval.
//Copy and Paste the below directly into the homepage URL for a prims media.
data:text/html,<html><head><style>#ADiv{background-color:#EEE;width:100px;height:100px;}</style><script>function doit(){alert('Hi');}</script></head><body bgcolor='#222' onload='doit()'><div id='ADiv'></div></body></html>
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.
See also
- Shared Media and HTTP-In - Kelly Linden compiled these clever tech tricks on making Shared Media integrate SL and the web better, including data: URIs.
- [VIEWER 2 TIP] Shared Media: Add custom content with data: URI (no webpage upload needed!) - Blog post referring to this article.