John Valentine
 

Contents

This is the meta section, where we hide extra information about the article. Below is a test of article dependency structure (not finished).

Depends on:

Leads to:

  • First item
  • Let's try some nesting:
    • A
    • B
    • C

Warning Heading

This is the body of the warning. These should be used only sparingly, because they're designed to be visible and eye-catching. Too many would cause an article to become difficult to read.

Reading Context

This text might tell you something about the context for reading the article. For example, it might tell you that the material is speculative or intended only for advanced users.

About this test

This site has been written using a custom suite of supporting PHP functions, which ease the authors' task of organising and writing new content. Just like the Wiki principle, we lessen the presentation burden, and touch formatting codes very infrequently. Changes made to style are usually site-wide.

This page uses most of the elements that are available to this site's authors. Given that it's a test, rather than an informative article, some of the layout might look unnatural and contrived; most articles will not use features in quite the same combinations as you see here.

Browser Compatibility

This site was designed to make the most of CSS3 (where we think it looks really good), yet fail gracefully for CSS2 browsers like Internet Explorer 8.

Image section: Title

This is a longer sub-title

This section scales! (beta quality)

Put your teaser text here to encourage further reading. Don't make it too long, or... Oh? are you still there?

Navigation and Semantics

Page Areas

The top of the page has a fixed header, containing the current site (blue background) and page title. All articles of a PHP page will use that template. Icons at the side remove clutter (navigation and meta-data) from the article body.

Sections are defined in coloured bands:

  1. Contents contains a list of links for the current page's headings. This is not yet automated.
  2. Reading Context is yellow, intended for text that suggests how the page should be read.
  3. Detail is fainter and slightly indented, for text that is optional reading.
  4. Warning is bright red; see the floating box.
  5. Important is boxed and stands out.
  6. See Also is blue, with links to other pages.
  7. Uses is typically used in technical or scientific works, where we show what ideas are necessary for the current page, and which ideas are enabled by the current page. These can be auto-generated from a graph file, or provided manually as a compact string. These are commonly enclosed in the 'meta' DIV and hidden behind the icon.

Links

Inline article links

We can use shorthand to link directly to an article by its name, like index, or using alternative body text, like go to the index page. External links are shown with a trailing inline icon (which might not render correctly in IE).

Portfolio links

Details are supplied inline for Portfolio links. Optional tags may be included in the box.

Physics Foundations

A project to design a unifying framework, having simple foundations and standard emergent properties.

hep
phys
math

Zenith

Immersive first-person game

Windows
Delphi
GDI
OpenGL
OpenAL
classical OO
game design

Archives

Explore past projects, from 8-bit onwards.

hardware hacks
audio synthesizer
camera raw
AV
font editor
teletext emulation
galaxy collider

Site Maps

Auto-generated page listings can be found as a Site Map (just a list of article titles), and as a List that includes descriptions for each article. Some pages (like this one) may exist without being listed in the site map.

Searches

It's best to provide the search form somewhere on each page, say in the navigation areas. Try typing something into that, and the site will try to find the best article for you.

  • If you happen upon an exact match for an article title, then that article is displayed.
  • If not, then the article titles, keywords, and descriptions are searched, and a list of matching articles is presented.
  • By default, the search results page shows links to Site Map, Index, and other important pages, so if no search results are found, there will always be somewhere for the reader to go.

References

In this context, a reference is a link to a table of external (or internal) works. Each PHP page has a set of references, which may listed, or be called-upon by any article. There are many ways of presenting references:

  • Inline references can be made from anywhere, and are ideal for maintaining continuity in the article. Clicking on this link takes you to the list of all references, highlighting the chosen reference.
  • Reference Title:
  • Author: .
  • Full details: .

Article Body

Headings

No article style template would be complete without at least three available levels of headings.

Heading 1

Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.

Heading 2

Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.

Heading 3

Lorem ipsum dolor sit amet, cum ut populo voluptaria eloquentiam, eum feugiat voluptaria disputationi eu. His ei commodo prompta platonem. Possim eirmod mei et, nominati splendide instructior no sed, ut dicunt omittam electram cum. Audiam impedit noluisse nam ut, eu qui facer sanctus. Vis ad autem liber voluptatibus, lorem quando legimus vim in, cu sed petentium repudiare.

Bold Paragraph

We don't usually do this for headings, because it (a) doesn't look good, and (b) is not good practice, but we provide it here for comparison.

Character Styling

You might want X keyboard shortcuts, Buttons..., literal text, special terms, text as it appears on-screen, highlight, text that is [not interrupted by] line breaks, text that will not print, or marked text.

Detail section

Articles should contain essential information, presented concisely. Where we want to present non-essential or detailed information that would cause most readers to lose interest, we use detail boxes:

Here is some non-essential text. [At the time of writing] this will be slightly indented and will have a slightly-shaded background. This helps to set the content apart from the main text, and should cause a reader to skip past if they are looking for the main points in an article. Readers having more time on their hands, or who are interested in the detail, will be able to read it without clicking to reveal the detail.

Maths

We use a cross-browser JavaScript library to draw the MathML. It is only enabled on pages that show equations, which improves the user experience. Here's a test:

i = 1 N a i

Data tables

We take the hard work out of table generation, just for simple tables that don't span multiple cells. Per-column formatting can be specified, and header and row styles are applied automatically. We show a simple example below, and you can see other examples linked here: Site Listing, Project log, Number Type: an advanced example.

ConservedNonconserved
SymmetryDivergence
InvarianceChange
Inner productOuter Product
Fermionic*Bosonic
SharpMultiverse
Defined, LocalizedDegenerate
Instant (at point)Latent (other point)
......
Table 1: Meanings for the conservation duality.

Galleries and Figures

Figures are straightforwardly presented, as below. This benefits from a style update that we've not yet applied to the galleries.

Fig.1: Fermion Event.

Lots of smaller images are best arranged as a flowing gallery. This layout makes the most of the width available to the browser, and aligns their bottoms and captions.

1: Starting off
2: Working upwards
3: Later levels: Sentinel has friends!
4: Sentinel's Stare.
5: A starting position in difficult terrain
6: A 'map view' of a landscape
7: A view to the top

Quotes

This provides a way of decoratively showing quoted text, along with attributions. We have optimised the showing of four different types of attribution, including 'none':

The closing quote needs some work (we can make it right-aligned, but it overwrites side-bubbles; or we can make it as you see it now, and it looks a bit untidy.

To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that. To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that. To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that. To quote something is to be resourceful, un-original, and deniable. I never quote anything, and I always tell everyone that.
— Probably Oscar Wilde?
This one quotes an article called ‘test’.
— article: test
This one quotes from a referenced article.
— 12
This quote is unattributed

Experimental

HTML Canvas for diagrams

CSS needs some checking: 'tight'...

Canvas not supported. Alternative content should go in this paragraph.

Structure

Server-Side

This site runs on Apache and PHP. Because it is a relatively small site, we've kept the metadata and articles as plain text files, one (private) folder per mini-site (php page). Page content is typically generated in about 20ms.

Basic SEO

We've been mindful of 'search engine optimisation' when developing this site, but have not sought to artificially increase our web presence at the expense of clarity. Some points:

  • The site auto-generates XML sitemaps from page and article data. Sitemaps for browsing users are also auto-generated. We compose index (front) pages manually, and the rest of the content is linked Wiki-style.
  • Each mini-site and each article has keyword and description meta-data. Each article also inherits its mini-site's meta-data, so a reasonably complete header is formed.
  • Titles for each article are concise and unique, and give a clear indication of its place in the overall site structure.