index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Adaptive Web Components</title>
    <!-- Basic website: -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/vendor/normalize/normalize.css">
    <link rel="stylesheet" href="assets/vendor/prism/prism.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- Dependencies: -->
    <script src="assets/vendor/handlebars/handlebars.min.js" charset="utf-8"></script>
    <!-- Core classes: -->
    <script src="src/Darwin.js"></script>
    <!-- Web components: -->
    <link rel="import" data-tag="awc-profile" href="comps/awc-profile.html">
    <link rel="import" data-tag="awc-textbox" href="comps/awc-textbox.html">
    <link rel="import" data-tag="awc-image" href="comps/awc-image.html">
  </head>

  <body data-spy="scroll" data-target="#scrollspy" data-offset="50">

    <!-- top navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <span class="navbar-brand">Darwin.js</span>
        </div>
      </div>
    </nav>
    <!-- /top navigation -->

    <!-- header -->
    <header class="jumbotron">
      <div class="container">
        <h1>Adaptive Web Components</h1>
        <p>Use adaptive user interfaces today by creating and using predefined Web Components.</p>
        <p>
          <a class="btn btn-primary btn-lg" href="#usage" role="button"><i class="fa fa-book" aria-hidden="true"></i> Getting Started</a>
          <a class="btn btn-primary btn-lg" href="lib/darwin.js" role="button" download><i class="fa fa-download" aria-hidden="true"></i> Download Darwin.js</a>
        </p>
      </div>
    </header>
    <!-- /header -->

    <!-- container -->
    <div class="container">

      <div id="alert" class="alert alert-warning col-xs-12 col-sm-12" style="text-align: center;" role="alert">
        Your browser doesn't support all required Web Components technologies. Please update your browser!
      </div>
      <script>
        if (('customElements' in window && !!HTMLElement.prototype.attachShadow) === true) {
          document.getElementById('alert').style.display = 'none';
        }
      </script>

      <!-- row -->
      <div class="row">

        <!-- aside -->
        <aside class="col-xs-6 col-sm-2 sidebar-offcanvas" id="scrollspy" role="complementary">
          <nav id="sidebar">
            <h3>Navigation</h3>
            <ul class="nav nav-sidebar">
              <li><a href="#introduction">Introduction</a></li>
              <li><a href="#examples">Examples</a></li>
              <li><a href="#usage">Usage</a></li>
              <li><a href="#downloads">Downloads</a></li>
              <li><a href="#requirements">Requirements</a></li>
              <li><a href="#browser_support">Browser Support</a></li>
              <li><a href="#build_process">Build Process</a></li>
              <li><a href="#funding">Funding Acknowledgement</a></li>
              <li><a href="#license">License</a></li>
            </ul>
          </nav>
        </aside>
        <!-- /aside -->

        <!-- main -->
        <main class="col-xs-12 col-sm-10 main">

          <!-- section: introduction -->
          <section class="section" id="introduction">
            <h2 class="sub-header">Introduction</h2>
            <p>Web Components are a set of features currently being added by the <strong>W3C</strong> to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind
              them is to bring component-based software engineering to the World Wide Web. In this research project we add the ability to use <strong>adaptive</strong> components, which consider the need and preference set of a user to improve the accessibility,
              usability and user experience.
            </p>
          </section>
          <!-- /section: introduction -->

          <!-- section: examples -->
          <section class="section" id="examples">
            <h2 class="sub-header">Examples</h2>

            <div class="element">
              <h3>Adaptive Profile</h3>
              <p>The style and content of web components can be changed adaptively.</p>
              <p class="subline"><strong>Component</strong>: <a href="https://github.com/REMEXLabs/AWC/blob/master/comps/awc-profile.html">awc-profile.html</a></p>
              <pre><code class="language-markup">&lt;figure>
  &lt;img src="/assets/img/{{ filename }}.png" alt="{{ name }}">
  &lt;figcaption>Hello, I'm &lt;strong>{{ name }}&lt;/strong>.&lt;/figcaption>
