separating content and layout, html css and some web history
DESCRIPTION
TRANSCRIPT
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