You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
17 KiB
371 lines
17 KiB
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:svg="http://www.w3.org/2000/svg"
|
|
xmlns:foaf="http://xmlns.com/foaf/0.1/"
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
xml:lang="en-us" lang="en-us">
|
|
<!--
|
|
|
|
Disclaimer:
|
|
|
|
This demonstration was originally quickly put together for W3C
|
|
Advisory Committee meeting in March 2009. Its purpose is to
|
|
demonstrate several Web technology working together. It is not
|
|
intended to single out one Web browser implementation in particular. It
|
|
is not meant as an acid test. It doesn't pass any know HTML validators
|
|
on earth. It's using one element (text) which isn't defined anywhere.
|
|
|
|
Technologies used on the page: XHTML5 (video tag, media API), SVG 1.1
|
|
(text path, filter), MathML 1.0, Ruby, CSS 3.0 (transform, columns),
|
|
DFXP 1.0, DOM Core Level 2, DOM CSS Level 2, RDFa.
|
|
|
|
The layout is... confusing at best. We can all hope that Web designers
|
|
will be much better than me at using all those technologies
|
|
together.
|
|
This might be due to side effects of me working in the following
|
|
building:
|
|
http://en.wikipedia.org/wiki/Stata_Center
|
|
|
|
I will not be liable for any direct, indirect, special or
|
|
consequential damages arising out of any use of the demonstration. :-)
|
|
|
|
@@TODO Add WAI-ARIA
|
|
@@TODO Add XForms (using the Ubiquity library)
|
|
Maybe replace the Ruby Annotations with something else to demonstrate I18n
|
|
|
|
Feel free to do whatever you want with the demonstration (copy,
|
|
redistribute, transform, etc.).
|
|
|
|
For comments or suggestions, email plh@w3.org .
|
|
|
|
|
|
plh - March 23, 2009
|
|
|
|
Updated in January 2010 to handle more Web browsers.
|
|
-->
|
|
<head>
|
|
<title>Demonstrations of future Web technologies</title>
|
|
<script type="text/javascript" src='../../../2008/12/dfxp-testsuite/web-framework/HTML5_player.js'></script>
|
|
|
|
<script type="text/javascript">
|
|
<![CDATA[
|
|
var __init_captions = false;
|
|
var play_state = false;
|
|
|
|
function play() {
|
|
if (play_state) {
|
|
// pause
|
|
document.getElementById("stop").disabled = true;
|
|
play_state = false;
|
|
try {
|
|
document.getElementById("vid").pause();
|
|
} catch (e) {}
|
|
document.getElementById("play").textContent = "Resume";
|
|
} else {
|
|
if (!__init_captions) {
|
|
try {
|
|
init_captions();
|
|
} catch (e) {}
|
|
__init_captions = true;
|
|
};
|
|
document.getElementById("stop").disabled = false;
|
|
play_state = true;
|
|
document.getElementById("play").textContent = "Pause";
|
|
try {
|
|
document.getElementById("vid").play();
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
function stop() {
|
|
play_state = false;
|
|
document.getElementById("stop").disabled = true;
|
|
try {
|
|
document.getElementById("vid").pause();
|
|
document.getElementById("vid").currentTime = 0;
|
|
} catch (e) {}
|
|
document.getElementById("play").innerHTML = "<span style='color:red'>P</span><span style='color:green'>l</span>a<span style='color:blue'>y</span>";
|
|
}
|
|
rotation = 10;
|
|
color = 1;
|
|
function changeRotation() {
|
|
var styleEl = document.getElementById("rotate").style;
|
|
styleEl.setProperty("-moz-transform", "rotate(" + rotation + "deg)", "");
|
|
styleEl.setProperty("-o-transform", "rotate(" + rotation + "deg)", "");
|
|
styleEl.setProperty("-webkit-transform", "rotate(" + rotation + "deg)", "");
|
|
styleEl.setProperty("transform", "rotate(" + rotation + "deg)", "");
|
|
scolor = "blue";
|
|
if (color == 0) {
|
|
scolor ="green";
|
|
} else if (color == 1) {
|
|
scolor ="blue";
|
|
} else if (color == 2) {
|
|
scolor ="red";
|
|
} else if (color == 3) {
|
|
scolor ="yellow";
|
|
}
|
|
document.getElementById("rotate").style.setProperty("color",
|
|
scolor, "");
|
|
|
|
rotation += 10;
|
|
|
|
if (color == 4) {
|
|
color = 0;
|
|
} else { color += 1; }
|
|
}
|
|
function changeMath() {
|
|
row = document.getElementById("row");
|
|
msup = row.parentNode;
|
|
msqrt = document.createElementNS("http://www.w3.org/1998/Math/MathML", "msqrt");
|
|
msqrt.appendChild(row);
|
|
msup.parentNode.replaceChild(msqrt, msup);
|
|
}
|
|
var stdDeviation = 0.5;
|
|
function modifySVG() {
|
|
document.getElementById("gauss").setAttribute("stdDeviation", stdDeviation);
|
|
stdDeviation = stdDeviation + 0.5;
|
|
}
|
|
function modifyText() {
|
|
text = document.getElementById("cssText").textContent;
|
|
document.getElementById("cssText").textContent = "More " + text;
|
|
}
|
|
function updateSVG() {
|
|
document.getElementById("svgText").textContent = document.getElementById("input").value;
|
|
}
|
|
function RDFAHighlight(){
|
|
__RDFA_BASE='http://www.w3.org/2006/07/SWD/RDFa/impl/js/';
|
|
if(document.getElementById('rdfa_highlight_bm%20')) {
|
|
alert('only once!');
|
|
} else {
|
|
s = document.createElement('script');s.type='text/javascript';
|
|
s.id='rdfa_highlight_bm';
|
|
s.src='http://www.w3.org/2006/07/SWD/RDFa/impl/js/highlight-metadata.js';
|
|
document.getElementsByTagName('head')[0].appendChild(s);
|
|
}
|
|
};
|
|
function resetDemo() {
|
|
stdDeviation = 0.01;
|
|
modifySVG();
|
|
document.getElementById("cssText").textContent = "Shiny effect using CSS";
|
|
document.getElementById("svgText").textContent = document.getElementById("input").value = "This is SVG";
|
|
|
|
row = document.getElementById("row");
|
|
msqrt = row.parentNode;
|
|
msup = document.createElementNS("http://www.w3.org/1998/Math/MathML", "msup");
|
|
mi = document.createElementNS("http://www.w3.org/1998/Math/MathML", "mi");
|
|
mi.textContent = "e";
|
|
msup.appendChild(mi);
|
|
msup.appendChild(row);
|
|
msqrt.parentNode.replaceChild(msup, msqrt);
|
|
|
|
rotation = 0;
|
|
color = 0;
|
|
changeRotation();
|
|
stop();
|
|
}
|
|
]]>
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
html body {
|
|
font-size: 120%;
|
|
}
|
|
div.slide img {
|
|
border: 3px solid #ccc;
|
|
padding: 2px;
|
|
}
|
|
div.cover img {
|
|
border: none;
|
|
}
|
|
div.image p.title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: large;
|
|
}
|
|
div.image p.img {
|
|
margin: 1em auto;
|
|
}
|
|
div.image span.source, blockquote p.source {
|
|
font-size: x-small;
|
|
font-style: italic;
|
|
}
|
|
div.note {
|
|
display: none;
|
|
}
|
|
div.snote {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
background-color: #ccc;
|
|
}
|
|
blockquote p.source {
|
|
text-align: right;
|
|
}
|
|
a.url {
|
|
font-weight: bold;
|
|
}
|
|
div.dfxp {
|
|
background-color: black;
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 3em;
|
|
}
|
|
div.dfxp div, div.dfxp p, div.dfxp span {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
table { border-collapse: collapse; font-size: 75%;}
|
|
th, td { border: 1px solid black; padding: 0; }
|
|
thead th { padding-left: .5ex; padding-right: .5ex; }
|
|
tbody th { text-align: left; padding-left: .5ex; padding-right: .5ex;}
|
|
tbody td { text-align: right; padding-right: 2ex;}
|
|
thead { background: #ccc; }
|
|
tbody tr:nth-child(even){background: #ff8;}
|
|
|
|
/* nice border on blockquote */
|
|
blockquote
|
|
{
|
|
padding: 0 8px 0 8px;
|
|
border-left: 4px solid #cccccc;
|
|
border-right: 4px solid #cccccc;
|
|
}
|
|
blockquote p:first-letter { font-size: 200%; font-family: cursive}
|
|
.head p, .head h1 {
|
|
margin: 0; padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class='head'>
|
|
<h1>A glimpse of future Web technologies</h1>
|
|
|
|
<p>This demonstration works in Firefox 3.5 and up, Webkit-based browsers (except for MathML), and Opera 10.5 Alpha. This is an XHTML document and therefore doesn't work in IE. To see the east asian Ruby annotations, you'll need the <a
|
|
href='https://addons.mozilla.org/en-US/firefox/addon/1935'>XHTML Ruby
|
|
support</a> extensions. If you wonder about the layout, check <a href='http://en.wikipedia.org/wiki/Stata_Center'>the building where the demo was done</a>.</p>
|
|
</div>
|
|
|
|
<div style='position: absolute; top: 17%; left: 20%; width: 70%'>
|
|
<!-- I quickly made up this SVG, thanks to Inkscape -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282.7771 84.714764" width="70%" height="70%" preserveAspectRatio="xMidYMid meet">
|
|
<defs>
|
|
<filter id="f-filter2446">
|
|
<feGaussianBlur id="gauss" stdDeviation="0.01" in="SourceGraphic"/>
|
|
</filter>
|
|
</defs>
|
|
<g style="filter:url(#f-filter2446)">
|
|
<text xml:space="preserve" style="font-size:40px;fill:#000000;fill-opacity:1;stroke:none" id="f-id2756994-text2763"><textPath xlink:href="#f-path3374"><tspan id='svgText'>This is SVG</tspan></textPath></text>
|
|
<path style="fill:none;fill-rule:evenodd" d="M 31.438511,68.020106 L 99.128956,33.059107 L 150.45468,64.300851 L 195.82959,50.911532 L 230.79059,60.581596 L 258.31308,37.522213" id="f-path3374"/>
|
|
<path style="fill-opacity:0.5;fill:#ff0000;fill-rule:evenodd;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="f-path2384" d="M 29.754046,32.686872 C 30.872911,33.805738 28.797846,34.747089 27.894418,34.546499 C 25.446183,34.002915 25.052615,30.867031 26.034792,28.967616 C 27.791676,25.570008 32.353921,25.17198 35.33293,27.107991 C 39.704747,29.949165 40.11067,36.102591 37.192554,40.125385 C 33.303165,45.487137 25.509773,45.897274 20.455905,41.985008 C 14.096129,37.06182 13.683635,27.607986 18.596283,21.529103 C 24.546158,14.166762 35.670958,13.752845 42.771443,19.669482 C 51.139118,26.642034 51.553955,39.443938 44.631063,47.563897 C 36.638311,56.938712 22.155407,57.354174 13.017393,49.423516 C 2.6342,40.412199 2.218294,24.245663 11.157775,14.090591 C 21.18652,2.6981342 39.038554,2.2819028 50.209956,12.230974 C 62.612327,23.276328 63.028807,42.815226 52.069572,55.00241"/>
|
|
<path style="opacity:0.5;fill:#4fe64d;stroke:#0b97f1;stroke-opacity:1" id="f-path3198" d="M 111.57766,58.72166 C 76.153183,86.555178 144.20291,71.54 100.35499,61.197943 C 56.507077,50.855885 110.67472,94.697497 91.421733,53.967644 C 72.168757,13.23779 71.664977,82.922564 91.504813,42.475325 C 111.34466,2.028086 56.548817,45.081967 100.54167,35.374938 C 144.53453,25.66791 76.709003,9.6704458 111.72737,38.013218 C 146.74573,66.35599 116.96452,3.353599 116.63884,48.403487 C 116.31316,93.453374 147.00214,30.888141 111.57766,58.72166 z"/>
|
|
<path style="opacity:0.3;fill:#4e4de6;stroke:#e92525;stroke-width:0.78779298;stroke-opacity:1" id="f-path3196" d="M 229.69976,69.418008 C 210.67082,66.314725 249.55795,67.807146 235.85589,71.01375 C 222.15385,74.220354 229.68777,60.024225 225.74392,76.902606 C 221.80006,93.780986 200.88656,32.73867 198.78891,52.200453 C 196.69125,71.662236 170.77954,92.663803 175.67102,72.971525 C 180.56252,53.279247 213.12552,63.488956 188.59271,58.675007 C 164.05991,53.861058 224.67078,68.536086 220.59052,61.668568 C 216.51028,54.80105 172.30843,52.55863 184.37339,40.879455 C 196.43836,29.200281 174.40062,20.034246 199.32521,33.944684 C 224.24982,47.855122 169.94231,47.383713 190.58578,68.558297 C 211.22925,89.732883 248.7287,72.521292 229.69976,69.418008 z"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div style='width: 50%; position: fixed; top: 20%; left: 1%; -moz-transform:rotate(-10deg) skew(-5deg, -5deg); -o-transform:rotate(-10deg) skew(-5deg, -5deg); -webkit-transform:rotate(-10deg) skew(-5deg, -5deg); transform:rotate(-10deg) skew(-5deg, -5deg);'>
|
|
<p style='-moz-transform:rotate(-5deg) translate(0, -5px);-webkit-transform:rotate(-5deg) translate(0, -5px);-o-transform:rotate(-5deg) translate(0, -5px);transform:rotate(-5deg) translate(0, -5px)'>HTML Video<br />with DFXP captions</p>
|
|
<div style='float: left; margin-left: 2%'>
|
|
<!-- The original version of this video demo is http://www.w3.org/2009/02/ThisIsCoffee.html -->
|
|
<!-- width and height are CSS pixels, ie no dimensions. Why isn't height='' equivalent to the CSS property ? -->
|
|
<video width="320px" height='240px' id='vid'>
|
|
<source src="http://media.w3.org/2009/02/ThisisCo1961_tiny.ogv" type="video/ogg; codecs="theora, vorbis"" />
|
|
<source src="http://media.w3.org/2009/02/ThisisCo1961_tiny.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""/>
|
|
<!-- Yep, this element isn't defined anywhere but I need a way to point to captions that aren't in the video resource -->
|
|
<text lang='en' type="application/ttaf+xml" src="http://www.w3.org/2009/02/ThisIsCoffee61_captions.xml"></text>
|
|
<p>Oops, no video support</p>
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<div style=' width: 40%; text-align: center; border: 1px solid green; background: black; color: white; font-weight: bold; padding: 3px; position: fixed; bottom: 30%; left: 45%; right: 10%; -moz-transform:rotate(-15deg) skew(10deg, 20deg); -moz-border-radius: 20px; opacity: 0.75;-moz-transform:rotate(-15deg) skew(10deg, 20deg); -moz-border-radius: 20px; opacity: 0.75;-webkit-transform:rotate(-15deg) skew(10deg, 20deg); -webkit-border-radius: 20px; opacity: 0.75;-o-transform:rotate(-15deg) skew(10deg, 20deg); -o-border-radius: 20px; opacity: 0.75; transform:rotate(-15deg) skew(10deg, 20deg); border-radius: 20px; opacity: 0.75'>
|
|
<!--
|
|
<p xml:lang="ja" lang="ja"
|
|
style="font-family: "MS Gothic", "Arial Unicode MS", sans-serif;">ワールド・ワイド・ウェッブを世界中に広げましょう</p>
|
|
-->
|
|
<p>Ruby annotations:</p>
|
|
<p xml:lang="ja">これは
|
|
<ruby style="vertical-align: 15px ! important; margin-top: -10px ! important; margin-bottom: -10px ! important;">
|
|
<!-- rbc and rtc aren't supported in HTML 5? -->
|
|
<rbc>
|
|
<rb>日本語</rb>
|
|
</rbc>
|
|
<rtc>
|
|
<rt style="letter-spacing: 2px ! important;">にほん<span class="ruby-text-lastLetterBox">ご</span></rt>
|
|
</rtc>
|
|
<rtc>
|
|
<rt style="letter-spacing: 14px ! important;">言<span class="ruby-text-lastLetterBox">語</span></rt>
|
|
</rtc>
|
|
</ruby>
|
|
です。</p>
|
|
</div>
|
|
<div id='math' style='position: fixed; top:30%; left: 65%; right: 2%; width: 45ex; -moz-transform:rotate(25deg);-webkit-transform:rotate(25deg);-o-transform:rotate(25deg);transform:rotate(25deg);'>
|
|
<p style='font-weight: bold; font-family: cursive;'>MathML:</p>
|
|
<math xmlns="http://www.w3.org/1998/Math/MathML" style='font-size: 130%;'>
|
|
<mrow>
|
|
<mi>G</mi>
|
|
<mfenced>
|
|
<mi id='x1'>x</mi>
|
|
<mi id='y1'>y</mi>
|
|
</mfenced>
|
|
</mrow>
|
|
<mo>=</mo>
|
|
<mfrac>
|
|
<mn>1</mn>
|
|
<mrow>
|
|
<mn>2</mn>
|
|
<mi>π</mi>
|
|
<msup>
|
|
<mi>σ</mi>
|
|
<mn>2</mn>
|
|
</msup>
|
|
</mrow>
|
|
</mfrac>
|
|
<msup>
|
|
<mi id='e'>e</mi>
|
|
<mrow id='row'>
|
|
<mo form="infix">-</mo>
|
|
<mfrac>
|
|
<mrow>
|
|
<msup>
|
|
<mi id='x2'>x</mi>
|
|
<mn>2</mn>
|
|
</msup>
|
|
<mo>+</mo>
|
|
<msup>
|
|
<mi id='y2'>y</mi>
|
|
<mn>2</mn>
|
|
</msup>
|
|
</mrow>
|
|
<msqrt>
|
|
<mn>2</mn>
|
|
<msup>
|
|
<mi>σ</mi>
|
|
<mn>2</mn>
|
|
</msup>
|
|
</msqrt>
|
|
</mfrac>
|
|
</mrow>
|
|
</msup>
|
|
</math>
|
|
</div>
|
|
<input id='input' onkeyup='updateSVG(); return true;' type='text' style='font-family: Steve, cursive; color: blue; position: fixed; top:45%; right: 28%; -moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg)' size='20' value='This is SVG' />
|
|
<button id='play' onclick='play();' style='border: 1px solid red; background: transparent; -moz-border-radius: 10px; font-family: cursive; font-size: 150%; font-weight: bold;position: fixed; top:35%; left: 50%; -moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)'><span style='color:red'>P</span><span style='color:green'>l</span>a<span style='color:blue'>y</span></button>
|
|
<button id='stop' onclick='stop();' disabled='true' style='position: fixed; top:35%; left: 60%; -moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)'>Stop</button>
|
|
<button onclick='modifySVG();' style='position: fixed; top: 70%; left: 40%; -moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);-o-transform:rotate(-20deg);transform:rotate(-20deg)'>Add Gaussian Blur</button>
|
|
<button onclick='resetDemo();' style='position: fixed; top: 65%; left: 30%; -moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg)'>Reset demo</button>
|
|
<button onclick='modifyText();' style='position: fixed; top:25%; left: 30%; -moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg)'>More text</button>
|
|
<button id='rotate' onclick='changeRotation();' style='font-family: Steve, cursive; position: fixed; top:40%; left: 25%; color:green'>Rotate Me</button>
|
|
<button onclick='changeMath();' style='font-family: Steve, cursive; position: fixed; top:55%; left: 40%; -moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)'>Change formula</button>
|
|
<button onclick='RDFAHighlight();' style='position: fixed; top:55%; right: 1%; -moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg)'>RDFa highlight</button>
|
|
|
|
|
|
<div style='position: fixed; bottom: 5%; left: 5%; right: 40%; background: black; color: white;-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg); -moz-border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px;'>
|
|
<p
|
|
id='cssText'
|
|
style="-moz-column-width: 20ex;-webkit-column-width: 20ex; -o-column-width: 20ex;column-width: 20ex;text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;">Shiny effect using CSS!</p>
|
|
</div>
|
|
|
|
<div style='position: fixed; width: 40%; top: 75%; left: 60%; font-size: 120%;'>
|
|
<p property="dc:description">Several Web technologies in ONE document</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|