WEDIA WMS front engine : HTML skeleton

WEDIA WMS front engine : HTML skeleton

Posted on Monday, January 11, 2010

  • | Facebook
  • Twitter
  • Delicious
  • print

A native HTML structure to ease developements and plugins sharing

Section(s): front office, templates

In order to ease developments and plugins sharing, WEDIA WMS provides an HTML skeleton. It is recomanded to follow it, nevertheless it can be adapted if needed.

 Before reading

 Read also

By default, WEDIA WMS provides an HTML skeleton. This skeleton can be found on each content detail (article, section, ...) and the home page.

It was thought to provide as many containers as possible for defining as many websites designs as possible. The aim is to reuse systematically this skeleton and to ease HTML integration as only requested zones will be coded.

Predefined containers are :

  • header (div#header)
  • navigation (div#menu)
  • bread crumb (div#breadcrumb)
  • content (div#content)
  • footer (div#footer)

Some of these containers are devided in sub containers.

For the header :
  • div#title: for example the logo
  • div#pub: for example ads
  • div#tools: fore example global search
For the content :
  • div#detail: detail of content
  • div#sidebar: animation (cloud links...)

We can notice that in most cases, each container first contains a div.container. These .container divs are complementary entry points for HTML integration.

This skeleton should be used for all site, but if it is not adapted to a specific design, it can be bypassed. Any part of the skeleton can be bypassed or moved. This is to ease plugins integration between sites and multisite functionalities.

Content page blank HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
    
  </title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" media="screen" type="text/css" href="/wms/model/front/css/global.css" />
  <script type="text/javascript" src="/wms/model/front/js/global.js" charset="ISO-8859-15"></script>
  <script type="text/javascript" src="/wms/model/front/js/xdhtml.js" charset="ISO-8859-15"></script>
</head>
<body>
  <div id="body">
    <div id="header">
      <div class="container">
        <div id="title">
          <div class="container">
            ...
          </div>
        </div>
        <div id="pub">
          <div class="container">
            ...
          </div>
        </div>
        <div id="tools">
          <div class="container">
            ...
          </div>
        </div>
      </div>
    </div>
    <div id="menu">
      <div class="container">
        <ul id="menu_root" class="menu level_1">
          ...
        </ul>
      </div>
    </div>
    <div id="breadcrumb">
      <div class="container">
        ...
      </div>
    </div>
    <div id="content">
      <div class="container">
        <div id="detail">
          <div class="container">
            <div id="detail_actions">
              <div class="container">
                ...
              </div>
            </div>
            <div id="element">
              ...
            </div>
          </div>
        </div>
        <div id="sidebar">
          <div class="container">
            ...
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        ...
      </div>
    </div>
  </div>
</body>
</html>

Home page blank HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
    
  </title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" media="screen" type="text/css" href="/wms/model/front/css/global.css" />
  <script type="text/javascript" src="/wms/model/front/js/global.js" charset="ISO-8859-15"></script>
  <script type="text/javascript" src="/wms/model/front/js/xdhtml.js" charset="ISO-8859-15"></script>
</head>
<body>
  <div id="body">
    <div id="header">
      <div class="container">
        <div id="title">
          <div class="container">
            ...
          </div>
        </div>
        <div id="pub">
          <div class="container">
            ...
          </div>
        </div>
        <div id="tools">
          <div class="container">
            ...
          </div>
        </div>
      </div>
    </div>
    <div id="menu">
      <div class="container">
        <ul id="menu_root" class="menu level_1">
          ...
        </ul>
      </div>
    </div>
    <div id="content">
      <div class="container">
        <div id="detail">
          <div class="container">
            ...
          </div>
        </div>
        <div id="sidebar">
          <div class="container">
            ...
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        ...
      </div>
    </div>
  </div>
</body>
</html>

About global.js and xdhtml.js

It is strongly recommended to keep those two library references as plugins might use functions defined in both those libraries:

  • Attaching new libraries (thanks to wediaGlobal.importLibrary API) in global.js
  • Attach and remove event listeners (thanks to XDHTML.addListener XDHTML.removeListener )