Content and
Layout
Lon Barfield
Separating content and layout
Bit of web history
Content and layout on the web
Why 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 countries
It would be nice to publish data without layout
issu...
Tim Berners-Lee CERN - 1989
Just content, no layout
This chunk of text is a heading, etc.
Headings, Text, Title, Quote, Abstract
20 Elements
Early web had no ‘design’
Designers v content purists
‘Tricks’ subverting the HTML tags
spaces, blank images, H2 for titles
Compromise - the centre ...
Nice HTML timeline
more layout oriented tags
still 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-t...
Advantages
Accessibility - screen readers for the blind won’t
start by reading the navigation bars
Responsive design - inf...
Advantages cont.
Better search indexing - Is the term in the title,
the heading?
Semantic web - what do things actually me...
Hands on - Zen Garden
csszengarden.com
en.wikipedia.org/wiki/CSS_Zen_Garden
download HTML and CSS sample using the
links, ...
Taking a peek at the CSS
The page using the CSS
www.csszengarden.com/?cssfile=/210/210.css
Just the CSS
www.csszengarden.c...
Upcoming SlideShare
Loading in …5
×

separating content and layout, HTML CSS and some web history

910 views
709 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
910
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

separating content and layout, HTML CSS and some web history

  1. 1. Content and Layout Lon Barfield
  2. 2. Separating content and layout Bit of web history Content and layout on the web Why separation is a good thing But first...
  3. 3. The Large Hadron Collider
  4. 4. Million GBytes per second
  5. 5. The Higgs Boson - July 2012
  6. 6. Yes it’s Comic Sans!
  7. 7. The God particle the Devil’s typeface bancomicsans.com It would be nice to publish data without layout issues
  8. 8. Tim Berners-Lee CERN - 1989 10,000 scientists from over 100 countries It would be nice to publish data without layout issues World Wide Web - “Vague but exciting” info.cern.ch/hypertext/WWW/TheProject.html
  9. 9. Tim Berners-Lee CERN - 1989
  10. 10. Just content, no layout This chunk of text is a heading, etc. Headings, Text, Title, Quote, Abstract 20 Elements
  11. 11. Early web had no ‘design’
  12. 12. Designers v content purists ‘Tricks’ subverting the HTML tags spaces, blank images, H2 for titles Compromise - the centre tag HTML became content and layout
  13. 13. Nice HTML timeline more layout oriented tags still mixing content and layout broadcast.rackspace.com/blog/HTMLtimeline
  14. 14. 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;}
  15. 15. Advantages Accessibility - screen readers for the blind won’t start by reading the navigation bars Responsive design - information can adapt for small screens, printing etc.
  16. 16. Advantages cont. Better search indexing - Is the term in the title, the heading? Semantic web - what do things actually mean
  17. 17. Hands on - Zen Garden csszengarden.com en.wikipedia.org/wiki/CSS_Zen_Garden download HTML and CSS sample using the links, tweak and screen grab it
  18. 18. Taking a peek at the CSS The page using the CSS www.csszengarden.com/?cssfile=/210/210.css Just the CSS www.csszengarden.com/210/210.css

×