&lt;/figure></code></pre>
              <pre><code class="language-markup">&lt;awc-profile></code></pre>
              <p class="subline"><strong>Result</strong>:</p>
              <awc-profile>
            </div>

            <div class="element">
              <h3>Adaptive Textbox</h3>
              <p class="subline"><strong>Component</strong>: <a href="https://github.com/REMEXLabs/AWC/blob/master/comps/awc-textbox.html">awc-tetxbox.html</a></p>
              <pre><code class="language-markup">&lt;div class="contrast_{{ contrast }} reading_direction_{{ reading_direction }} size_{{ size }}">
  &lt;p>Multiple paragraphs.&lt;/p>
&lt;/div></code></pre>
              <pre><code class="language-markup">&lt;awc-textbox></code></pre>
              <p class="subline"><strong>Result</strong>:</p>
              <awc-textbox>
            </div>

            <div class="element">
              <h3>Adaptive Image</h3>
              <p class="subline"><strong>Component</strong>: <a href="https://github.com/REMEXLabs/AWC/blob/master/comps/awc-image.html">awc-image.html</a></p>
              <pre><code class="language-markup">&lt;img class="contrast_{{ contrast }} size_{{ size }}" src="/assets/img/carole.png" alt="Carole"></code></pre>
              <pre><code class="language-markup">&lt;awc-image></code></pre>
              <p class="subline"><strong>Result</strong>:</p>
              <awc-image>
            </div>

          </section>
          <!-- /section: examples -->

          <!-- section: usage -->
          <section class="section" id="usage">
            <h2 class="sub-header">Usage</h2>

            <!-- div.examples -->
            <div class="examples">
              <div class="example">
                <p>Define and register a new HTML element as tag. You have to use the namespace 'awc' to use the library:</p>
                <pre><code class="language-markup">
                  &lt;awc-box>
                </code></pre>
                <p>After that you create a template with HTML markup and a style:</p>
                <pre><code class="language-markup">
                  &lt;section class="{{ contrast }} {{ reading_direction }}">
                    &lt;p>Hello {{ name }}&lt;/p>
                  &lt;/section>
                </code></pre>
                <p>In addition you can set an initial data model:</p>
                <pre><code class="language-markup">
                  {
                    name: 'Peter',
                    filename: 'peter',
                    size: 'large'
                  }
                </code></pre>
                <p>Finally you create a new AWC. Have a look into the predefined <a href="https://github.com/REMEXLabs/AWC/tree/master/comps">components</a> on GitHub.</p>
              </div>
            </div>
            <!-- /div.examples -->

          </section>
          <!-- /section: usage -->

          <!-- section: events -->
          <section class="section" id="events">
            <h2 class="sub-header">Events</h2>

            <!-- div.events -->
            <div class="events">
              <div class="event">
                <p>The method <strong>Components.updateAll</strong> updates all defined adaptive web components:</p>
                <pre><code class="language-js" data-js="Components.updateAll({ name: 'Anna', filename: 'anna' });">
                  Components.updateAll({
                    name: 'Anna',
                    filename: 'anna'
                  });
                </code></pre>
                <button>Update</button>
              </div>
              <div class="event">
                <pre><code class="language-js" data-js="Components.updateAll({ name: 'Tom', filename: 'tom', reading_direction: 'rtl', contrast: 'normal', size: 'normal' });">
                  Components.updateAll({
                    name: 'Tom',
                    filename: 'tom',
                    reading_direction: 'rtl',
                    contrast: 'normal',
                    size: 'normal'
                  });
                </code></pre>
                <button>Update</button>
              </div>
              <div class="event">
                <pre><code class="language-js" data-js="Components.updateAll({ name: 'Carole', filename: 'carole', reading_direction: 'ltr', contrast: 'high', size: 'large' });">
                  Components.updateAll({
                    name: 'Carole',
                    filename: 'carole',
                    reading_direction: 'ltr',
                    contrast: 'high',
                    size: 'large'
                  });
                </code></pre>
                <button>Update</button>
              </div>
            </div>
            <div class="event">
              <p>Instead the method <strong>Components.update</strong> updates just a specific adaptive web component:</p>
              <pre><code class="language-js" data-js="Components.update('awc-image', { name: 'Carole', filename: 'carole', reading_direction: 'ltr', contrast: 'high', size: 'large' });">
                Components.update('awc-image', {
                  name: 'Carole',
                  filename: 'carole',
                  reading_direction: 'ltr',
                  contrast: 'high',
                  size: 'large'
                });
              </code></pre>
              <button>Update</button>
            </div>
            <!-- div.events -->

          </section>
          <!-- /section: events -->

          <!-- section: downloads -->
          <section class="section section-downloads" id="downloads">
            <h2 class="sub-header">Download</h2>
            <p><a class="btn btn-primary btn-lg" href="/src/Darwin.js" role="button" download><i class="fa fa-download" aria-hidden="true"></i> Download Darwin.js</a> <span>or</span>
              <a class="btn btn-primary btn-lg" href="/lib/Darwin.js" role="button" download><i class="fa fa-download" aria-hidden="true"></i> Download Darwin.js (transpiled)</a>
            </p>
          </section>
          <!-- /section: downloads -->

          <!-- section: requirements -->
          <section class="section" id="requirements">
            <h2 class="sub-header">Requirements</h2>
            <p>The core library is based on Web Components, which is a term of the use of the following noval technologies. The following list shows the different technologies and approaches.</p>
            <ul>
              <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#the-template-element">HTML Templates</a>
                <p>Method of declaring a portion of reusable markup that is parsed but not rendered until cloned.</p>
              </li>
              <li><a href="https://www.w3.org/TR/custom-elements/">Custom Elements</a>
                <p>Method of defining and using new types of DOM elements in a document.</p>
              </li>
              <li><a href="https://www.w3.org/TR/html-imports/">HTML Imports</a>
                <p>Method of including and reusing HTML documents in other HTML documents.</p>
              </li>
              <li><a href="https://www.w3.org/TR/shadow-dom/">Shadow DOM</a>
                <p>Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.</p>
              </li>
            </ul>
          </section>
          <!-- /section: requirements -->

          <!-- section: browser_support -->
          <section class="section" id="browser_support">
            <h2 class="sub-header">Browser Support</h2>
            <h3>Web Components</h3>
            <p>Web Components are a future technology for modern websites. However, the implementation of the required features is still under development. 
            For this reason, we recommend using the newest stable version of <a href="https://www.google.de/chrome/">Google Chrome</a>.</p>
            <h3>ECMAScript 6</h3>
            <p>The library components are written in <a href="http://es6-features.org/">ECMAScript 6</a>, which is the highest level of JavaScript today. But in general, browser support for the related new features is limited. Because of this, we
              use the JavaScript transpiler <a href="https://babeljs.io/">Babel</a> to improve compatibility.</p>
          </section>
          <!-- /section: browser_support -->

          <!-- section: build_process -->
          <section class="section" id="build_process">
            <h2 class="sub-header">Build Process</h2>
            <h3>Requirements</h3>
            <!-- <p>Installation of <a href="http://gruntjs.com/getting-started#installing-the-cli">Grunt</a>:</p>
              <pre><code class="language-shell">$ npm install -g grunt-cli</code></pre>
              <p>Installation of <a href="https://bower.io/#install-bower">Bower</a>:</p>
              <pre><code class="language-shell">$ npm install -g bower</code></pre>
              <p>Note: The argument <code>-g</code> installs the application globally.</p> -->
            <h3>Installation</h3>
            <p>The file package.json lists all necessary dependencies for a build. Execute the following command to install all packages.</p>
            <pre><code class="language-shell">$ npm install</code></pre>
            <p>Note: Be patient, the download and installation process takes a moment.</p>
            <h3>Process</h3>
            <p>Run the build process by typing:</p>
            <pre><code class="language-shell">$ gulp build</code></pre>
            <p>After that you can start a local webserver (<a href="127.0.0.1:3000">127.0.0.1:3000</a>) and try all examples:</p>
            <pre><code class="language-shell">$ npm start</code></pre>
            <h3>Browser</h3>
            <p>Start the <a href="https://www.google.com/chrome/browser/canary.html">Google Canary</a> with following necessary flags:</p>
            <pre><code class="language-shell">$ &lt;Application> --enable-blink-features=CustomElementsV1,ShadowDOMV1</code></pre>
          </section>
          <!-- /section: build_process -->

          <!-- section: funding -->
          <section class="section" id="funding">
            <h2 class="sub-header">Funding Acknowledgement</h2>
            <p>The research leading to these results has received funding from the European Union's Seventh Framework Programme (FP7) under grant agreement No.610510 (<a href="http://www.prosperity4all.eu/">www.prosperity4all.eu</a>).</p>
          </section>
          <!-- /section: funding -->

          <!-- section: license -->
          <section class="section" id="license">
            <h2 class="sub-header">License</h2>
            <p>See the <a href="LICENSE.txt">license file</a> or visit <a href="http://www.apache.org/licenses/LICENSE-2.0">www.apache.org/licenses/LICENSE-2.0</a>.</p>
          </section>
          <!-- section: license -->

        </main>
        <!-- /main -->

      </div>
      <!-- /row -->
    </div>
    <!-- /container -->

    <!-- persona-selection -->
    <div class="persona-selection">
      <div class="container">
        <section class="personas">
          <div class="description">
            Select one of the listed personas to adapt the required need and preference set on all integrated adaptive components:
          </div>
          <div class="row">
            <!-- http://personabrowser.gpii.eu/ -->
            <div class="persona col-sm-4 col-xs-4">
              <div class="content">
                <img src="assets/img/anna.png" alt="Anna">
                <div class="data">
                  <h3>Anna (17)</h3>
                  <nav>
                    <ul>
                      <li>
                        <a href="javascript:void(0);" onClick="Components.updateAll({ name: 'Anna', filename: 'anna', reading_direction: 'ltr', contrast: 'normal', size: 'normal' });" class="btn btn-primary btn-sm"><i class="fa fa-user" aria-hidden="true"></i> Adapt Set</a>
                      </li>
                      <li>
                        <a href="http://personabrowser.gpii.eu/en/Persona/english-anna/" target="_anna" class="btn btn-primary btn-sm"><i class="fa fa-external-link" aria-hidden="true"></i> Open Details</a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
            <div class="persona col-sm-4 col-xs-4">
              <div class="content">
                <img src="assets/img/tom.png" alt="Tom">
                <div class="data">
                  <h3>Tom (27)</h3>
                  <nav>
                    <ul>
                      <li>
                        <a href="javascript:void(0);" onClick="Components.updateAll({ name: 'Tom', filename: 'tom', reading_direction: 'rtl', contrast: 'normal', size: 'normal' });" class="btn btn-primary btn-sm"><i class="fa fa-user" aria-hidden="true"></i> Adapt Set</a>
                      </li>
                      <li>
                        <a href="http://personabrowser.gpii.eu/en/Persona/english-tom/" target="_tom" class="btn btn-primary btn-sm"><i class="fa fa-external-link" aria-hidden="true"></i> Open Details</a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
            <div class="persona col-sm-4 col-xs-4">
              <div class="content">
                <img src="assets/img/carole.png" alt="Carol">
                <div class="data">
                  <h3>Carole (34)</h3>
                  <nav>
                    <ul>
                      <li>
                        <a href="javascript:void(0);" onClick="Components.updateAll({ name: 'Carole', filename: 'carole', reading_direction: 'ltr', contrast: 'high', size: 'large' });" class="btn btn-primary btn-sm"><i class="fa fa-user" aria-hidden="true"></i> Adapt Set</a>
                      </li>
                      <li>
                        <a href="http://personabrowser.gpii.eu/en/Persona/english-carole/" target="_carole" class="btn btn-primary btn-sm"><i class="fa fa-external-link" aria-hidden="true"></i> Open Details</a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <!-- /persona-selection -->

    <!-- footer -->
    <footer>
      <div class="container">
        <div class="icon">
          <p>
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;" xml:space="preserve">
            <g>
            	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
            		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
            		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
            		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
            		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
            		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
            		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
            		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
            		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
            		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
            		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
            		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
            		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
            		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
            		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
            		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
            		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
            		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
            		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
            		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
            </g>
          </svg>
        </div>
        <p><a href="https://github.com/REMEXLabs/AWC">https://github.com/REMEXLabs/AWC</a>
        </p>
      </div>
    </footer>
    <!-- /footer -->

    <script src="assets/vendor/prism/prism.js" charset="utf-8"></script>
    <script src="assets/js/main.js" charset="utf-8"></script>
  </body>

</html>