Creating a Simple Static Site

From bemoko developer wiki

Jump to: navigation, search
EXERCISE - Creating a Simple Static Site
... more exercises
Summary: Create a simple static site in bemokoLive
Level: Basic

Get the Site

  1. Check out the source from SVN into your bemokoLive sites directory.
    cd ~/bemoko/sites
    svn co http://bemoko.googlecode.com/svn/sites/exercise_simple_site/trunk exercise_simple_site
  2. Or download (coming soon) and extract the site into your bemokoLive sites directory.
  3. Access the page on your bemokoLive install, e.g. http://localhost:8080/live/exercise_simple_site/i

You can also simply browse the source.


Now access the page with a wide screen device (e.g. smartphone or PC) and a narrow screen device (e.g. a 128px device simulation with User Agent Switcher in firefox). Notice that a different message is delivered to these different categories of devices.

How does it work?

The site-config.xml defines the intent called "i" which is rendered with the index.html page. 

<site>
  <intents>
    <intent name="i" type="template" view="index.html"/>
  </intents>
</site>

The index.html page includes the template message.html with the instruction [#include "message.html"]. This message.html is loaded from the ui/320/message.html for any device with a width greater than 320 and from ui/root/message.html for all other devices. The UI folder names, e.g. "320", "pc" and "iphone", are defined in the site configuration with implicit configuration coming from the default site - see UI Configuration for more details on this.

Why not have a play with the other UI types and put a different message.html in each one to show how the different templates are picked up.

... more tipsTip
Create default UI resources in the root UI folder so that you always have a fallback template ready to be delivered. Create resources in other UI folders to override the default.

Styling is applied with the following HTML in the index.html file: 

<link rel="stylesheet" type="text/css" href="/main.css"/>

with the main.css defined to include two CSS modules; (1) default.css which defines standard styling that we tend to apply for all sites and (2) skin.css which defines the look and feel for the given site: 

[#-- main.css --]
[#include "css/default.css"]
 
[#-- css components --]
[#include "css/skin.css"]

The modularisation of the css in this way (i.e. separating css into small building blocks) is an important best practice that helps to deliver optimised to css to different devices.

... more tipsTip
Put the CSS files inside a css sub-directory to keep them organised together and not mixed up with the HTML templates.
Retrieved from "http://www.bemoko.com/wiki/Creating_a_Simple_Static_Site"