separating content and layout, HTML CSS and some web history

Content and LayoutLon Barfield

Separating content and layout

Bit of web historyContent and layout on the webWhy separation is a good thing

But first...

The Large Hadron Collider

Million GBytes per second

The Higgs Boson - July 2012

Yes it’s Comic Sans!

The God particle the Devil’s typeface

bancomicsans.com

It would be nice to publish data without layout issues

Tim Berners-Lee CERN - 1989

10,000 scientists from over 100 countriesIt would be nice to publish data without layout issuesWorld Wide Web - “Vague but exciting”info.cern.ch/hypertext/WWW/TheProject.html

Tim Berners-Lee CERN - 1989

Just content, no layout

This chunk of text is a heading, etc.Headings, Text, Title, Quote, Abstract20 Elements

Early web had no ‘design’

Designers v content purists

‘Tricks’ subverting the HTML tagsspaces, blank images, H2 for titles

Compromise - the centre tagHTML became content and layout

Nice HTML timeline

more layout oriented tagsstill mixing content and layout

broadcast.rackspace.com/blog/HTMLtimeline

Style sheets - CSS

This is the content…<H1>Blah blah</H1>

And this is how it should look...H1 {font-weight: bold;

text-transform: uppercase;}

Advantages

Accessibility - screen readers for the blind won’t start by reading the navigation barsResponsive design - information can adapt for small screens, printing etc.

Advantages cont.

Better search indexing - Is the term in the title, the heading?Semantic web - what do things actually mean

Hands on - Zen Garden

csszengarden.comen.wikipedia.org/wiki/CSS_Zen_Garden

download HTML and CSS sample using the links, tweak and screen grab it

Taking a peek at the CSS

The page using the CSSwww.csszengarden.com/?cssfile=/210/210.cssJust the CSSwww.csszengarden.com/210/210.css