Post on 15-Jan-2015
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