Centrum Wiskunde & Informatica: Synchronizing Web Documents with Style

<!DOCTYPE html> <html lang="en"> <head> <title> Centrum Wiskunde & Informatica: Synchronizing Web Documents with Style </title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="citation_title" content="Synchronizing Web Documents with Style"/> <meta name="citation_author" content="Guimarães, Rodrigo"/> <meta name="citation_author" content="Bulterman, Dick"/> <meta name="citation_author" content="César Garcia, Pablo Santiago"/> <meta name="citation_author" content="Jansen, Jack"/> <meta name="citation_date" content="2014/11/01"/> <meta name="citation_publication_date" content="2014/11/01"/> <meta name="citation_online_date" content="2014/11/01"/> <meta name="citation_abstract" content="In this paper we report on our efforts to define a set of document extensions to Cascading Style Sheets (CSS) that allow for structured timing and synchronization of elements within a Web page. Our work considers the scenario in which the temporal structure can be decoupled from the content of the Web page in a similar way that CSS does with the layout, colors and fonts. Based on the SMIL (Synchronized Multimedia Integration Language) temporal model we propose CSS document extensions and discuss the design and implementation of a proof of concept that realizes our contributions. As HTML5 seems to move away from technologies like Flash and XML (eXtensible Markup Language), we believe our approach provides a flexible declarative solution to specify rich media experiences that is more aligned with current Web practices." /> <meta name="citation_doi" content="10.1145/2664551.2664555" /> <link rel="alternate" type="application/rdf+xml" title="VIVO" href="https://ir.cwi.nl/pub/22705/rdf"/> <link rel="repository" href="https://ir.cwi.nl/"/> <link rel="me" href="https://ir.cwi.nl/pub/22705/"/> <link rel="view" href="https://ir.cwi.nl/pub/22705"/> <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico"/> <link rel="stylesheet" type="text/css" href="/static/css/bundle-1.css"/> <script type="text/javascript" src="/static/js/bundle-1.js"></script>   </head> <body> <div id="wrap"> <header> <div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <div class="container"> <a class="brand" style="padding:10px;width:200px" href="https://ir.cwi.nl/"> <img alt="university website" style="width:100%" src="https://ir.cwi.nl/cwi.png"/> </a> <a class="hidden" href="https://ir.cwi.nl/year">Publications by Year</a> <ul class="nav"> </ul> <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> <a class="dropdown-toggle" href="https://ir.cwi.nl/login?next=/pub/22705"> <span class="icon-signin"></span> sign in </a> </li> </ul> </div> </div> </div> </header> <div id="breadcrumb" class="row-fluid"> <div class="span12"> <ul class="breadcrumb"> <li> <a href="https://ir.cwi.nl/org/14">Distributed and Interactive Systems</a> <span class="divider">/</span> </li> <li class="active">In Proceedings</li> <li class="pull-right"> <div class="input-append search-box" style="margin-top:-5px"> <label for="search-query-box" style="display:none">Search:</label> <input type="text" class="input-large search-input" id="search-query-box" style="width:250px" value="" name="query"/> <a class="btn btn-primary search-button" style="border-bottom:1px solid rgba(0, 0, 0, 0.25)" href="https://ir.cwi.nl/search#"> <span class="icon-search"></span> Search </a> </div> </li> </ul> </div> </div> <div class="row-fluid"> <div id="main-left" class="span1"> </div> <div id="main" class="span10"> <div id="content"> <div class="page-header"> <div class="clearfix"> <p class="lead author-list pull-left"> <span style=""> <a href="https://ir.cwi.nl/ppl/4444"> <span>R.L. Guimarães (Rodrigo)</span></a><span>, </span> </span> <span style=""> <a href="https://ir.cwi.nl/ppl/1040"> <span>D.C.A. Bulterman (Dick)</span></a><span>, </span> </span> <span style=""> <a href="https://ir.cwi.nl/ppl/2770"> <span>P.S. César Garcia (Pablo Santiago)</span></a><span> and </span> </span> <span style=""> <a href="https://ir.cwi.nl/ppl/1042"> <span>A.J. Jansen (Jack)</span></a> </span> <br class="clearfix"/> </p> <p class="lead pub_type pull-right"> <span>2014-11-01</span> </p> </div> <h1>Synchronizing Web Documents with Style</h1> <h2 style="display:none">Publication</h2> <h3 style="display:none">Publication</h3> <div> <em> Presented at the <span>Brazilian Symposium on Multimedia and the Web</span>, Joao Pessoa, Brazil </em> </div> </div> <div class="row-fluid"> <div class="span8">  <div class="abstract">In this paper we report on our efforts to define a set of document extensions to Cascading Style Sheets (CSS) that allow for structured timing and synchronization of elements within a Web page. Our work considers the scenario in which the temporal structure can be decoupled from the content of the Web page in a similar way that CSS does with the layout, colors and fonts. Based on the SMIL (Synchronized Multimedia Integration Language) temporal model we propose CSS document extensions and discuss the design and implementation of a proof of concept that realizes our contributions. As HTML5 seems to move away from technologies like Flash and XML (eXtensible Markup Language), we believe our approach provides a flexible declarative solution to specify rich media experiences that is more aligned with current Web practices.</div>  <div id="publication-metadata"> <table class="table"> <thead> <tr><th colspan="2" class="publiation-metadata-header">Additional Metadata</th></tr> </thead> <tbody> <tr> <td style="min-width:120px"> <span class="publication-metadata-key">THEME</span> </td> <td> <span class="publication-metadata-value" key="THEME">Information (theme 2)</span><span>,</span> <span class="publication-metadata-value" key="THEME">Software (theme 1)</span> </td> </tr> <tr> <td style="min-width:120px"> <span class="publication-metadata-key">Stakeholder</span> </td> <td> <span>Unspecified</span> </td> </tr> <tr> <td style="min-width:120px"> <span class="publication-metadata-key">Publisher</span> </td> <td> <span>ACM</span> </td> </tr> <tr> <td style="min-width:120px"> <span class="publication-metadata-key">Persistent URL</span> </td> <td> <a href="https://doi.org/10.1145/2664551.2664555">doi.org/10.1145/2664551.2664555</a> </td> </tr> <tr> <td style="min-width:120px"> <span class="publication-metadata-key">Conference</span> </td> <td> <span>Brazilian Symposium on Multimedia and the Web</span> </td> </tr> <tr> <td class="publication-metadata-key"> Organisation </td> <td> <a href="https://ir.cwi.nl/org/14">Distributed and Interactive Systems</a> </td> </tr> <tr> <td><span class="publication-metadata-key">Citation</span><br/> <div class="btn-group dropup" id="citation-menu"> <a class="btn dropdown-toggle btn-small" id="citation-menu-button" data-toggle="dropdown" href="#"> APA Style <span class="icon-chevron-up"></span> </a> <ul class="dropdown-menu"> <li> <a href="#" class="citation-style-pub" data-citation-style="aaa"> AAA Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="apa"> APA Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="cell"> Cell Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="chicago"> Chicago Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="harvard"> Harvard Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="ieee"> IEEE Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="mla"> MLA Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="nature"> Nature Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="vancouver"> Vancouver Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="american-institute-of-physics"> American-Institute-of-Physics Style </a> </li> <li> <a href="#" class="citation-style-pub" data-citation-style="council-of-science-editors"> Council-of-Science-Editors Style </a> </li> <li class="divider"/> <li> <a href="#" class="citation-format-pub" data-citation-format="bibtex"> BibTex Format </a> </li> <li> <a href="#" class="citation-format-pub" data-citation-format="endnote"> Endnote Format </a> </li> <li> <a href="#" class="citation-format-pub" data-citation-format="ris"> RIS Format </a> </li> <li> <a href="#" class="citation-format-pub" data-citation-format="csl"> CSL Format </a> </li> <li> <a href="#" class="citation-format-pub" data-citation-format="dois only"> DOIs only Format </a> </li> </ul> </div> </td> <td id="citation-text"> <div class="csl-bib-body"><div class="csl-entry">Guimarães, R., Bulterman, D., César Garcia, P. S., & Jansen, J. (2014). Synchronizing Web Documents with Style. In <em>Proceedings of Brazilian Symposium on Multimedia and the Web 2014 (0)</em> (pp. 151–158). ACM. doi:10.1145/2664551.2664555</div></div> </td> </tr> </tbody> </table> </div> </div> <div class="span4"> <ul class="publication-identifiers unstyled"> <li> <a href="https://doi.org/10.1145/2664551.2664555"><span class="icon-link"></span> View at Publisher</a> </li> </ul> <hr style="margin:5px 0px 5px 0px;"/> <div class="publication-downloads"> <legend> <a href="https://ir.cwi.nl/pub/22705/Fulltext" target="_blank"> <span class="icon-download-alt"></span> <span class="download-link-text"> Free Full Text </span> <small class="download-link-info"> ( Final Version ) </small> </a> </legend> </div> <div> <br/> <table class="table" id="additional_assets_table"> <thead> <tr><th colspan="2">Additional Files</th></tr> </thead> <tbody> <tr> <td> <span class="icon-book"></span> <a href="https://ir.cwi.nl/pub/22705/22705B.pdf"> <span>22705B.pdf</span> </a> <span class="pull-right"> Author Manuscript , 663kb </span> </td> </tr> <tr> <td> <span class="icon-external-link"></span> <a href="https://ir.cwi.nl/pub/22705/Publisher%20Version" target="_blank"> <span>Publisher Version</span> </a> <span class="pull-right"> </span> </td> </tr> </tbody> </table> </div> <br/> </div> </div> </div> </div> <div id="main-right" class="span1"> </div> </div> </div> <footer class="footer row-fluid"> <div class="span10 offset1"> <div class="row-fluid"> <div class="span3"> <a> <img alt="university website" src="https://ir.cwi.nl//cwi.png"/> </a> <ul class="unstyled"> </ul> </div> <div class="span3"> <ul class="unstyled"> <li> <div> <h4>Address</h4> <ul class="unstyled" style="margin-left:0"> <li> <div class="lead" style="margin:4px"> <a href="http://www.cwi.nl"> Centrum Wiskunde & Informatica </a> </div> </li> <li> <div class="lead" style="margin:4px"> <a href="http://www.cwi.nl"> Science Park 123 | 1098 XG Amsterdam | the Netherlands </a> </div> </li> </ul> </div> </li> </ul> </div> <div class="span3"> <ul class="unstyled"> <li> <div> <h4>CWI researchers</h4> <ul class="unstyled" style="margin-left:0"> <li> <div class="lead" style="margin:4px"> <a href="/page/1"> <span class="icon-file"></span> Register Your Work </a> </div> </li> </ul> </div> </li> <li> <div> <h4>Questions or comments?</h4> <ul class="unstyled" style="margin-left:0"> <li> <div class="lead" style="margin:4px"> <a href="mailto:repository@cwi.nl"> <span class="icon-envelope"></span> repository@cwi.nl </a> </div> </li> </ul> </div> </li> </ul> </div> </div> </div> <div class="span1"> <a href="http://www.artudis.com" class="pull-right" style="margin: 170px 20px 10px 10px"> <img src="/static/img/logo/artudis_small.png" width="100" alt="artudis website"/> </a> </div> </footer> <div id="modal-workflow-editor" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="modal-workflow-header">Workflow</h3> </div> <div id="modal-workflow-form"></div> </div> <div id="modal-iframe" style="width:800px" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="modal-iframe-header">Workflow</h3> </div> <div> <iframe id="modal-iframe-body" src="" style="width:100%;height:500px" frameborder="0" ></iframe> </div> </div> <div id="add-content-modal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="modal-edit-header">Add Content</h3> </div> <div class="modal-body"> <div class="btn-group btn-group-vertical" style="width:100%;max-height:600px;overflow:auto"> <br/> <a class="btn btn-large" style="margin:auto;width:300px" href="https://ir.cwi.nl/user/add">User</a> <a class="btn btn-large" style="margin:auto;width:300px" href="https://ir.cwi.nl/pub/add">Publication</a> <a class="btn btn-large" style="margin:auto;width:300px" href="https://ir.cwi.nl/ppl/add">Person</a> <a class="btn btn-large" style="margin:auto;width:300px" href="https://ir.cwi.nl/org/add">Organisation</a> <a class="btn btn-large" style="margin:auto;width:300px" href="https://ir.cwi.nl/col/add">Collection</a> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a> </div> </div> </body> </html>

CINXE.COM

Centrum Wiskunde & Informatica: Synchronizing Web Documents with Style